From 030827385b47d613e7adbed56561a73b3ce378ad Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 27 Oct 2022 11:05:50 +1100 Subject: [PATCH 1/6] Add constrained/flow layout to Cover block. --- packages/block-library/src/cover/block.json | 5 +++++ packages/block-library/src/cover/edit/index.js | 7 +++++++ 2 files changed, 12 insertions(+) diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index 3bcc779a0f127..3e014e5fb4e14 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -109,6 +109,11 @@ "__experimentalDefaultControls": { "fontSize": true } + }, + "__experimentalLayout": { + "default": { + "type": "constrained" + } } }, "editorStyle": "wp-block-cover-editor", diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index a74ebe8fe18eb..b897360d6b0fa 100644 --- a/packages/block-library/src/cover/edit/index.js +++ b/packages/block-library/src/cover/edit/index.js @@ -89,6 +89,7 @@ function CoverEdit( { hasParallax, isDark, isRepeated, + layout = {}, minHeight, minHeightUnit, alt, @@ -187,6 +188,11 @@ function CoverEdit( { fontSize: hasFontSizes ? 'large' : undefined, } ); + const defaultLayout = useSetting( 'layout' ) || {}; + const usedLayout = ! layout?.type + ? { ...defaultLayout, ...layout, type: 'constrained' } + : { ...defaultLayout, ...layout }; + const innerBlocksProps = useInnerBlocksProps( { className: 'wp-block-cover__inner-container', @@ -198,6 +204,7 @@ function CoverEdit( { templateInsertUpdatesSelection: true, allowedBlocks, templateLock, + __experimentalLayout: usedLayout, } ); From 7ba9b7107aa7b4d7d5f3f800c61a846a129d76e4 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 31 Jan 2023 16:22:33 +1100 Subject: [PATCH 2/6] Remove edit logic. --- packages/block-library/src/cover/edit/index.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js index b897360d6b0fa..a74ebe8fe18eb 100644 --- a/packages/block-library/src/cover/edit/index.js +++ b/packages/block-library/src/cover/edit/index.js @@ -89,7 +89,6 @@ function CoverEdit( { hasParallax, isDark, isRepeated, - layout = {}, minHeight, minHeightUnit, alt, @@ -188,11 +187,6 @@ function CoverEdit( { fontSize: hasFontSizes ? 'large' : undefined, } ); - const defaultLayout = useSetting( 'layout' ) || {}; - const usedLayout = ! layout?.type - ? { ...defaultLayout, ...layout, type: 'constrained' } - : { ...defaultLayout, ...layout }; - const innerBlocksProps = useInnerBlocksProps( { className: 'wp-block-cover__inner-container', @@ -204,7 +198,6 @@ function CoverEdit( { templateInsertUpdatesSelection: true, allowedBlocks, templateLock, - __experimentalLayout: usedLayout, } ); From 22c8c2c2ff3d38d60b2f2e44a1c4c7fc170e09b4 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 1 Feb 2023 13:36:28 +1100 Subject: [PATCH 3/6] Remove justification and make flow layout default --- .../block-editor/src/layouts/constrained.js | 40 +++++++++++-------- packages/block-library/src/cover/block.json | 4 +- 2 files changed, 24 insertions(+), 20 deletions(-) diff --git a/packages/block-editor/src/layouts/constrained.js b/packages/block-editor/src/layouts/constrained.js index 773c42e9051c5..c8c6d74119942 100644 --- 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.' ) }

- - { justificationOptions.map( ( { value, icon, label } ) => { - return ( - - ); - } ) } - + { allowJustification && ( + + { justificationOptions.map( + ( { value, icon, label } ) => { + return ( + + ); + } + ) } + + ) } ); }, diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index 3e014e5fb4e14..b515b21e61ea3 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -111,9 +111,7 @@ } }, "__experimentalLayout": { - "default": { - "type": "constrained" - } + "allowJustification": false } }, "editorStyle": "wp-block-cover-editor", From e8af878b4f1c2f4f4b329415b3f80d20687c5f44 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 1 Feb 2023 14:08:55 +1100 Subject: [PATCH 4/6] Add constrained layout as a block variation. --- packages/block-library/src/cover/index.js | 2 ++ .../block-library/src/cover/variations.js | 25 +++++++++++++++++++ 2 files changed, 27 insertions(+) create mode 100644 packages/block-library/src/cover/variations.js diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js index eb780571248be..e6797a3b51dbe 100644 --- 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 new file mode 100644 index 0000000000000..d905cce29e64d --- /dev/null +++ b/packages/block-library/src/cover/variations.js @@ -0,0 +1,25 @@ +/** + * 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, + scope: [ 'block', 'inserter', 'transform' ], + isActive: ( blockAttributes ) => + ! blockAttributes.layout || + ! blockAttributes.layout?.type || + blockAttributes.layout?.type === 'constrained', + icon: cover, + }, +]; + +export default variations; From 6082aee09e5d83255dc33bbdf17bd6c55574674e Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 10 Feb 2023 10:03:52 +1100 Subject: [PATCH 5/6] Remove unnecessary variation properties. --- packages/block-library/src/cover/variations.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/block-library/src/cover/variations.js b/packages/block-library/src/cover/variations.js index d905cce29e64d..37c04d9a3cb98 100644 --- a/packages/block-library/src/cover/variations.js +++ b/packages/block-library/src/cover/variations.js @@ -13,11 +13,6 @@ const variations = [ ), attributes: { layout: { type: 'constrained' } }, isDefault: true, - scope: [ 'block', 'inserter', 'transform' ], - isActive: ( blockAttributes ) => - ! blockAttributes.layout || - ! blockAttributes.layout?.type || - blockAttributes.layout?.type === 'constrained', icon: cover, }, ]; From ea756bbae3538bb0f7e322f75ce4ecb00d79dbe0 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 6 Mar 2023 15:12:40 +1100 Subject: [PATCH 6/6] Update snapshot --- .../editor/various/__snapshots__/inserting-blocks.test.js.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 809990c313bc5..5187e574f2c7a 100644 --- 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 \

First paragraph

- +