Skip to content

ContentOnlyControls: Refactor to use DataForm #73374

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
andrewserong merged 12 commits into from
Nov 20, 2025
Merged

ContentOnlyControls: Refactor to use DataForm #73374

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
90fd2a2
ContentOnlyControls: Switch to using DataForm
andrewserong Nov 18, 2025
e8c1ca4
Fix media with Cover, Media and Text, and Image blocks
andrewserong Nov 18, 2025
c13fd67
Toggle off featured image when doing other things
andrewserong Nov 18, 2025
db2641a
Fix linting issue... hopefully
andrewserong Nov 19, 2025
1d591a1
Fix the mapping
andrewserong Nov 19, 2025
e32127c
Update dropdown label
andrewserong Nov 19, 2025
a14a4aa
Try making things a tiny bit more consistent
andrewserong Nov 19, 2025
61164f9
Revert tiny clientId change
andrewserong Nov 19, 2025
468eadc
Tidy up properties
andrewserong Nov 20, 2025
0ee4dd4
Try to make normalize a little more consistent with the denormalize f…
andrewserong Nov 20, 2025
2a822b2
Ensure there's padding for the bottom field
andrewserong Nov 20, 2025
7924282
Update popover positioning for the dropdown menus
andrewserong Nov 20, 2025
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
Prev Previous commit
Next Next commit
Try making things a tiny bit more consistent
  • Loading branch information
@andrewserong
andrewserong committed Nov 19, 2025
commit a14a4aac76212f4a94a267e64465874676652ca4
33 changes: 28 additions & 5 deletions packages/block-editor/src/components/content-only-controls/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,27 @@ const CONTROLS = {
link: Link,
};

/**
* Creates a configured control component that wraps a custom control
* and passes configuration as props.
*
* @param {Object} config - The control configuration
* @param {string} config.control - The control type (key in CONTROLS map)
* @return {Function} A wrapped control component
*/
function createConfiguredControl( config ) {
const { control, ...controlConfig } = config;
const ControlComponent = CONTROLS[ control ];
Comment on lines +41 to +51
Copy link
Contributor Author

@andrewserong andrewserong Nov 19, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

This function is effectively a copy of the same one that exists internally within DataForm. The goal here is to try to get these link, media, and richtext components a bit closer to how they might look if they were bundled controls within DataForm. We're not there yet with this PR — the intention here is to just take a step in that direction and to continue to refine in follow-ups.

This function is so that we can bundle configuration alongside using controls like media, link, or richtext.


if ( ! ControlComponent ) {
throw new Error( `Control type "${ control }" not found` );
}

return function ConfiguredControl( props ) {
return <ControlComponent { ...props } config={ controlConfig } />;
};
}

