←

Code Snippets

Convert WordPress spacing scale inline styles to utility classes and load conditionally


Copied

<?php

declare( strict_types=1 );

namespace Blockify;

use DOMDocument;
use DOMElement;
use function add_action;
use function add_filter;
use function defined;
use function explode;
use function get_the_block_template_html;
use function get_the_content;
use function implode;
use function in_array;
use function is_array;
use function libxml_clear_errors;
use function libxml_use_internal_errors;
use function mb_convert_encoding;
use function str_contains;
use function str_replace;
use function wp_add_inline_style;
use function wp_get_global_settings;
use function wp_list_pluck;

const NS = __NAMESPACE__ . '\\';

add_filter( 'render_block', NS . 'convert_spacing_to_classes', 10, 2 );
/**
 * Converts inline spacing styles to utility classes.
 *
 * @since 1.0.0
 *
 * @param string $content Block HTML content.
 * @param array  $block   Block attributes.
 *
 * @return string
 */
function convert_spacing_to_classes( string $content, array $block ): string {
	if ( ! $content ) {
		return $content;
	}

	$sizes = wp_get_global_settings()['spacing']['spacingSizes']['theme'] ?? [];

	if ( ! $sizes ) {
		return $content;
	}

	$slugs   = wp_list_pluck( $sizes, 'slug' );
	$spacing = $block['attrs']['style']['spacing'] ?? null;

	if ( ! $spacing ) {
		return $content;
	}

	$dom                     = new DOMDocument();
	$libxml_previous_state   = libxml_use_internal_errors( true );
	$dom->preserveWhiteSpace = true;

	if ( defined( 'LIBXML_HTML_NOIMPLIED' ) && defined( 'LIBXML_HTML_NODEFDTD' ) ) {
		$options = LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD;
	} elseif ( defined( 'LIBXML_HTML_NOIMPLIED' ) ) {
		$options = LIBXML_HTML_NOIMPLIED;
	} elseif ( defined( 'LIBXML_HTML_NODEFDTD' ) ) {
		$options = LIBXML_HTML_NODEFDTD;
	} else {
		$options = 0;
	}

	$dom->loadHTML(
		mb_convert_encoding(
			$content,
			'HTML-ENTITIES',
			'UTF-8' ),
		$options
	);

	$dom->formatOutput = true;

	libxml_clear_errors();
	libxml_use_internal_errors( $libxml_previous_state );

	/* @var $element DOMElement */
	$element = $dom->firstChild;

	$classes = explode( ' ', $element->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 ["has-padding-{$slug}"]        = "padding:var(--wp--preset--spacing--{$slug})";
		$styles ["has-padding-top-{$slug}"]    = "padding-top:var(--wp--preset--spacing--{$slug})";
		$styles ["has-padding-right-{$slug}"]  = "padding-right:var(--wp--preset--spacing--{$slug})";
		$styles ["has-padding-bottom-{$slug}"] = "padding-bottom:var(--wp--preset--spacing--{$slug})";
		$styles ["has-padding-left-{$slug}"]   = "padding-left:var(--wp--preset--spacing--{$slug})";
		$styles ["has-margin-{$slug}"]         = "margin:var(--wp--preset--spacing--{$slug})";
		$styles ["has-margin-top-{$slug}"]     = "margin-top:var(--wp--preset--spacing--{$slug})";
		$styles ["has-margin-right-{$slug}"]   = "margin-right:var(--wp--preset--spacing--{$slug})";
		$styles ["has-margin-bottom-{$slug}"]  = "margin-bottom:var(--wp--preset--spacing--{$slug})";
		$styles ["has-margin-left-{$slug}"]    = "margin-left:var(--wp--preset--spacing--{$slug})";
		$styles ["has-gap-{$slug}"]            = "gap:var(--wp--preset--spacing--{$slug})";
		$styles ["has-gap-vertical-{$slug}"]   = "row-gap:var(--wp--preset--spacing--{$slug})";
		$styles ["has-gap-horizontal-{$slug}"] = "column-gap:var(--wp--preset--spacing--{$slug})";
	}

	$html = get_the_content() . get_the_block_template_html();

	foreach ( $styles as $class => $rule ) {
		if ( str_contains( $html, $class ) ) {
			$css .= ".{$class}{{$rule}}";
		}
	}

	wp_add_inline_style( 'global-styles', $css );
}Code language: HTML, XML (xml)