From 648f924927ff953ced7cab8470c456c28dcb1348 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 22 Apr 2021 09:44:33 +0100 Subject: [PATCH 1/4] Add alignment functionality to reusable blocks --- packages/block-library/src/block/block.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/block/block.json b/packages/block-library/src/block/block.json index 006c85c0b5db6..0ec0751efaa0f 100644 --- a/packages/block-library/src/block/block.json +++ b/packages/block-library/src/block/block.json @@ -13,7 +13,8 @@ "supports": { "customClassName": false, "html": false, - "inserter": false + "inserter": false, + "align": [ "wide", "full" ] }, "editorStyle": "wp-block-editor" } From 17f30589b2a2803441bdaab915c5e4b7779c6e55 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 29 Jul 2021 14:07:21 +0100 Subject: [PATCH 2/4] Apply widest alignment from blocks to be made reusable --- .../reusable-blocks/src/store/controls.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/reusable-blocks/src/store/controls.js b/packages/reusable-blocks/src/store/controls.js index e430688684305..56c0df73c855a 100644 --- a/packages/reusable-blocks/src/store/controls.js +++ b/packages/reusable-blocks/src/store/controls.js @@ -90,6 +90,24 @@ const controls = { CONVERT_BLOCKS_TO_REUSABLE: createRegistryControl( ( registry ) => async function ( { clientIds, title } ) { + const blocks = registry + .select( 'core/block-editor' ) + .getBlocksByClientId( clientIds ); + + const alignments = [ 'wide', 'full' ]; + + // Determine the widest setting of all the blocks to be grouped + const widestAlignment = blocks.reduce( + ( accumulator, block ) => { + const { align } = block.attributes; + return alignments.indexOf( align ) > + alignments.indexOf( accumulator ) + ? align + : accumulator; + }, + undefined + ); + const reusableBlock = { title: title || __( 'Untitled Reusable block' ), content: serialize( @@ -106,6 +124,7 @@ const controls = { const newBlock = createBlock( 'core/block', { ref: updatedRecord.id, + align: widestAlignment, } ); registry .dispatch( blockEditorStore ) From db7c8fac7f69eff4300cd039d8605619cab6667e Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 10 Aug 2021 10:57:29 +0100 Subject: [PATCH 3/4] Remove default alignment attribute This avoids having the toolbar show up or clashing with existing alignments --- packages/block-library/src/block/block.json | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/block/block.json b/packages/block-library/src/block/block.json index 0ec0751efaa0f..87725221803ff 100644 --- a/packages/block-library/src/block/block.json +++ b/packages/block-library/src/block/block.json @@ -8,13 +8,15 @@ "attributes": { "ref": { "type": "number" + }, + "inheritedAlignment": { + "type": "string" } }, "supports": { "customClassName": false, "html": false, - "inserter": false, - "align": [ "wide", "full" ] + "inserter": false }, "editorStyle": "wp-block-editor" } From e2ad54742aed75fb40389eea13ebc7caf86a2179 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 10 Aug 2021 10:57:49 +0100 Subject: [PATCH 4/4] Set block alignment based on widgest block when inserted into canvas --- packages/block-library/src/block/edit.js | 32 ++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js index bf4f933773d6b..51d76c736bab4 100644 --- a/packages/block-library/src/block/edit.js +++ b/packages/block-library/src/block/edit.js @@ -28,11 +28,17 @@ import { } from '@wordpress/block-editor'; import { store as reusableBlocksStore } from '@wordpress/reusable-blocks'; import { ungroup } from '@wordpress/icons'; +import { useEffect } from '@wordpress/element'; -export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) { +export default function ReusableBlockEdit( { + attributes: { ref, inheritedAlignment }, + setAttributes, + clientId, +} ) { const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders( ref ); + const { isMissing, hasResolved } = useSelect( ( select ) => { const persistedBlock = select( coreStore ).getEntityRecord( @@ -71,7 +77,29 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) { ref ); - const blockProps = useBlockProps(); + useEffect( () => { + const alignments = [ 'wide', 'full' ]; + + // Determine the widest setting of all the contained blocks. + const widestAlignment = blocks.reduce( ( accumulator, block ) => { + const { align } = block.attributes; + return alignments.indexOf( align ) > + alignments.indexOf( accumulator ) + ? align + : accumulator; + }, undefined ); + + // Set the attribute of the Reusable block to match the widest + // alignment. + + setAttributes( { + inheritedAlignment: widestAlignment ?? '', + } ); + }, [ blocks ] ); + + const blockProps = useBlockProps( { + 'data-align': inheritedAlignment, + } ); const innerBlocksProps = useInnerBlocksProps( {},