Move the style application to the server to keep the markup pure

WordPress · Feb 26, 2021 · 1fa6f6e · 1fa6f6e
1 parent 317faeb
commit 1fa6f6e
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 42 deletions.
diff --git a/lib/blocks.php b/lib/blocks.php
@@ -23,7 +23,6 @@ function gutenberg_reregister_core_block_types() {
 				'columns',
 				'file',
 				'gallery',
-				'group',
 				'heading',
 				'html',
 				'image',
@@ -54,6 +53,7 @@ function gutenberg_reregister_core_block_types() {
 					'calendar.php'                  => 'core/calendar',
 					'categories.php'                => 'core/categories',
 					'cover.php'                     => 'core/cover',
+					'group.php'                     => 'core/group',
 					'latest-comments.php'           => 'core/latest-comments',
 					'latest-posts.php'              => 'core/latest-posts',
 					'navigation.php'                => 'core/navigation',

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-library/package.json b/packages/block-library/package.json
@@ -61,8 +61,7 @@
 		"memize": "^1.1.0",
 		"moment": "^2.22.1",
 		"react-easy-crop": "^3.0.0",
-		"tinycolor2": "^1.4.2",
-		"uuid": "^8.3.0"
+		"tinycolor2": "^1.4.2"
 	},
 	"publishConfig": {
 		"access": "public"

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { v4 as uuid } from 'uuid';
 import classnames from 'classnames';
 
 /**
@@ -25,6 +24,7 @@ import {
 	Button,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useInstanceId } from '@wordpress/compose';
 const { __Visualizer: BoxControlVisualizer } = BoxControl;
 
 const isWeb = Platform.OS === 'web';
@@ -58,6 +58,7 @@ export const CSS_UNITS = [
 ];
 
 function GroupEdit( { attributes, setAttributes, clientId } ) {
+	const id = useInstanceId( GroupEdit );
 	const { defaultLayout, hasInnerBlocks } = useSelect(
 		( select ) => {
 			const { getBlock, getSettings } = select( blockEditorStore );
@@ -73,10 +74,13 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 	const blockProps = useBlockProps();
 	const { tagName: TagName = 'div', templateLock, layout = {} } = attributes;
 	const { contentSize, wideSize } = layout;
+	// TODO: this shouldn't be based on the values but on a theme.json config.
+	const supportsLayout = !! contentSize || !! wideSize;
 	const innerBlocksProps = useInnerBlocksProps(
 		{
-			className: classnames( 'wp-block-group__inner-container', {
-				[ `wp-container-${ layout.id }` ]: !! layout.id,
+			className: classnames( {
+				'wp-block-group__inner-container': ! supportsLayout,
+				[ `wp-container-${ id }` ]: contentSize || wideSize,
 			} ),
 		},
 		{
@@ -105,7 +109,6 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 								setAttributes( {
 									layout: {
 										...defaultLayout,
-										id: layout.id ?? uuid(),
 									},
 								} );
 							} }
@@ -125,7 +128,6 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 								layout: {
 									...layout,
 									contentSize: nextWidth,
-									id: layout.id ?? uuid(),
 								},
 							} );
 						} }
@@ -143,7 +145,6 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 								layout: {
 									...layout,
 									wideSize: nextWidth,
-									id: layout.id ?? uuid(),
 								},
 							} );
 						} }
@@ -173,17 +174,17 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 				{ ( wideSize || contentSize ) && (
 					<style>
 						{ `
-							.wp-container-${ layout.id } > * {
+							.wp-container-${ id } > * {
 								max-width: ${ contentSize ?? wideSize };
 								margin-left: auto;
 								margin-right: auto;
 							}
 						
-							.wp-container-${ layout.id } > [data-align="wide"] {
+							.wp-container-${ id } > [data-align="wide"] {
 								max-width: ${ wideSize ?? contentSize };
 							}
 						
-							.wp-container-${ layout.id } > [data-align="full"] {
+							.wp-container-${ id } > [data-align="full"] {
 								max-width: none;
 							}
 						` }
@@ -193,6 +194,11 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 					values={ attributes.style?.spacing?.padding }
 					showValues={ attributes.style?.visualizers?.padding }
 				/>
+				{ /*
+				 * When the layout option is supported, the extra div is not necessary,
+				 * it's just there because of the extra "BoxControlVisualizer" and "style"
+				 * that should be outside the inner blocks container.
+				 */ }
 				<div { ...innerBlocksProps } />
 			</TagName>
 		</>

diff --git a/packages/block-library/src/group/index.php b/packages/block-library/src/group/index.php
@@ -0,0 +1,67 @@
+<?php
+/**
+ * Server-side rendering of the `core/group` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Supports `layoutt` attribute server side for `core/group`.
+ *
+ * @param array  $attributes The block attributes.
+ * @param string $content HTML content of the block.
+ *
+ * @return string Rendered HTML of the referenced block.
+ */
+function render_block_core_group( $attributes, $content ) {
+	if ( ! isset( $attributes['layout'] ) ) {
+		return $content;
+	}
+
+	$id           = uniqid();
+	$content_size = isset( $attributes['layout']['contentSize'] ) ? $attributes['layout']['contentSize'] : null;
+	$wide_size    = isset( $attributes['layout']['wideSize'] ) ? $attributes['layout']['wideSize'] : null;
+	if ( ! $content_size && ! $wide_size ) {
+		return $content;
+	}
+	ob_start();
+	?>
+		<style>
+			<?php echo '.wp-container-' . $id; ?> > * {
+				max-width: <?php echo $content_size ? $content_size : $wide_size; ?>;
+				margin-left: auto;
+				margin-right: auto;
+			}
+
+			<?php echo '.wp-container-' . $id; ?> > .alignwide {
+				max-width: <?php echo $wide_size ? $wide_size : $content_size; ?>;
+			}
+
+			<?php echo '.wp-container-' . $id; ?> .alignfull {
+				max-width: none;
+			}
+		</style>
+	<?php
+	$style   = ob_get_clean();
+	$content = preg_replace(
+		'/' . preg_quote( 'class="', '/' ) . '/',
+		'class="wp-container-' . $id . ' ',
+		$content,
+		1
+	);
+
+	return $content . $style;
+}
+
+/**
+ * Registers the `core/group` block.
+ */
+function register_block_core_group() {
+	register_block_type_from_metadata(
+		__DIR__ . '/group',
+		array(
+			'render_callback' => 'render_block_core_group',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_group' );
diff --git a/packages/block-library/src/group/save.js b/packages/block-library/src/group/save.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -11,32 +6,19 @@ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 export default function save( { attributes } ) {
 	const { tagName: Tag, layout = {} } = attributes;
 	const { contentSize, wideSize } = layout;
-	const className = classnames( 'wp-block-group__inner-container', {
-		[ `wp-container-${ layout.id }` ]: !! layout.id,
-	} );
+	// TODO: this shouldn't be based on the values but on a theme.json config.
+	const supportsLayout = !! contentSize || !! wideSize;
+	if ( supportsLayout ) {
+		return (
+			<Tag { ...useBlockProps.save() }>
+				<InnerBlocks.Content />
+			</Tag>
+		);
+	}
 
 	return (
 		<Tag { ...useBlockProps.save() }>
-			{ ( contentSize || wideSize ) && (
-				<style>
-					{ `
-							.wp-container-${ layout.id } > * {
-								max-width: ${ contentSize ?? wideSize };
-								margin-left: auto;
-								margin-right: auto;
-							}
-						
-							.wp-container-${ layout.id } > .alignwide {
-								max-width: ${ wideSize ?? contentSize };
-							}
-						
-							.wp-container-${ layout.id } > .alignfull {
-								max-width: none;
-							}
-						` }
-				</style>
-			) }
-			<div className={ className }>
+			<div className="wp-block-group__inner-container">
 				<InnerBlocks.Content />
 			</div>
 		</Tag>