Add constrained/flow layout to Cover block. (#45326)

* Add constrained/flow layout to Cover block. * Remove edit logic. * Remove justification and make flow layout default * Add constrained layout as a block variation. * Remove unnecessary variation properties. * Update snapshot
WordPress · Mar 8, 2023 · 32a3cc8 · 32a3cc8
1 parent 54781db
commit 32a3cc8
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 18 deletions.
diff --git a/packages/block-editor/src/layouts/constrained.js b/packages/block-editor/src/layouts/constrained.js
@@ -32,8 +32,10 @@ export default {
 	inspectorControls: function DefaultLayoutInspectorControls( {
 		layout,
 		onChange,
+		layoutBlockSupport = {},
 	} ) {
 		const { wideSize, contentSize, justifyContent = 'center' } = layout;
+		const { allowJustification = true } = layoutBlockSupport;
 		const onJustificationChange = ( value ) => {
 			onChange( {
 				...layout,
@@ -117,23 +119,27 @@ export default {
 						'Customize the width for all elements that are assigned to the center or wide columns.'
 					) }
 				</p>
-				<ToggleGroupControl
-					__nextHasNoMarginBottom
-					label={ __( 'Justification' ) }
-					value={ justifyContent }
-					onChange={ onJustificationChange }
-				>
-					{ justificationOptions.map( ( { value, icon, label } ) => {
-						return (
-							<ToggleGroupControlOptionIcon
-								key={ value }
-								value={ value }
-								icon={ icon }
-								label={ label }
-							/>
-						);
-					} ) }
-				</ToggleGroupControl>
+				{ allowJustification && (
+					<ToggleGroupControl
+						__nextHasNoMarginBottom
+						label={ __( 'Justification' ) }
+						value={ justifyContent }
+						onChange={ onJustificationChange }
+					>
+						{ justificationOptions.map(
+							( { value, icon, label } ) => {
+								return (
+									<ToggleGroupControlOptionIcon
+										key={ value }
+										value={ value }
+										icon={ icon }
+										label={ label }
+									/>
+								);
+							}
+						) }
+					</ToggleGroupControl>
+				) }
 			</>
 		);
 	},

diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
@@ -109,6 +109,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"__experimentalLayout": {
+			"allowJustification": false
 		}
 	},
 	"editorStyle": "wp-block-cover-editor",

diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js
@@ -13,6 +13,7 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import variations from './variations';
 
 const { name } = metadata;
 
@@ -48,6 +49,7 @@ export const settings = {
 	save,
 	edit,
 	deprecated,
+	variations,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );
diff --git a/packages/block-library/src/cover/variations.js b/packages/block-library/src/cover/variations.js
@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { cover } from '@wordpress/icons';
+
+const variations = [
+	{
+		name: 'cover',
+		title: __( 'Cover' ),
+		description: __(
+			'Add an image or video with a text overlay — great for headers.'
+		),
+		attributes: { layout: { type: 'constrained' } },
+		isDefault: true,
+		icon: cover,
+	},
+];
+
+export default variations;
diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap
@@ -88,7 +88,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 <p>First paragraph</p>
 <!-- /wp:paragraph -->
 
-<!-- wp:cover {"isDark":false} -->
+<!-- wp:cover {"isDark":false,"layout":{"type":"constrained"}} -->
 <div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"></div></div>
 <!-- /wp:cover -->