diff --git a/packages/block-editor/src/components/content-only-controls/index.js b/packages/block-editor/src/components/content-only-controls/index.js index b78eeed5b1d6a1..b3f1a8d8b675b3 100644 --- a/packages/block-editor/src/components/content-only-controls/index.js +++ b/packages/block-editor/src/components/content-only-controls/index.js @@ -24,7 +24,7 @@ import { store as blockEditorStore } from '../../store'; import BlockIcon from '../block-icon'; import useBlockDisplayTitle from '../block-title/use-block-display-title'; import useBlockDisplayInformation from '../use-block-display-information'; -const { fieldsKey } = unlock( blocksPrivateApis ); +const { fieldsKey, formKey } = unlock( blocksPrivateApis ); import FieldsDropdownMenu from './fields-dropdown-menu'; // controls @@ -197,14 +197,8 @@ function BlockFields( { clientId } ) { const blockTypeFields = blockType?.[ fieldsKey ]; - // Track visible fields - const [ visibleFields, setVisibleFields ] = useState( () => { - // Show fields that have shownByDefault: true by default - return ( - blockTypeFields - ?.filter( ( field ) => field.shownByDefault ) - .map( ( field ) => field.id ) || [] - ); + const [ form, setForm ] = useState( () => { + return blockType?.[ formKey ]; } ); // Build DataForm fields with proper structure @@ -315,22 +309,19 @@ function BlockFields( { clientId } ) { updateBlockAttributes, ] ); - // Build form config showing only visible fields - const form = useMemo( - () => ( { - fields: dataFormFields - .filter( ( field ) => visibleFields.includes( field.id ) ) - .map( ( field ) => field.id ), - } ), - [ dataFormFields, visibleFields ] - ); - const handleToggleField = ( fieldId ) => { - setVisibleFields( ( prev ) => { - if ( prev.includes( fieldId ) ) { - return prev.filter( ( id ) => id !== fieldId ); + setForm( ( prev ) => { + if ( prev.fields?.includes( fieldId ) ) { + return { + ...prev, + fields: prev.fields.filter( ( id ) => id !== fieldId ), + }; } - return [ ...prev, fieldId ]; + + return { + ...prev, + fields: [ ...( prev.fields || [] ), fieldId ], + }; } ); }; @@ -350,7 +341,7 @@ function BlockFields( { clientId } ) { diff --git a/packages/block-library/src/audio/index.js b/packages/block-library/src/audio/index.js index 6f719b60a9675a..669b4448b06f0d 100644 --- a/packages/block-library/src/audio/index.js +++ b/packages/block-library/src/audio/index.js @@ -16,7 +16,7 @@ import save from './save'; import transforms from './transforms'; import { unlock } from '../lock-unlock'; -const { fieldsKey } = unlock( blocksPrivateApis ); +const { fieldsKey, formKey } = unlock( blocksPrivateApis ); const { name } = metadata; @@ -42,7 +42,6 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'audio', label: __( 'Audio' ), type: 'media', - shownByDefault: true, mapping: { id: 'id', url: 'src', @@ -56,9 +55,11 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'caption', label: __( 'Caption' ), type: 'richtext', - shownByDefault: false, }, ]; + settings[ formKey ] = { + fields: [ 'audio' ], + }; } export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/button/index.js b/packages/block-library/src/button/index.js index 0358f6cad36460..3c5f0b9503f5f5 100644 --- a/packages/block-library/src/button/index.js +++ b/packages/block-library/src/button/index.js @@ -15,7 +15,7 @@ import metadata from './block.json'; import save from './save'; import { unlock } from '../lock-unlock'; -const { fieldsKey } = unlock( blocksPrivateApis ); +const { fieldsKey, formKey } = unlock( blocksPrivateApis ); const { name } = metadata; @@ -44,13 +44,11 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'text', label: __( 'Content' ), type: 'richtext', - shownByDefault: true, }, { id: 'link', label: __( 'Link' ), type: 'link', - shownByDefault: false, mapping: { url: 'url', rel: 'rel', @@ -58,6 +56,9 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { }, }, ]; + settings[ formKey ] = { + fields: [ 'text' ], + }; } export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/code/index.js b/packages/block-library/src/code/index.js index 9ab8fea1ba3cfe..44f1d8b06e7ab1 100644 --- a/packages/block-library/src/code/index.js +++ b/packages/block-library/src/code/index.js @@ -15,7 +15,7 @@ import save from './save'; import transforms from './transforms'; import { unlock } from '../lock-unlock'; -const { fieldsKey } = unlock( blocksPrivateApis ); +const { fieldsKey, formKey } = unlock( blocksPrivateApis ); const { name } = metadata; @@ -49,9 +49,11 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'content', label: __( 'Code' ), type: 'richtext', - shownByDefault: true, }, ]; + settings[ formKey ] = { + fields: [ 'content' ], + }; } export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js index 8a7018651f4c5d..1f7c6ac4edbeb9 100644 --- a/packages/block-library/src/cover/index.js +++ b/packages/block-library/src/cover/index.js @@ -17,7 +17,7 @@ import transforms from './transforms'; import variations from './variations'; import { unlock } from '../lock-unlock'; -const { fieldsKey } = unlock( blocksPrivateApis ); +const { fieldsKey, formKey } = unlock( blocksPrivateApis ); const { name } = metadata; @@ -62,7 +62,6 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'background', label: __( 'Background' ), type: 'media', - shownByDefault: true, mapping: { type: 'backgroundType', id: 'id', @@ -78,6 +77,9 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { }, }, ]; + settings[ formKey ] = { + fields: [ 'content' ], + }; } export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/details/index.js b/packages/block-library/src/details/index.js index 9fc72c714543c2..0156fd0c610aee 100644 --- a/packages/block-library/src/details/index.js +++ b/packages/block-library/src/details/index.js @@ -15,7 +15,7 @@ import save from './save'; import transforms from './transforms'; import { unlock } from '../lock-unlock'; -const { fieldsKey } = unlock( blocksPrivateApis ); +const { fieldsKey, formKey } = unlock( blocksPrivateApis ); const { name } = metadata; export { metadata, name }; @@ -71,9 +71,11 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'summary', label: __( 'Summary' ), type: 'richtext', - shownByDefault: true, }, ]; + settings[ formKey ] = { + fields: [ 'summary' ], + }; } export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/file/index.js b/packages/block-library/src/file/index.js index bea2253ca9098a..9acdfa9698a758 100644 --- a/packages/block-library/src/file/index.js +++ b/packages/block-library/src/file/index.js @@ -16,7 +16,7 @@ import save from './save'; import transforms from './transforms'; import { unlock } from '../lock-unlock'; -const { fieldsKey } = unlock( blocksPrivateApis ); +const { fieldsKey, formKey } = unlock( blocksPrivateApis ); const { name } = metadata; @@ -42,7 +42,6 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'file', label: __( 'File' ), type: 'media', - shownByDefault: true, mapping: { id: 'id', url: 'href', @@ -56,15 +55,16 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'fileName', label: __( 'Filename' ), type: 'richtext', - shownByDefault: false, }, { id: 'downloadButtonText', label: __( 'Button Text' ), type: 'richtext', - shownByDefault: false, }, ]; + settings[ formKey ] = { + fields: [ 'file' ], + }; } export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/heading/index.js b/packages/block-library/src/heading/index.js index 3d6cde988ce78e..62b629709fc7d1 100644 --- a/packages/block-library/src/heading/index.js +++ b/packages/block-library/src/heading/index.js @@ -17,7 +17,7 @@ import transforms from './transforms'; import variations from './variations'; import { unlock } from '../lock-unlock'; -const { fieldsKey } = unlock( blocksPrivateApis ); +const { fieldsKey, formKey } = unlock( blocksPrivateApis ); const { name } = metadata; @@ -79,9 +79,11 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'content', label: __( 'Content' ), type: 'richtext', - shownByDefault: true, }, ]; + settings[ formKey ] = { + fields: [ 'content' ], + }; } export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js index 3211746553f9ff..d353b737303c5c 100644 --- a/packages/block-library/src/image/index.js +++ b/packages/block-library/src/image/index.js @@ -16,7 +16,7 @@ import save from './save'; import transforms from './transforms'; import { unlock } from '../lock-unlock'; -const { fieldsKey } = unlock( blocksPrivateApis ); +const { fieldsKey, formKey } = unlock( blocksPrivateApis ); const { name } = metadata; @@ -72,7 +72,6 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'image', label: __( 'Image' ), type: 'media', - shownByDefault: true, mapping: { id: 'id', url: 'url', @@ -88,7 +87,6 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'link', label: __( 'Link' ), type: 'link', - shownByDefault: false, mapping: { url: 'href', rel: 'rel', @@ -100,15 +98,16 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'caption', label: __( 'Caption' ), type: 'richtext', - shownByDefault: false, }, { id: 'alt', label: __( 'Alt text' ), type: 'text', - shownByDefault: false, }, ]; + settings[ formKey ] = { + fields: [ 'image' ], + }; } export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/list-item/index.js b/packages/block-library/src/list-item/index.js index 019ccb0a9f9dd0..d4f460993bcc97 100644 --- a/packages/block-library/src/list-item/index.js +++ b/packages/block-library/src/list-item/index.js @@ -16,7 +16,7 @@ import save from './save'; import transforms from './transforms'; import { unlock } from '../lock-unlock'; -const { fieldsKey } = unlock( blocksPrivateApis ); +const { fieldsKey, formKey } = unlock( blocksPrivateApis ); const { name } = metadata; @@ -42,9 +42,11 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'content', label: __( 'Content' ), type: 'richtext', - shownByDefault: true, }, ]; + settings[ formKey ] = { + fields: [ 'content' ], + }; } export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/media-text/index.js b/packages/block-library/src/media-text/index.js index 7c29c7dea81794..7d647d78d3f1a6 100644 --- a/packages/block-library/src/media-text/index.js +++ b/packages/block-library/src/media-text/index.js @@ -16,7 +16,7 @@ import save from './save'; import transforms from './transforms'; import { unlock } from '../lock-unlock'; -const { fieldsKey } = unlock( blocksPrivateApis ); +const { fieldsKey, formKey } = unlock( blocksPrivateApis ); const { name } = metadata; @@ -60,7 +60,6 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'media', label: __( 'Media' ), type: 'media', - shownByDefault: true, mapping: { id: 'mediaId', type: 'mediaType', @@ -76,7 +75,6 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'link', label: __( 'Link' ), type: 'link', - shownByDefault: false, mapping: { url: 'href', rel: 'rel', @@ -84,6 +82,9 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { }, }, ]; + settings[ formKey ] = { + fields: [ 'media' ], + }; } export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/more/index.js b/packages/block-library/src/more/index.js index 5901dc2b4e462c..08026cea6c1f9c 100644 --- a/packages/block-library/src/more/index.js +++ b/packages/block-library/src/more/index.js @@ -15,7 +15,7 @@ import save from './save'; import transforms from './transforms'; import { unlock } from '../lock-unlock'; -const { fieldsKey } = unlock( blocksPrivateApis ); +const { fieldsKey, formKey } = unlock( blocksPrivateApis ); const { name } = metadata; @@ -46,9 +46,11 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'customText', label: __( 'Content' ), type: 'richtext', - shownByDefault: true, }, ]; + settings[ formKey ] = { + fields: [ 'customText' ], + }; } export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/navigation-link/index.js b/packages/block-library/src/navigation-link/index.js index 89d49d4d05cc02..fb210fb0420845 100644 --- a/packages/block-library/src/navigation-link/index.js +++ b/packages/block-library/src/navigation-link/index.js @@ -18,7 +18,7 @@ import { enhanceNavigationLinkVariations } from './hooks'; import transforms from './transforms'; import { unlock } from '../lock-unlock'; -const { fieldsKey } = unlock( blocksPrivateApis ); +const { fieldsKey, formKey } = unlock( blocksPrivateApis ); const { name } = metadata; @@ -99,13 +99,11 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'label', label: __( 'Label' ), type: 'richtext', - shownByDefault: true, }, { id: 'link', label: __( 'Link' ), type: 'link', - shownByDefault: false, mapping: { href: 'url', rel: 'rel', @@ -113,6 +111,9 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { }, }, ]; + settings[ formKey ] = { + fields: [ 'label' ], + }; } export const init = () => { diff --git a/packages/block-library/src/navigation-submenu/index.js b/packages/block-library/src/navigation-submenu/index.js index d6762303d5037a..79c4597954cd7e 100644 --- a/packages/block-library/src/navigation-submenu/index.js +++ b/packages/block-library/src/navigation-submenu/index.js @@ -15,7 +15,7 @@ import save from './save'; import transforms from './transforms'; import { unlock } from '../lock-unlock'; -const { fieldsKey } = unlock( blocksPrivateApis ); +const { fieldsKey, formKey } = unlock( blocksPrivateApis ); const { name } = metadata; @@ -58,13 +58,11 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'label', label: __( 'Label' ), type: 'richtext', - shownByDefault: true, }, { id: 'link', label: __( 'Link' ), type: 'link', - shownByDefault: false, mapping: { href: 'url', rel: 'rel', @@ -72,6 +70,9 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { }, }, ]; + settings[ formKey ] = { + fields: [ 'label' ], + }; } export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/paragraph/index.js b/packages/block-library/src/paragraph/index.js index ba14f994f5194a..b145cd1674293a 100644 --- a/packages/block-library/src/paragraph/index.js +++ b/packages/block-library/src/paragraph/index.js @@ -17,7 +17,7 @@ import transforms from './transforms'; import variations from './variations'; import { unlock } from '../lock-unlock'; -const { fieldsKey } = unlock( blocksPrivateApis ); +const { fieldsKey, formKey } = unlock( blocksPrivateApis ); const { name } = metadata; @@ -68,9 +68,11 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'content', label: __( 'Content' ), type: 'richtext', - shownByDefault: true, }, ]; + settings[ formKey ] = { + fields: [ 'content' ], + }; } export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/preformatted/index.js b/packages/block-library/src/preformatted/index.js index 5860d00b57ae21..08031cc28a225c 100644 --- a/packages/block-library/src/preformatted/index.js +++ b/packages/block-library/src/preformatted/index.js @@ -15,7 +15,7 @@ import save from './save'; import transforms from './transforms'; import { unlock } from '../lock-unlock'; -const { fieldsKey } = unlock( blocksPrivateApis ); +const { fieldsKey, formKey } = unlock( blocksPrivateApis ); const { name } = metadata; @@ -49,9 +49,11 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'content', label: __( 'Content' ), type: 'richtext', - shownByDefault: true, }, ]; + settings[ formKey ] = { + fields: [ 'content' ], + }; } export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/pullquote/index.js b/packages/block-library/src/pullquote/index.js index 2bcb196b0220bd..d5e86e73ee14dc 100644 --- a/packages/block-library/src/pullquote/index.js +++ b/packages/block-library/src/pullquote/index.js @@ -16,7 +16,7 @@ import save from './save'; import transforms from './transforms'; import { unlock } from '../lock-unlock'; -const { fieldsKey } = unlock( blocksPrivateApis ); +const { fieldsKey, formKey } = unlock( blocksPrivateApis ); const { name } = metadata; @@ -46,15 +46,16 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'value', label: __( 'Content' ), type: 'richtext', - shownByDefault: true, }, { id: 'citation', label: __( 'Citation' ), type: 'richtext', - shownByDefault: false, }, ]; + settings[ formKey ] = { + fields: [ 'value' ], + }; } export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/search/index.js b/packages/block-library/src/search/index.js index 1dde7dd8703fc5..0e76164d3ef417 100644 --- a/packages/block-library/src/search/index.js +++ b/packages/block-library/src/search/index.js @@ -14,7 +14,7 @@ import edit from './edit'; import variations from './variations'; import { unlock } from '../lock-unlock'; -const { fieldsKey } = unlock( blocksPrivateApis ); +const { fieldsKey, formKey } = unlock( blocksPrivateApis ); const { name } = metadata; @@ -42,15 +42,16 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'buttonText', label: __( 'Button text' ), type: 'richtext', - shownByDefault: false, }, { id: 'placeholder', label: __( 'Placeholder' ), type: 'richtext', - shownByDefault: false, }, ]; + settings[ formKey ] = { + fields: [ 'label' ], + }; } export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/social-link/index.js b/packages/block-library/src/social-link/index.js index 11da16da0a0d25..65527d71ca8ef2 100644 --- a/packages/block-library/src/social-link/index.js +++ b/packages/block-library/src/social-link/index.js @@ -14,7 +14,7 @@ import metadata from './block.json'; import variations from './variations'; import { unlock } from '../lock-unlock'; -const { fieldsKey } = unlock( blocksPrivateApis ); +const { fieldsKey, formKey } = unlock( blocksPrivateApis ); const { name } = metadata; @@ -32,7 +32,6 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'link', label: __( 'Link' ), type: 'link', - shownByDefault: true, mapping: { href: 'url', rel: 'rel', @@ -42,9 +41,11 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'label', label: __( 'Label' ), type: 'richtext', - shownByDefault: false, }, ]; + settings[ formKey ] = { + fields: [ 'link' ], + }; } export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/verse/index.js b/packages/block-library/src/verse/index.js index 5288cf821413b3..52c65fe1a6d6f5 100644 --- a/packages/block-library/src/verse/index.js +++ b/packages/block-library/src/verse/index.js @@ -16,7 +16,7 @@ import save from './save'; import transforms from './transforms'; import { unlock } from '../lock-unlock'; -const { fieldsKey } = unlock( blocksPrivateApis ); +const { fieldsKey, formKey } = unlock( blocksPrivateApis ); const { name } = metadata; @@ -51,9 +51,11 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'content', label: __( 'Content' ), type: 'richtext', - shownByDefault: true, }, ]; + settings[ formKey ] = { + fields: [ 'content' ], + }; } export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/video/index.js b/packages/block-library/src/video/index.js index a43900a7737c47..942be1be5a8808 100644 --- a/packages/block-library/src/video/index.js +++ b/packages/block-library/src/video/index.js @@ -16,7 +16,7 @@ import save from './save'; import transforms from './transforms'; import { unlock } from '../lock-unlock'; -const { fieldsKey } = unlock( blocksPrivateApis ); +const { fieldsKey, formKey } = unlock( blocksPrivateApis ); const { name } = metadata; @@ -43,7 +43,6 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'video', label: __( 'Video' ), type: 'media', - shownByDefault: true, mapping: { id: 'id', url: 'src', @@ -59,9 +58,11 @@ if ( window.__experimentalContentOnlyPatternInsertion ) { id: 'caption', label: __( 'Caption' ), type: 'richtext', - shownByDefault: false, }, ]; + settings[ formKey ] = { + fields: [ 'video' ], + }; } export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/blocks/src/api/index.js b/packages/blocks/src/api/index.js index d1655993798b51..88ebf0036ced32 100644 --- a/packages/blocks/src/api/index.js +++ b/packages/blocks/src/api/index.js @@ -176,8 +176,10 @@ export { __EXPERIMENTAL_PATHS_WITH_OVERRIDE, } from './constants'; -// Allows blocks to declare a `settings.fields` property. +// Allows blocks to declare private keys (fields form) +// that we can use to generate UI controls for them via DataForm. const fieldsKey = Symbol( 'fields' ); +const formKey = Symbol( 'form' ); export const privateApis = {}; -lock( privateApis, { isContentBlock, fieldsKey } ); +lock( privateApis, { isContentBlock, fieldsKey, formKey } );