Make it work in the editor

WordPress · Oct 26, 2022 · d291f82 · d291f82
1 parent a29bd4a
commit d291f82
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 17 deletions.
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
@@ -305,9 +305,9 @@ function gutenberg_identify_inner_block_wrapper_classnames( $inner_content ) {
 
 	$matches = array();
 
-	preg_match_all( '/class="[a-z\-\_\s]*/', $inner_content[0], $matches );
+	preg_match_all( '/class="([a-z0-9\-\_\s]*)/', $inner_content[0], $matches );
 
-	return end( $matches[0] );
+	return end( $matches[1] );
 
 }
 
@@ -340,7 +340,6 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 
 	$class_names        = array();
 	$layout_definitions = _wp_array_get( $global_layout_settings, array( 'definitions' ), array() );
-	$block_classname    = wp_get_block_default_classname( $block['blockName'] );
 	$container_class    = wp_unique_id( 'wp-container-' );
 	$layout_classname   = '';
 
@@ -417,7 +416,7 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 		$should_skip_gap_serialization = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
 
 		$style = gutenberg_get_layout_style(
-			".$block_classname.$container_class",
+			".$container_class.$container_class",
 			$used_layout,
 			$has_block_gap_support,
 			$gap_value,

diff --git a/packages/block-editor/src/components/block-edit/index.js b/packages/block-editor/src/components/block-edit/index.js
@@ -20,11 +20,12 @@ import { BlockEditContextProvider, useBlockEditContext } from './context';
 export { useBlockEditContext };
 
 export default function BlockEdit( props ) {
-	const { name, isSelected, clientId } = props;
+	const { name, isSelected, clientId, layoutClassNames } = props;
 	const context = {
 		name,
 		isSelected,
 		clientId,
+		layoutClassNames,
 	};
 	return (
 		<BlockEditContextProvider

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
@@ -84,6 +84,7 @@ function BlockListBlock( {
 	isSelected,
 	isSelectionEnabled,
 	className,
+	layoutClassNames,
 	name,
 	isValid,
 	attributes,
@@ -146,6 +147,7 @@ function BlockListBlock( {
 			clientId={ clientId }
 			isSelectionEnabled={ isSelectionEnabled }
 			toggleSelection={ toggleSelection }
+			layoutClassNames={ layoutClassNames }
 		/>
 	);
 
@@ -231,7 +233,8 @@ function BlockListBlock( {
 				'is-content-block': hasContentLockedParent && isContentBlock,
 			},
 			dataAlign && themeSupportsLayout && `align${ dataAlign }`,
-			className
+			className,
+			layoutClassNames
 		),
 		wrapperProps: restWrapperProps,
 		isAligned,

diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
@@ -150,7 +150,7 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => {
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md
  */
 export function useInnerBlocksProps( props = {}, options = {} ) {
-	const { clientId } = useBlockEditContext();
+	const { clientId, layoutClassNames = '' } = useBlockEditContext();
 	const isSmallScreen = useViewportMatch( 'medium', '<' );
 	const { __experimentalCaptureToolbars, hasOverlay } = useSelect(
 		( select ) => {
@@ -200,11 +200,15 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 		innerBlocksProps.value && innerBlocksProps.onChange
 			? ControlledInnerBlocks
 			: UncontrolledInnerBlocks;
+	//Dedupe layout classes
+	const allTheClassNames = `${ props.className } ${ layoutClassNames }`;
+	const classNameSet = new Set( allTheClassNames.split( ' ' ) );
+	const dedupedClassNames = Array.from( classNameSet ).join( ' ' );
 	return {
 		...props,
 		ref,
 		className: classnames(
-			props.className,
+			dedupedClassNames,
 			'block-editor-block-list__layout',
 			{
 				'has-overlay': hasOverlay,

diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
@@ -9,11 +9,7 @@ import { kebabCase } from 'lodash';
  */
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
-import {
-	getBlockDefaultClassName,
-	getBlockSupport,
-	hasBlockSupport,
-} from '@wordpress/blocks';
+import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import {
 	Button,
@@ -366,9 +362,8 @@ export const withLayoutStyles = createHigherOrderComponent(
 		const layoutClasses = hasLayoutBlockSupport
 			? useLayoutClasses( block )
 			: null;
-		const selector = `.${ getBlockDefaultClassName(
-			name
-		) }.wp-container-${ id }`;
+		// Higher specificity to override defaults from theme.json.
+		const selector = `.wp-container-${ id }.wp-container-${ id }`;
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
 		const hasBlockGapSupport = blockGapSupport !== null;
 
@@ -413,7 +408,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 						/>,
 						element
 					) }
-				<BlockListBlock { ...props } className={ className } />
+				<BlockListBlock { ...props } layoutClassNames={ className } />
 			</>
 		);
 	}

diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
@@ -105,6 +105,12 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"__experimentalLayout": {
+			"allowSwitching": true,
+			"default": {
+				"type": "constrained"
+			}
 		}
 	},
 	"editorStyle": "wp-block-cover-editor",