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' ],
};
}