amp-block-container-unique-ids.php

<?php
/**
 * AMP Block Container Unique IDs plugin bootstrap.
 *
 * @package   Google\AmpBlockContainerUniqueIds
 * @author    Weston Ruter, Google
 * @license   GPL-2.0-or-later
 * @copyright 2021 Google Inc.
 *
 * @wordpress-plugin
 * Plugin Name: AMP Block Container Unique IDs
 * Plugin URI: https://gist.github.com/westonruter/71852bfeea22ebd7b570865a95b169d6
 * Description: Use consistent auto-generated CSS class names for block containers so that parsed CSS can be successfully cached.
 * Version: 0.1
 * Author: Weston Ruter, Google
 * Author URI: https://weston.ruter.net/
 * License: GNU General Public License v2 (or later)
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Gist Plugin URI: https://gist.github.com/westonruter/71852bfeea22ebd7b570865a95b169d6
 * Update URI: https://gist.github.com/westonruter/71852bfeea22ebd7b570865a95b169d6
 */

namespace Google\AmpBlockContainerUniqueIds;

use WP_Block_Type_Registry;

/**
 * Renders the layout config to the block wrapper.
 *
 * This is a forked version of what appears in WordPress core by replacing the use of `uniqid()` with `wp_unique_id()`.
 * This same change was done previously in the Twenty Seventeen theme (#44883). It is necessary so that generated CSS
 * class names are stable across page loads so that the parsed CSS can be cached.
 *
 * @link https://core.trac.wordpress.org/ticket/44883
 * @link https://github.com/WordPress/wordpress-develop/blob/8ec1cb83e346853588606b228b8eaa5921d47782/src/wp-includes/block-supports/layout.php#L132-L181
 * @link https://github.com/WordPress/gutenberg/blob/36959afb5f2f8bfd95ab08d75373a33bc25e582b/lib/block-supports/layout.php#L126-L172
 *
 * @param string $block_content Rendered block content.
 * @param array  $block         Block object.
 * @return string Filtered block content.
 */
function render_layout_support_flag( $block_content, $block ) {
	$block_type     = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
	if ( function_exists( 'gutenberg_block_has_support' ) ) {
		$support_layout = gutenberg_block_has_support( $block_type, array( '__experimentalLayout' ), false );
	} elseif ( function_exists( 'block_has_support' ) ) {
		$support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false );
	} else {
		$support_layout = false;
	}

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

	$block_gap             = wp_get_global_settings( array( 'spacing', 'blockGap' ) );
	$default_layout        = wp_get_global_settings( array( 'layout' ) );
	$has_block_gap_support = isset( $block_gap ) ? null !== $block_gap : false;
	$default_block_layout  = _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );
	$used_layout           = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $default_block_layout;
	if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] ) {
		if ( ! $default_layout ) {
			return $block_content;
		}
		$used_layout = $default_layout;
	}

	$class_name = wp_unique_id( 'wp-container-' );
	$gap_value  = _wp_array_get( $block, array( 'attrs', 'style', 'spacing', 'blockGap' ) );
	// Skip if gap value contains unsupported characters.
	// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
	// because we only want to match against the value, not the CSS attribute.
	$gap_value = preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
	if ( function_exists( 'gutenberg_get_layout_style' ) ) {
		$style = gutenberg_get_layout_style( ".$class_name", $used_layout, $has_block_gap_support, $gap_value );
	} elseif ( function_exists( 'wp_get_layout_style' ) ) {
		$style = wp_get_layout_style( ".$class_name", $used_layout, $has_block_gap_support, $gap_value );
	} else {
		return $block_content;
	}
	// This assumes the hook only applies to blocks with a single wrapper.
	// I think this is a reasonable limitation for that particular hook.
	$content = preg_replace(
		'/' . preg_quote( 'class="', '/' ) . '/',
		'class="' . esc_attr( $class_name ) . ' ',
		$block_content,
		1
	);

	if ( function_exists( 'gutenberg_enqueue_block_support_styles' ) ) {
		gutenberg_enqueue_block_support_styles( $style );
	} else if ( function_exists( 'wp_enqueue_block_support_styles' ) ) {
		wp_enqueue_block_support_styles( $style );
	}

	return $content;
}

// Override the original function in Gutenberg/Core.
add_action(
	'init',
	static function () {
		if (
			10 === has_filter( 'render_block', 'wp_render_layout_support_flag' )
			||
			10 === has_filter( 'render_block', 'gutenberg_render_layout_support_flag' )
		) {
			remove_filter( 'render_block', 'wp_render_layout_support_flag', 10 );
			remove_filter( 'render_block', 'gutenberg_render_layout_support_flag', 10 );
			add_filter( 'render_block', __NAMESPACE__ . '\render_layout_support_flag', 10, 2 );
		}
	}
);

Installation instructions: https://gist.github.com/westonruter/6110fbc4bef0c4b8c021a112012f7e9c

I'm not using anything on my groups in WordPress (I add my own class(es) and those are styled in the style sheet), I'm using :

remove_filter( 'render_block', 'wp_render_layout_support_flag', 10 );

and it stopped adding a bunch of junk at the bottom of my html. Is this future friendly?

@carasmo That's a good question. I believe this is needed if you using the block editor to manipulate spacing between blocks or customize the layout of blocks. If removing it doesn't cause any negative side effects for you, then I don't see how it will harm anything to remove it. I can't say whether removing it will cause problems in the future.