Snippets

Daniel Shaw Customise layout-supported Group block styles (WP 5.8)

Created by Daniel Shaw last modified
<?php
/**
 * Custom layout block support.
 */

/**
 * Renders the custom layout config to the block wrapper.
 *
 * Removes core and Gutenberg default implementation.
 *
 * @param  string $block_content Rendered block content.
 * @param  array  $block         Block object.
 * @return string                Filtered block content.
 */
function chthonic_render_layout_support_flag( $block_content, $block ) {
	$block_type     = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
	$support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false );

	if ( ! $support_layout || ! isset( $block['attrs']['layout'] ) ) {
		return $block_content;
	}

	$used_layout = $block['attrs']['layout'];

	if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] ) {
		$tree           = WP_Theme_JSON_Resolver::get_merged_data();
		$default_layout = _wp_array_get( $tree->get_settings(), array( 'layout' ) );

		if ( ! $default_layout ) {
			return $block_content;
		}

		$used_layout = $default_layout;
	}

	$id           = uniqid();
	$content_size = isset( $used_layout['contentSize'] ) ? $used_layout['contentSize'] : null;
	$wide_size    = isset( $used_layout['wideSize'] ) ? $used_layout['wideSize'] : null;

	$all_max_width_value  = $content_size ? $content_size : $wide_size;
	$wide_max_width_value = $wide_size ? $wide_size : $content_size;

	// Make sure there is a single CSS rule, and all tags are stripped for security.
	$all_max_width_value  = safecss_filter_attr( explode( ';', $all_max_width_value )[0] );
	$wide_max_width_value = safecss_filter_attr( explode( ';', $wide_max_width_value )[0] );

	$style = '';

	// Custom selectors and declarations for layout.
	if ( $content_size || $wide_size ) {
		$style  = ".wp-container-$id{";
		$style .= 'max-width:' . esc_html( $all_max_width_value ) . ';';
		$style .= 'justify-self:center'; // Ensure container remains centred when width is less than post container.
		$style .= '}';

		$style .= ".wp-container-$id.alignwide{max-width:" . esc_html( $wide_max_width_value ) . ';}';

		$style .= ".wp-container-$id.alignfull{max-width:none;}";
	}

	// This assumes the hook only applies to blocks with a single wrapper.
	$content = preg_replace(
		'/' . preg_quote( 'class="', '/' ) . '/',
		'class="wp-container-' . $id . ' ',
		$block_content,
		1
	);

	if ( $style ) {
		return $content . '<style>' . $style . '</style>';
	}

	return $block_content;
}

add_filter( 'render_block', 'chthonic_render_layout_support_flag', 10, 2 );

// Remove the core and Gutenberg functions replaced by chthonic_render_layout_support_flag().
if ( function_exists( 'chthonic_render_layout_support_flag' ) ) {
	remove_filter( 'render_block', 'wp_render_layout_support_flag', 10, 2 );
	remove_filter( 'render_block', 'gutenberg_render_layout_support_flag', 10, 2 );
}

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.