From ecc43499e968cde5692659f2bb1bbe1ee62c17e2 Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 25 Jul 2023 13:00:42 +0100 Subject: [PATCH 1/6] Footnotes: disable based on post type --- .../src/components/rich-text/format-edit.js | 95 +++++++++++-------- packages/block-library/src/footnotes/edit.js | 14 +++ .../block-library/src/footnotes/format.js | 12 ++- packages/block-library/src/footnotes/index.js | 4 +- 4 files changed, 83 insertions(+), 42 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/format-edit.js b/packages/block-editor/src/components/rich-text/format-edit.js index 75b077ab321d4..8611634717264 100644 --- a/packages/block-editor/src/components/rich-text/format-edit.js +++ b/packages/block-editor/src/components/rich-text/format-edit.js @@ -3,42 +3,61 @@ */ import { getActiveFormat, getActiveObject } from '@wordpress/rich-text'; -export default function FormatEdit( { - formatTypes, - onChange, - onFocus, - value, - forwardedRef, -} ) { - return formatTypes.map( ( settings ) => { - const { name, edit: Edit } = settings; - - if ( ! Edit ) { - return null; - } - - const activeFormat = getActiveFormat( value, name ); - const isActive = activeFormat !== undefined; - const activeObject = getActiveObject( value ); - const isObjectActive = - activeObject !== undefined && activeObject.type === name; - - return ( - - ); - } ); +import { useContext, useMemo } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import BlockContext from '../block-context'; + +const DEFAULT_BLOCK_CONTEXT = {}; + +function Edit( { onChange, onFocus, value, forwardedRef, settings } ) { + const { name, edit: EditFunction, usesContext } = settings; + + const blockContext = useContext( BlockContext ); + + // Assign context values using the block type's declared context needs. + const context = useMemo( () => { + return usesContext + ? Object.fromEntries( + Object.entries( blockContext ).filter( ( [ key ] ) => + usesContext.includes( key ) + ) + ) + : DEFAULT_BLOCK_CONTEXT; + }, [ usesContext, blockContext ] ); + + if ( ! EditFunction ) { + return null; + } + + const activeFormat = getActiveFormat( value, name ); + const isActive = activeFormat !== undefined; + const activeObject = getActiveObject( value ); + const isObjectActive = + activeObject !== undefined && activeObject.type === name; + + return ( + + ); +} + +export default function FormatEdit( { formatTypes, ...props } ) { + return formatTypes.map( ( settings ) => ( + + ) ); } diff --git a/packages/block-library/src/footnotes/edit.js b/packages/block-library/src/footnotes/edit.js index fdfe7a94039af..d8777b77f09e2 100644 --- a/packages/block-library/src/footnotes/edit.js +++ b/packages/block-library/src/footnotes/edit.js @@ -17,6 +17,20 @@ export default function FootnotesEdit( { context: { postType, postId } } ) { const footnotes = meta?.footnotes ? JSON.parse( meta.footnotes ) : []; const blockProps = useBlockProps(); + if ( postType !== 'post' && postType !== 'page' ) { + return ( +
+ } + label={ __( 'Footnotes' ) } + instructions={ __( + 'Footnotes are not supported here. Add this block to post or page content.' + ) } + /> +
+ ); + } + if ( ! footnotes.length ) { return (
diff --git a/packages/block-library/src/footnotes/format.js b/packages/block-library/src/footnotes/format.js index eb700787d02ee..df1cfa2e5f289 100644 --- a/packages/block-library/src/footnotes/format.js +++ b/packages/block-library/src/footnotes/format.js @@ -30,7 +30,13 @@ export const format = { 'data-fn': 'data-fn', }, contentEditable: false, - edit: function Edit( { value, onChange, isObjectActive } ) { + usesContext: [ 'postType' ], + edit: function Edit( { + value, + onChange, + isObjectActive, + context: { postType }, + } ) { const registry = useRegistry(); const { getSelectedBlockClientId, @@ -41,6 +47,10 @@ export const format = { const { selectionChange, insertBlock } = useDispatch( blockEditorStore ); + if ( postType !== 'post' && postType !== 'page' ) { + return null; + } + function onClick() { registry.batch( () => { let id; diff --git a/packages/block-library/src/footnotes/index.js b/packages/block-library/src/footnotes/index.js index c0f3d60ada543..15170c14f08ee 100644 --- a/packages/block-library/src/footnotes/index.js +++ b/packages/block-library/src/footnotes/index.js @@ -21,9 +21,7 @@ export const settings = { edit, }; -// Would be good to remove the format and HoR if the block is unregistered. -registerFormatType( formatName, format ); - export const init = () => { initBlock( { name, metadata, settings } ); + registerFormatType( formatName, format ); }; From d275257f72ecd17bea7c43cd9f0226968dd74fbd Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 25 Jul 2023 13:49:28 +0100 Subject: [PATCH 2/6] Address feedback --- packages/block-editor/src/components/rich-text/format-edit.js | 1 - packages/block-library/src/footnotes/edit.js | 4 +--- packages/block-library/src/footnotes/index.js | 3 ++- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/format-edit.js b/packages/block-editor/src/components/rich-text/format-edit.js index 8611634717264..388d9ef2ca721 100644 --- a/packages/block-editor/src/components/rich-text/format-edit.js +++ b/packages/block-editor/src/components/rich-text/format-edit.js @@ -2,7 +2,6 @@ * WordPress dependencies */ import { getActiveFormat, getActiveObject } from '@wordpress/rich-text'; - import { useContext, useMemo } from '@wordpress/element'; /** diff --git a/packages/block-library/src/footnotes/edit.js b/packages/block-library/src/footnotes/edit.js index d8777b77f09e2..9cb204abdefb3 100644 --- a/packages/block-library/src/footnotes/edit.js +++ b/packages/block-library/src/footnotes/edit.js @@ -37,9 +37,7 @@ export default function FootnotesEdit( { context: { postType, postId } } ) { } label={ __( 'Footnotes' ) } - instructions={ __( - 'Footnotes found in blocks within this document will be displayed here.' - ) } + // To do: add instructions. We can't add new string in RC. />
); diff --git a/packages/block-library/src/footnotes/index.js b/packages/block-library/src/footnotes/index.js index 15170c14f08ee..c5e851af7e033 100644 --- a/packages/block-library/src/footnotes/index.js +++ b/packages/block-library/src/footnotes/index.js @@ -21,7 +21,8 @@ export const settings = { edit, }; +registerFormatType( formatName, format ); + export const init = () => { initBlock( { name, metadata, settings } ); - registerFormatType( formatName, format ); }; From 216f5a62ee92b6de3e60fe912b864f52a7b1a7ca Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 25 Jul 2023 15:06:42 +0100 Subject: [PATCH 3/6] Fix typo --- packages/block-library/src/footnotes/edit.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/footnotes/edit.js b/packages/block-library/src/footnotes/edit.js index 9cb204abdefb3..b8b92170fe217 100644 --- a/packages/block-library/src/footnotes/edit.js +++ b/packages/block-library/src/footnotes/edit.js @@ -23,9 +23,7 @@ export default function FootnotesEdit( { context: { postType, postId } } ) { } label={ __( 'Footnotes' ) } - instructions={ __( - 'Footnotes are not supported here. Add this block to post or page content.' - ) } + // To do: add instructions. We can't add new string in RC. /> ); @@ -37,7 +35,9 @@ export default function FootnotesEdit( { context: { postType, postId } } ) { } label={ __( 'Footnotes' ) } - // To do: add instructions. We can't add new string in RC. + instructions={ __( + 'Footnotes found in blocks within this document will be displayed here.' + ) } /> ); From 185c7b34f4377320376ba0939b3b5f1f8f4a83f5 Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 25 Jul 2023 15:16:56 +0100 Subject: [PATCH 4/6] Format: disable if block is not registered --- packages/block-library/src/footnotes/format.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/footnotes/format.js b/packages/block-library/src/footnotes/format.js index df1cfa2e5f289..2df69fcaeab07 100644 --- a/packages/block-library/src/footnotes/format.js +++ b/packages/block-library/src/footnotes/format.js @@ -14,7 +14,7 @@ import { store as blockEditorStore, } from '@wordpress/block-editor'; import { useSelect, useDispatch, useRegistry } from '@wordpress/data'; -import { createBlock } from '@wordpress/blocks'; +import { createBlock, store as blocksStore } from '@wordpress/blocks'; /** * Internal dependencies @@ -44,9 +44,16 @@ export const format = { getBlockName, getBlocks, } = useSelect( blockEditorStore ); + const footnotesBlockType = useSelect( ( select ) => + select( blocksStore ).getBlockType( name ) + ); const { selectionChange, insertBlock } = useDispatch( blockEditorStore ); + if ( ! footnotesBlockType ) { + return null; + } + if ( postType !== 'post' && postType !== 'page' ) { return null; } From 3528458aee3bec2a3acc9b48f837d1610751a4d0 Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 25 Jul 2023 16:03:36 +0100 Subject: [PATCH 5/6] Lock usesContext api --- .../block-editor/src/components/rich-text/format-edit.js | 9 ++++++++- packages/block-editor/src/private-apis.js | 2 ++ packages/block-library/src/footnotes/format.js | 6 +++++- 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/format-edit.js b/packages/block-editor/src/components/rich-text/format-edit.js index 388d9ef2ca721..60511339a45e3 100644 --- a/packages/block-editor/src/components/rich-text/format-edit.js +++ b/packages/block-editor/src/components/rich-text/format-edit.js @@ -11,8 +11,15 @@ import BlockContext from '../block-context'; const DEFAULT_BLOCK_CONTEXT = {}; +// eslint-disable-next-line no-restricted-syntax +export const usesContextKey = 'usesContext' + Math.random(); + function Edit( { onChange, onFocus, value, forwardedRef, settings } ) { - const { name, edit: EditFunction, usesContext } = settings; + const { + name, + edit: EditFunction, + [ usesContextKey ]: usesContext, + } = settings; const blockContext = useContext( BlockContext ); diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js index 20aeaa2a79040..e4bdb5d37b16b 100644 --- a/packages/block-editor/src/private-apis.js +++ b/packages/block-editor/src/private-apis.js @@ -23,6 +23,7 @@ import { default as ReusableBlocksRenameHint, useReusableBlocksRenameHint, } from './components/inserter/reusable-block-rename-hint'; +import { usesContextKey } from './components/rich-text/format-edit'; /** * Private @wordpress/block-editor APIs. @@ -49,4 +50,5 @@ lock( privateApis, { ResolutionTool, ReusableBlocksRenameHint, useReusableBlocksRenameHint, + usesContextKey, } ); diff --git a/packages/block-library/src/footnotes/format.js b/packages/block-library/src/footnotes/format.js index 2df69fcaeab07..2086005a50993 100644 --- a/packages/block-library/src/footnotes/format.js +++ b/packages/block-library/src/footnotes/format.js @@ -12,6 +12,7 @@ import { insertObject } from '@wordpress/rich-text'; import { RichTextToolbarButton, store as blockEditorStore, + privateApis, } from '@wordpress/block-editor'; import { useSelect, useDispatch, useRegistry } from '@wordpress/data'; import { createBlock, store as blocksStore } from '@wordpress/blocks'; @@ -20,6 +21,9 @@ import { createBlock, store as blocksStore } from '@wordpress/blocks'; * Internal dependencies */ import { name } from './block.json'; +import { unlock } from '../lock-unlock'; + +const { usesContextKey } = unlock( privateApis ); export const formatName = 'core/footnote'; export const format = { @@ -30,7 +34,7 @@ export const format = { 'data-fn': 'data-fn', }, contentEditable: false, - usesContext: [ 'postType' ], + [ usesContextKey ]: [ 'postType' ], edit: function Edit( { value, onChange, From 75330ff113e6fe53fd6750acd2f19fa0a33ce4bf Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 25 Jul 2023 16:36:58 +0100 Subject: [PATCH 6/6] Use Symbol instead of Math.random --- packages/block-editor/src/components/rich-text/format-edit.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/rich-text/format-edit.js b/packages/block-editor/src/components/rich-text/format-edit.js index 60511339a45e3..a70b9f8f77881 100644 --- a/packages/block-editor/src/components/rich-text/format-edit.js +++ b/packages/block-editor/src/components/rich-text/format-edit.js @@ -11,8 +11,7 @@ import BlockContext from '../block-context'; const DEFAULT_BLOCK_CONTEXT = {}; -// eslint-disable-next-line no-restricted-syntax -export const usesContextKey = 'usesContext' + Math.random(); +export const usesContextKey = Symbol( 'usesContext' ); function Edit( { onChange, onFocus, value, forwardedRef, settings } ) { const {