/**
* Normalize a media value to a canonical structure.
* Ensures all expected properties exist, even if not in the mapping.
Expand Down Expand Up @@ -244,11 +265,13 @@ function BlockFields( { clientId } ) {

// Only add custom Edit component if one exists for this type
if ( ControlComponent ) {
field.Edit = ControlComponent;
// Pass clientId and updateBlockAttributes to custom Edit components
field.clientId = clientId;
field.updateBlockAttributes = updateBlockAttributes;
field.fieldDef = fieldDef;
// Use EditConfig pattern: Edit is an object with control type and config props
field.Edit = createConfiguredControl( {
control: fieldDef.type,
clientId,
updateBlockAttributes,
fieldDef,
} );
}

return field;
Expand Down
6 changes: 2 additions & 4 deletions packages/block-editor/src/components/content-only-controls/link/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,14 +67,12 @@ export function getUpdatedLinkAttributes( {
};
}

export default function Link( { data, field } ) {
export default function Link( { data, field, config = {} } ) {
const [ isLinkControlOpen, setIsLinkControlOpen ] = useState( false );
const { popoverProps } = useInspectorPopoverPlacement( {
isControl: true,
} );

// For custom Edit components, we need to call updateBlockAttributes directly
const { clientId, updateBlockAttributes, fieldDef } = field;
const { clientId, updateBlockAttributes, fieldDef } = config;
const updateAttributes = ( newValue ) => {
const mappedChanges = field.setValue( { item: data, value: newValue } );
updateBlockAttributes( clientId, mappedChanges );
Expand Down
9 changes: 3 additions & 6 deletions packages/block-editor/src/components/content-only-controls/media/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,16 +83,13 @@ function MediaThumbnail( { data, field, attachment } ) {
return <Icon icon={ mediaIcon } size={ 24 } />;
}

export default function Media( { data, field } ) {
export default function Media( { data, field, config = {} } ) {
const { popoverProps } = useInspectorPopoverPlacement( {
isControl: true,
} );
const value = field.getValue( { item: data } );
const config = field.config || {};
const { allowedTypes = [], multiple = false } = config;

// For custom Edit components, we need to call updateBlockAttributes directly
const { clientId, updateBlockAttributes, fieldDef } = field;
const { allowedTypes = [], multiple = false } = field.config || {};
const { clientId, updateBlockAttributes, fieldDef } = config;
const updateAttributes = ( newFieldValue ) => {
const mappedChanges = field.setValue( {
item: data,
Expand Down
25 changes: 12 additions & 13 deletions packages/block-editor/src/components/content-only-controls/rich-text/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,12 @@ export default function RichTextControl( {
data,
field,
hideLabelFromVision,
config = {},
} ) {
const registry = useRegistry();
const attrValue = field.getValue( { item: data } );
const config = field.config || {};

// For custom Edit components, we need to call updateBlockAttributes directly
const { clientId, updateBlockAttributes } = field;
const fieldConfig = field.config || {};
const { clientId, updateBlockAttributes } = config;
const updateAttributes = ( html ) => {
const mappedChanges = field.setValue( { item: data, value: html } );
updateBlockAttributes( clientId, mappedChanges );
Expand All @@ -44,8 +43,8 @@ export default function RichTextControl( {
const keyboardShortcuts = useRef( new Set() );

const adjustedAllowedFormats = getAllowedFormats( {
allowedFormats: config?.allowedFormats,
disableFormats: config?.disableFormats,
allowedFormats: fieldConfig?.allowedFormats,
disableFormats: fieldConfig?.disableFormats,
} );

const {
Expand All @@ -58,7 +57,7 @@ export default function RichTextControl( {
clientId: undefined,
identifier: field.id,
allowedFormats: adjustedAllowedFormats,
withoutInteractiveFormatting: config?.withoutInteractiveFormatting,
withoutInteractiveFormatting: fieldConfig?.withoutInteractiveFormatting,
disableNoneEssentialFormatting: true,
} );

Expand Down Expand Up @@ -113,9 +112,9 @@ export default function RichTextControl( {
selectionEnd: selection.end,
onSelectionChange: ( start, end ) => setSelection( { start, end } ),
__unstableIsSelected: isSelected,
preserveWhiteSpace: !! config?.preserveWhiteSpace,
placeholder: config?.placeholder,
__unstableDisableFormats: config?.disableFormats,
preserveWhiteSpace: !! fieldConfig?.preserveWhiteSpace,
placeholder: fieldConfig?.placeholder,
__unstableDisableFormats: fieldConfig?.disableFormats,
__unstableDependencies: dependencies,
__unstableAfterParse: addEditorOnlyFormats,
__unstableBeforeSerialize: removeEditorOnlyFormats,
Expand Down Expand Up @@ -149,7 +148,7 @@ export default function RichTextControl( {
<div
className="block-editor-content-only-controls__rich-text"
role="textbox"
aria-multiline={ ! config?.disableLineBreaks }
aria-multiline={ ! fieldConfig?.disableLineBreaks }
ref={ useMergeRefs( [
richTextRef,
useEventListeners( {
Expand All @@ -159,11 +158,11 @@ export default function RichTextControl( {
formatTypes,
selectionChange: setSelection,
isSelected,
disableFormats: config?.disableFormats,
disableFormats: fieldConfig?.disableFormats,
value,
tagName: 'div',
removeEditorOnlyFormats,
disableLineBreaks: config?.disableLineBreaks,
disableLineBreaks: fieldConfig?.disableLineBreaks,
keyboardShortcuts,
inputEvents,
} ),
Expand Down
Loading