diff --git a/packages/block-editor/src/hooks/block-fields/index.js b/packages/block-editor/src/hooks/block-fields/index.js index b086b483d5573c..809e16463fe0e2 100644 --- a/packages/block-editor/src/hooks/block-fields/index.js +++ b/packages/block-editor/src/hooks/block-fields/index.js @@ -10,6 +10,7 @@ import { import { createHigherOrderComponent } from '@wordpress/compose'; import { DataForm } from '@wordpress/dataviews'; import { useContext, useState, useMemo } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -169,7 +170,25 @@ function denormalizeLinkValue( value, fieldDef ) { return result; } -function BlockFields( { clientId, blockType, attributes, setAttributes } ) { +/** + * Component that renders a DataForm for a single block's attributes + * @param {Object} props + * @param {string} props.clientId The clientId of the block. + * @param {Object} props.blockType The blockType definition. + * @param {Object} props.attributes The block's attribute values. + * @param {Function} props.setAttributes Action to set the block's attributes. + * @param {boolean} props.isCollapsed Whether the DataForm is rendered as 'collapsed' with only the first field + * displayed by default. When collapsed a dropdown is displayed to allow + * displaying additional fields. The block's title is displayed as the title. + * The collapsed mode is often used when multiple BlockForms are shown together. + */ +function BlockFields( { + clientId, + blockType, + attributes, + setAttributes, + isCollapsed = false, +} ) { const blockTitle = useBlockDisplayTitle( { clientId, context: 'list-view', @@ -178,9 +197,19 @@ function BlockFields( { clientId, blockType, attributes, setAttributes } ) { const blockTypeFields = blockType?.[ fieldsKey ]; - const [ form, setForm ] = useState( () => { - return blockType?.[ formKey ]; - } ); + const computedForm = useMemo( () => { + if ( ! isCollapsed ) { + return blockType?.[ formKey ]; + } + + // For a collapsed form only show the first field by default. + return { + ...blockType?.[ formKey ], + fields: [ blockType?.[ formKey ]?.fields?.[ 0 ] ], + }; + }, [ blockType, isCollapsed ] ); + + const [ form, setForm ] = useState( computedForm ); // Build DataForm fields with proper structure const dataFormFields = useMemo( () => { @@ -310,21 +339,29 @@ function BlockFields( { clientId, blockType, attributes, setAttributes } ) {
- - - { blockTitle } - - + { isCollapsed && ( + <> + +

+ + { blockTitle } + +

+ + + ) } + { ! isCollapsed && ( +

+ { __( 'Content' ) } +

+ ) }
) diff --git a/packages/block-editor/src/hooks/block-fields/styles.scss b/packages/block-editor/src/hooks/block-fields/styles.scss index e4494b67261bc7..83b08d0e881b8d 100644 --- a/packages/block-editor/src/hooks/block-fields/styles.scss +++ b/packages/block-editor/src/hooks/block-fields/styles.scss @@ -30,4 +30,6 @@ .block-editor-block-fields__header-title { flex: 1; + // Override the default margin on a h2 element. + margin: 0 !important; } diff --git a/packages/block-library/src/audio/index.js b/packages/block-library/src/audio/index.js index d3bb62a3485884..66c7062692cffa 100644 --- a/packages/block-library/src/audio/index.js +++ b/packages/block-library/src/audio/index.js @@ -58,7 +58,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) { }, ]; settings[ formKey ] = { - fields: [ 'audio' ], + fields: [ 'audio', 'caption' ], }; } diff --git a/packages/block-library/src/button/index.js b/packages/block-library/src/button/index.js index 846808023c9248..4bdbde757bb6fb 100644 --- a/packages/block-library/src/button/index.js +++ b/packages/block-library/src/button/index.js @@ -69,7 +69,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) { }, ]; settings[ formKey ] = { - fields: [ 'text' ], + fields: [ 'text', 'link' ], }; } diff --git a/packages/block-library/src/file/index.js b/packages/block-library/src/file/index.js index 4257495f0c775f..efe0ae979e3ce9 100644 --- a/packages/block-library/src/file/index.js +++ b/packages/block-library/src/file/index.js @@ -63,7 +63,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) { }, ]; settings[ formKey ] = { - fields: [ 'file' ], + fields: [ 'file', 'fileName', 'downloadButtonText' ], }; } diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js index fc65703a23c1f7..e8ee1e3404d7d8 100644 --- a/packages/block-library/src/image/index.js +++ b/packages/block-library/src/image/index.js @@ -106,7 +106,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) { }, ]; settings[ formKey ] = { - fields: [ 'image' ], + fields: [ 'image', 'link', 'caption', 'alt' ], }; } diff --git a/packages/block-library/src/media-text/index.js b/packages/block-library/src/media-text/index.js index 1de8b84e64f026..d50e6eaaceb1e6 100644 --- a/packages/block-library/src/media-text/index.js +++ b/packages/block-library/src/media-text/index.js @@ -83,7 +83,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) { }, ]; settings[ formKey ] = { - fields: [ 'media' ], + fields: [ 'media', 'link' ], }; } diff --git a/packages/block-library/src/navigation-link/index.js b/packages/block-library/src/navigation-link/index.js index a232f54299f593..1a36a0a9526fcb 100644 --- a/packages/block-library/src/navigation-link/index.js +++ b/packages/block-library/src/navigation-link/index.js @@ -112,7 +112,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) { }, ]; settings[ formKey ] = { - fields: [ 'label' ], + fields: [ 'label', 'link' ], }; } diff --git a/packages/block-library/src/navigation-submenu/index.js b/packages/block-library/src/navigation-submenu/index.js index 046f959c7223f3..82cf8a6124a3ff 100644 --- a/packages/block-library/src/navigation-submenu/index.js +++ b/packages/block-library/src/navigation-submenu/index.js @@ -71,7 +71,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) { }, ]; settings[ formKey ] = { - fields: [ 'label' ], + fields: [ 'label', 'link' ], }; } diff --git a/packages/block-library/src/pullquote/index.js b/packages/block-library/src/pullquote/index.js index 764946b3fc20a2..bd6bcf7cc3dc99 100644 --- a/packages/block-library/src/pullquote/index.js +++ b/packages/block-library/src/pullquote/index.js @@ -54,7 +54,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) { }, ]; settings[ formKey ] = { - fields: [ 'value' ], + fields: [ 'value', 'citation' ], }; } diff --git a/packages/block-library/src/search/index.js b/packages/block-library/src/search/index.js index 983f1706a21625..265f2bb119d8df 100644 --- a/packages/block-library/src/search/index.js +++ b/packages/block-library/src/search/index.js @@ -50,7 +50,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) { }, ]; settings[ formKey ] = { - fields: [ 'label' ], + fields: [ 'label', 'buttonText', 'placeholder' ], }; } diff --git a/packages/block-library/src/social-link/index.js b/packages/block-library/src/social-link/index.js index 67e98a10b64669..250191d91c7cef 100644 --- a/packages/block-library/src/social-link/index.js +++ b/packages/block-library/src/social-link/index.js @@ -44,7 +44,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) { }, ]; settings[ formKey ] = { - fields: [ 'link' ], + fields: [ 'link', 'label' ], }; } diff --git a/packages/block-library/src/video/index.js b/packages/block-library/src/video/index.js index 3a275c91eaca37..37a1907086d53e 100644 --- a/packages/block-library/src/video/index.js +++ b/packages/block-library/src/video/index.js @@ -61,7 +61,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) { }, ]; settings[ formKey ] = { - fields: [ 'video' ], + fields: [ 'video', 'caption' ], }; }