Skip to content

Block Fields: show all form fields by default #74486

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
talldan merged 6 commits into from
Jan 12, 2026
Merged

Block Fields: show all form fields by default #74486

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
21f68ee
Add all fields to the block fields form by default
talldan Jan 9, 2026
a81afb8
Adjust appearance in patterns, only show first field and use a non-bl…
talldan Jan 9, 2026
883ec6f
Add comment
talldan Jan 9, 2026
ef462a9
Hide dropdown for non-collapsed mode
talldan Jan 12, 2026
f198125
Add doc block comment for BlockFields component
talldan Jan 12, 2026
0b1129e
Fix typo
talldan Jan 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 57 additions & 19 deletions packages/block-editor/src/hooks/block-fields/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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,

@ramonjd ramonjd Jan 12, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apologies if this is obvious, is it worth adding a comment explaining why isCollapsed logic differs between single blocks and patterns?

@talldan talldan Jan 12, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've added a doc block 👍

} ) {
const blockTitle = useBlockDisplayTitle( {
clientId,
context: 'list-view',
Expand All @@ -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( () => {
Expand Down Expand Up @@ -310,21 +339,29 @@ function BlockFields( { clientId, blockType, attributes, setAttributes } ) {
<div className="block-editor-block-fields__container">
<div className="block-editor-block-fields__header">
<HStack spacing={ 1 }>
<BlockIcon
className="block-editor-block-fields__header-icon"
icon={ blockInformation?.icon }
/>
<Truncate
className="block-editor-block-fields__header-title"
numberOfLines={ 1 }
>
{ blockTitle }
</Truncate>
<FieldsDropdownMenu
fields={ dataFormFields }
visibleFields={ form.fields }
onToggleField={ handleToggleField }
/>
{ isCollapsed && (
<>
<BlockIcon
className="block-editor-block-fields__header-icon"
icon={ blockInformation?.icon }
/>
<h2 className="block-editor-block-fields__header-title">
<Truncate numberOfLines={ 1 }>
{ blockTitle }
</Truncate>
</h2>
<FieldsDropdownMenu
fields={ dataFormFields }
visibleFields={ form.fields }
onToggleField={ handleToggleField }
/>
</>
) }
{ ! isCollapsed && (
<h2 className="block-editor-block-fields__header-title">
{ __( 'Content' ) }

@ramonjd ramonjd Jan 12, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a bit left field, but I was just curious: do you think block fields will ever expand to support other attribute types beyond content?

@talldan talldan Jan 12, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, there's an issue (Block Fields: Support attribute groups) for adding this support. I figure we'll cross the bridge of fixing the hard coded label when the support is added 😄

</h2>
) }
</HStack>
</div>
<DataForm
Expand Down Expand Up @@ -371,6 +408,7 @@ const withBlockFields = createHigherOrderComponent(
<BlockFields
{ ...props }
blockType={ blockType }
isCollapsed
/>
</PrivateInspectorControlsFill>
)
Expand Down
2 changes: 2 additions & 0 deletions packages/block-editor/src/hooks/block-fields/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,4 +30,6 @@

.block-editor-block-fields__header-title {
flex: 1;
// Override the default margin on a h2 element.
margin: 0 !important;
}
2 changes: 1 addition & 1 deletion packages/block-library/src/audio/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
},
];
settings[ formKey ] = {
fields: [ 'audio' ],
fields: [ 'audio', 'caption' ],
};
}

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
},
];
settings[ formKey ] = {
fields: [ 'text' ],
fields: [ 'text', 'link' ],
};
}

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/file/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
},
];
settings[ formKey ] = {
fields: [ 'file' ],
fields: [ 'file', 'fileName', 'downloadButtonText' ],
};
}

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
},
];
settings[ formKey ] = {
fields: [ 'image' ],
fields: [ 'image', 'link', 'caption', 'alt' ],
};
}

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/media-text/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
},
];
settings[ formKey ] = {
fields: [ 'media' ],
fields: [ 'media', 'link' ],
};
}

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/navigation-link/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
},
];
settings[ formKey ] = {
fields: [ 'label' ],
fields: [ 'label', 'link' ],
};
}

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/navigation-submenu/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
},
];
settings[ formKey ] = {
fields: [ 'label' ],
fields: [ 'label', 'link' ],
};
}

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/pullquote/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
},
];
settings[ formKey ] = {
fields: [ 'value' ],
fields: [ 'value', 'citation' ],
};
}

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/search/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
},
];
settings[ formKey ] = {
fields: [ 'label' ],
fields: [ 'label', 'buttonText', 'placeholder' ],
};
}

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/social-link/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
},
];
settings[ formKey ] = {
fields: [ 'link' ],
fields: [ 'link', 'label' ],
};
}

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/video/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
},
];
settings[ formKey ] = {
fields: [ 'video' ],
fields: [ 'video', 'caption' ],
};
Comment on lines 63 to 65

@andrewserong andrewserong Jan 12, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a blocker at all, but with this new logic where we're always showing all fields in single selection mode, or otherwise defaulting to only showing the first field by default, is there still a need for settings[ formKey ], or could we inform from settings[ fieldsKey ]. I.e. is there an opportunity to slightly simplify the API by no longer requiring defining a form in the block.json file?

(I don't have a strong opinion on this one, it was just an observation!)

@talldan talldan Jan 12, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I'll keep it for now. There's a chance it might be extended in future, but not sure yet. We'll see how it goes.

}

Expand Down
Loading