From dee37fb84c59b4b47cd90c352ad50da86f118c89 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 18 Aug 2023 12:34:06 +1200 Subject: [PATCH 1/2] Initial commit --- packages/block-library/src/block/block.json | 10 ++++++ packages/block-library/src/block/edit.js | 16 +++++++++- .../block-library/src/paragraph/block.json | 3 +- packages/block-library/src/paragraph/edit.js | 31 +++++++++++++++---- 4 files changed, 52 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/block/block.json b/packages/block-library/src/block/block.json index 4cb53960725d21..47a8a41f28939e 100644 --- a/packages/block-library/src/block/block.json +++ b/packages/block-library/src/block/block.json @@ -10,8 +10,18 @@ "attributes": { "ref": { "type": "number" + }, + "dynamicContent": { + "type": "object" + }, + "setDynamicContent": { + "type": "function" } }, + "providesContext": { + "dynamicContent": "dynamicContent", + "setDynamicContent": "setDynamicContent" + }, "supports": { "customClassName": false, "html": false, diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js index 13745ae0fd6dec..4c8de62bcb632c 100644 --- a/packages/block-library/src/block/edit.js +++ b/packages/block-library/src/block/edit.js @@ -22,8 +22,22 @@ import { useBlockProps, Warning, } from '@wordpress/block-editor'; +import { useEffect } from '@wordpress/element'; + +export default function ReusableBlockEdit( { + attributes: { ref }, + setAttributes, +} ) { + const setDynamicContent = ( newDynamicContent ) => { + setAttributes( { + dynamicContent: newDynamicContent, + } ); + }; + + useEffect( () => { + setAttributes( { setDynamicContent } ); + }, [] ); -export default function ReusableBlockEdit( { attributes: { ref } } ) { const hasAlreadyRendered = useHasRecursion( ref ); const { record, hasResolved } = useEntityRecord( 'postType', diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json index 85f56f4a838f50..a1eaffdcf19362 100644 --- a/packages/block-library/src/paragraph/block.json +++ b/packages/block-library/src/paragraph/block.json @@ -7,7 +7,7 @@ "description": "Start with the basic building block of all narrative.", "keywords": [ "text" ], "textdomain": "default", - "usesContext": [ "postId" ], + "usesContext": [ "postId", "dynamicContent", "setDynamicContent" ], "attributes": { "align": { "type": "string" @@ -32,6 +32,7 @@ } }, "supports": { + "__experimentalMetadata": true, "anchor": true, "className": false, "color": { diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index 09d0157e987fd1..a7cf7230b3f2f3 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -2,6 +2,7 @@ * External dependencies */ import classnames from 'classnames'; +import { v4 as uuid } from 'uuid'; /** * WordPress dependencies @@ -56,8 +57,13 @@ function ParagraphBlock( { onRemove, setAttributes, clientId, + context: { dynamicContent, setDynamicContent }, } ) { const { align, content, direction, dropCap, placeholder } = attributes; + const currentContent = + dynamicContent && dynamicContent[ attributes.metadata?.id ] + ? dynamicContent[ attributes.metadata?.id ] + : content; const isDropCapFeatureEnabled = useSetting( 'typography.dropCap' ); const blockProps = useBlockProps( { ref: useOnEnter( { clientId, content } ), @@ -76,7 +82,22 @@ function ParagraphBlock( { } else { helpText = __( 'Toggle to show a large initial letter.' ); } + const handleOnChange = ( newContent ) => { + if ( setDynamicContent ) { + const id = attributes.metadata?.id + ? attributes.metadata?.id + : uuid(); + if ( ! attributes.metadata?.id ) { + setAttributes( { + metadata: { ...attributes.metadata, id }, + } ); + } + setDynamicContent( { ...dynamicContent, [ id ]: newContent } ); + return; + } + setAttributes( { content: newContent } ); + }; return ( <> @@ -128,10 +149,8 @@ function ParagraphBlock( { identifier="content" tagName="p" { ...blockProps } - value={ content } - onChange={ ( newContent ) => - setAttributes( { content: newContent } ) - } + value={ currentContent } + onChange={ handleOnChange } onSplit={ ( value, isOriginal ) => { let newAttributes; @@ -154,13 +173,13 @@ function ParagraphBlock( { onReplace={ onReplace } onRemove={ onRemove } aria-label={ - content + currentContent ? __( 'Paragraph block' ) : __( 'Empty block; start writing or type forward slash to choose a block' ) } - data-empty={ content ? false : true } + data-empty={ currentContent ? false : true } placeholder={ placeholder || __( 'Type / to choose a block' ) } data-custom-placeholder={ placeholder ? true : undefined } __unstableEmbedURLOnPaste From b8d448deb22228d05b2dad1ad40a5aca476f3798 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 18 Aug 2023 15:58:23 +1200 Subject: [PATCH 2/2] Add toggle to revert to pattern content --- packages/block-library/src/paragraph/edit.js | 26 ++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index a7cf7230b3f2f3..b4ce3ea6dc22d9 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -12,6 +12,7 @@ import { ToolbarButton, ToggleControl, __experimentalToolsPanelItem as ToolsPanelItem, + PanelBody, } from '@wordpress/components'; import { AlignmentControl, @@ -145,6 +146,30 @@ function ParagraphBlock( { ) } + { dynamicContent && ( + + + + setAttributes( { + metadata: { + ...attributes.metadata, + id: undefined, + }, + } ) + } + help={ __( + 'Toggle to sync original pattern content' + ) } + /> + + + ) }