Skip to content

Block fields: Add object type support for media and link controls #74435

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

Draft
talldan wants to merge 6 commits into
base: add/field-type-object
Choose a base branch
from
Draft

Block fields: Add object type support for media and link controls #74435

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
31133ae
Update block fields to support object type. Update image block fields…
talldan Jan 8, 2026
9c8adbb
Switch to `Edit` property for block fields, treating type as a primit…
talldan Jan 8, 2026
f9ef37b
Replace mapping with properties
talldan Jan 8, 2026
32c1ad1
Fix allowedTypes and multiple for media field
talldan Jan 8, 2026
5f3bd20
Fix featured image support and other references to mapping
talldan Jan 8, 2026
cfb0fba
Update block fields for group implementation
talldan Jan 9, 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
Prev Previous commit
Update block fields for group implementation
  • Loading branch information
@talldan
talldan committed Jan 9, 2026
commit cfb0fba8e3a9bd302d0587fc8b6f043727359963
72 changes: 36 additions & 36 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 @@ -93,42 +93,42 @@ function BlockFields( { clientId, blockType, attributes, setAttributes } ) {
config: { ...fieldDef.args, defaultValues },
hideLabelFromVision: fieldDef.id === 'content',
// getValue and setValue handle the mapping to block attributes
getValue: ( { item } ) => {
// When a field is an object, flatten all the properties to the root
// of the block attributes.
if ( fieldDef.type === 'object' && fieldDef.properties ) {
const mappedValue = {};

// Convert to field keys.
Object.keys( fieldDef.properties ).forEach( ( key ) => {
const attributeKey =
fieldDef.properties[ key ].id ?? key;
if ( item[ attributeKey ] ) {
mappedValue[ key ] = item[ attributeKey ];
}
} );
return mappedValue;
}
return item[ fieldDef.id ];
},
setValue: ( { value } ) => {
// When a field is an object, flatten all the properties to the root
// of the block attributes.
if ( fieldDef.type === 'object' && fieldDef.properties ) {
const mappedValue = {};

// Convert to attribute keys.
Object.keys( fieldDef.properties ).forEach( ( key ) => {
if ( value[ key ] ) {
const attributeKey =
fieldDef.properties[ key ].id ?? key;
mappedValue[ attributeKey ] = value[ key ];
}
} );
return mappedValue;
}
return { [ fieldDef.id ]: value };
},
// getValue: ( { item } ) => {
// // When a field is an object, flatten all the properties to the root
// // of the block attributes.
// if ( fieldDef.type === 'object' && fieldDef.properties ) {
// const mappedValue = {};

// // Convert to field keys.
// Object.keys( fieldDef.properties ).forEach( ( key ) => {
// const attributeKey =
// fieldDef.properties[ key ].id ?? key;
// if ( item[ attributeKey ] ) {
// mappedValue[ key ] = item[ attributeKey ];
// }
// } );
// return mappedValue;
// }
// return item[ fieldDef.id ];
// },
// setValue: ( { value } ) => {
// // When a field is an object, flatten all the properties to the root
// // of the block attributes.
// if ( fieldDef.type === 'object' && fieldDef.properties ) {
// const mappedValue = {};

// // Convert to attribute keys.
// Object.keys( fieldDef.properties ).forEach( ( key ) => {
// if ( value[ key ] ) {
// const attributeKey =
// fieldDef.properties[ key ].id ?? key;
// mappedValue[ attributeKey ] = value[ key ];
// }
// } );
// return mappedValue;
// }
// return { [ fieldDef.id ]: value };
// },
};

