getAttribute( 'class' ) ); $prefix = 'var:preset|spacing|'; foreach ( $spacing as $type => $sides ) { $type = str_replace( 'blockGap', 'gap', $type ); if ( ! is_array( $sides ) ) { $size = str_replace( $prefix, '', (string) $sides ); if ( ! in_array( $size, $slugs, true ) ) { continue; } $class = "has-{$type}-{$size}"; $classes[] = $class; continue; } foreach ( $sides as $side => $size ) { $size = str_replace( $prefix, '', $size ); if ( ! in_array( $size, $slugs, true ) ) { continue; } if ( $type === 'gap' ) { $side = $side === 'top' ? 'vertical' : 'horizontal'; } $class = "has-{$type}-{$side}-{$size}"; $classes[] = $class; } } $styles = explode( ';', $element->getAttribute( 'style' ) ); foreach ( $styles as $index => $style ) { if ( ! $style || str_contains( $style, 'preset--spacing' ) ) { unset( $styles[ $index ] ); } } $element->setAttribute( 'style', implode( ';', $styles ) ); $element->setAttribute( 'class', implode( ' ', $classes ) ); return $dom->saveHTML(); } add_action( 'wp_enqueue_scripts', NS . 'add_spacing_utility_classes', 11 ); /** * Conditionally adds spacing scale utility classes if used on a page. * * @since 1.0.0 * * @return void */ function add_spacing_utility_classes(): void { $sizes = wp_get_global_settings()['spacing']['spacingSizes']['theme'] ?? []; if ( ! $sizes ) { return; } $styles = []; $css = ''; foreach ( $sizes as $size ) { $slug = $size['slug'] ?? ''; if ( ! $slug ) { continue; } $styles[ "padding-{$slug}" ] = 'padding'; $styles[ "padding-top-{$slug}" ] = 'padding-top'; $styles[ "padding-right-{$slug}" ] = 'padding-right'; $styles[ "padding-bottom-{$slug}" ] = 'padding-bottom'; $styles[ "padding-left-{$slug}" ] = 'padding-left'; $styles[ "margin-{$slug}" ] = 'margin'; $styles[ "margin-top-{$slug}" ] = 'margin-top'; $styles[ "margin-right-{$slug}" ] = 'margin-right'; $styles[ "margin-bottom-{$slug}" ] = 'margin-bottom'; $styles[ "margin-left-{$slug}" ] = 'margin-left'; $styles[ "gap-{$slug}" ] = 'gap'; $styles[ "gap-vertical-{$slug}" ] = 'row-gap'; $styles[ "gap-horizontal-{$slug}" ] = 'column-gap'; } $html = get_the_content() . get_the_block_template_html(); foreach ( $styles as $class => $property ) { $slug = str_replace( $property . '-', '', $class ); if ( str_contains( $html, $class ) ) { $css .= ".has-{$class}{{$property}:var(--wp--preset--spacing--{$slug})!important}"; } } wp_add_inline_style( 'global-styles', $css ); }