// Only add custom Edit component if one exists for this type
Expand Down
19 changes: 5 additions & 14 deletions packages/block-editor/src/hooks/block-fields/link/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { prependHTTP } from '@wordpress/url';
*/
import LinkControl from '../../../components/link-control';
import { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';
import { getValue, setValue } from '../utils';

export const NEW_TAB_REL = 'noreferrer noopener';
export const NEW_TAB_TARGET = '_blank';
Expand Down Expand Up @@ -67,13 +68,13 @@ export function getUpdatedLinkAttributes( {
};
}

export default function Link( { data, field, onChange, config = {} } ) {
export default function Link( { data, onChange, config = {} } ) {
const [ isLinkControlOpen, setIsLinkControlOpen ] = useState( false );
const { popoverProps } = useInspectorPopoverPlacement( {
isControl: true,
} );
const { fieldDef } = config;
const value = field.getValue( { item: data } );
const value = getValue( data, fieldDef );
const url = value?.url;
const rel = value?.rel || '';
const target = value?.linkTarget;
Expand Down Expand Up @@ -152,12 +153,7 @@ export default function Link( { data, field, onChange, config = {} } ) {
);
}

onChange(
field.setValue( {
item: data,
value: newValue,
} )
);
onChange( setValue( newValue, fieldDef ) );
} }
onRemove={ () => {
const removeValue = {};
Expand All @@ -170,12 +166,7 @@ export default function Link( { data, field, onChange, config = {} } ) {
);
}

onChange(
field.setValue( {
item: data,
value: removeValue,
} )
);
onChange( setValue( removeValue, fieldDef ) );
} }
/>
</Popover>
Expand Down
33 changes: 15 additions & 18 deletions packages/block-editor/src/hooks/block-fields/media/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import MediaUploadCheck from '../../../components/media-upload/check';
import { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';
import { getMediaSelectKey } from '../../../store/private-keys';
import { store as blockEditorStore } from '../../../store';
import { getValue, setValue } from '../utils';

function MediaThumbnail( { data, field, attachment } ) {
const config = field.config || {};
Expand Down Expand Up @@ -50,7 +51,7 @@ function MediaThumbnail( { data, field, attachment } ) {
}

if ( allowedTypes.length === 1 ) {
const value = field.getValue( { item: data } );
const value = getValue( data, config.fieldDef );
const url = value?.url;

if ( url ) {
Expand Down Expand Up @@ -84,14 +85,15 @@ export default function Media( { data, field, onChange, config = {} } ) {
const { popoverProps } = useInspectorPopoverPlacement( {
isControl: true,
} );
const value = field.getValue( { item: data } );
const { fieldDef } = config;
const { allowedTypes = [], multiple = false } = fieldDef.args || {};

// Check if featured image is supported by checking if it's in the mapping
const hasFeaturedImageSupport =
fieldDef?.properties && 'featuredImage' in fieldDef.properties;

const value = getValue( data, fieldDef );

const id = value?.id;
const url = value?.url;

Expand Down Expand Up @@ -157,20 +159,20 @@ export default function Media( { data, field, onChange, config = {} } ) {
}

// Merge with existing value to preserve other field properties
onChange(
field.setValue( {
item: data,
value: resetValue,
} )
);
onChange( setValue( resetValue, fieldDef ) );
} }
{ ...( hasFeaturedImageSupport && {
useFeaturedImage: !! value?.featuredImage,
useFeaturedImage: !! data?.featuredImage,
onToggleFeaturedImage: () => {
// TODO - this should unset id, src, etc.
onChange( {
featuredImage: ! value?.featuredImage,
} );
onChange(
setValue(
{
featuredImage: ! data?.featuredImage,
},
fieldDef
)
);
},
} ) }
onSelect={ ( selectedMedia ) => {
Expand All @@ -196,12 +198,7 @@ export default function Media( { data, field, onChange, config = {} } ) {
}

// Merge with existing value to preserve other field properties
onChange(
field.setValue( {
item: data,
value: newValue,
} )
);
onChange( setValue( newValue, fieldDef ) );
}
} }
renderToggle={ ( buttonProps ) => (
Expand Down
37 changes: 37 additions & 0 deletions packages/block-editor/src/hooks/block-fields/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
export function getValue( data, fieldDef ) {
if ( ! fieldDef.properties ) {
return data;
}

// When a field is an object, flatten all the properties to the root
// of the block attributes.
const mappedValue = {};

// Convert to field keys.
Object.keys( fieldDef.properties ).forEach( ( key ) => {
const attributeKey = fieldDef.properties[ key ].id ?? key;
if ( data[ attributeKey ] ) {
mappedValue[ key ] = data[ attributeKey ];
}
} );
return mappedValue;
}

export function setValue( value, fieldDef ) {
if ( ! fieldDef.properties ) {
return value;
}

// When a field is an object, flatten all the properties to the root
// of the block attributes.
const mappedValue = {};

// Convert to attribute keys.
Object.keys( fieldDef.properties ).forEach( ( key ) => {
if ( value[ key ] ) {
const attributeKey = fieldDef.properties[ key ].id ?? key;
mappedValue[ attributeKey ] = value[ key ];
}
} );
return mappedValue;
}
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 @@ -42,7 +42,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
id: 'audio',
label: __( 'Audio' ),
Edit: 'media',
type: 'object',
type: 'group',
properties: {
id: {
id: 'id',
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 @@ -62,7 +62,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
id: 'link',
label: __( 'Link' ),
Edit: 'link',
type: 'object',
type: 'group',
properties: {
url: {
id: 'url',
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/cover/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
id: 'background',
label: __( 'Background' ),
Edit: 'media',
type: 'object',
type: 'group',
properties: {
media_type: {
id: 'backgroundType',
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 @@ -42,7 +42,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
id: 'file',
label: __( 'File' ),
Edit: 'media',
type: 'object',
type: 'group',
properties: {
id: {
id: 'id',
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
id: 'image',
label: __( 'Image' ),
Edit: 'media',
type: 'object',
type: 'group',
properties: {
id: {
id: 'id',
Expand Down Expand Up @@ -104,7 +104,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
id: 'link',
label: __( 'Link' ),
Edit: 'link',
type: 'object',
type: 'group',
properties: {
url: {
id: 'href',
Expand Down
4 changes: 2 additions & 2 deletions 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 @@ -60,7 +60,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
id: 'media',
label: __( 'Media' ),
Edit: 'media',
type: 'object',
type: 'group',
properties: {
id: {
id: 'mediaId',
Expand Down Expand Up @@ -92,7 +92,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
id: 'link',
label: __( 'Link' ),
Edit: 'link',
type: 'object',
type: 'group',
properties: {
url: {
id: 'href',
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 @@ -105,7 +105,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
id: 'link',
label: __( 'Link' ),
Edit: 'link',
type: 'object',
type: 'group',
properties: {
href: {
id: 'url',
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 @@ -64,7 +64,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
id: 'link',
label: __( 'Link' ),
Edit: 'link',
type: 'object',
type: 'group',
properties: {
href: {
id: 'url',
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 @@ -32,7 +32,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
id: 'link',
label: __( 'Link' ),
Edit: 'link',
type: 'object',
type: 'group',
properties: {
href: {
id: 'url',
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 @@ -43,7 +43,7 @@ if ( window.__experimentalContentOnlyInspectorFields ) {
id: 'video',
label: __( 'Video' ),
Edit: 'media',
type: 'object',
type: 'group',
properties: {
id: {
id: 'id',
Expand Down
Loading