Skip to content

Try an explicit contentRole for containers where blocks can be added in contentOnly mode #75812

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

Open
tellthemachines wants to merge 1 commit into
base: trunk
Choose a base branch
from
+26 −11
Open

Try an explicit contentRole for containers where blocks can be added in contentOnly mode #75812

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 3 additions & 3 deletions docs/reference-guides/core-blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -389,7 +389,7 @@ Display multiple images in a rich gallery. ([Source](https://github.com/WordPres
- **Name:** core/gallery
- **Category:** media
- **Allowed Blocks:** core/image
- **Supports:** align, anchor, color (background, gradients, ~~text~~), interactivity (clientNavigation), layout (default, ~~allowEditing~~, ~~allowInheriting~~, ~~allowSwitching~~), listView, spacing (blockGap, margin, padding), units (em, px, rem, vh, vw), ~~html~~
- **Supports:** align, anchor, color (background, gradients, ~~text~~), contentRole, interactivity (clientNavigation), layout (default, ~~allowEditing~~, ~~allowInheriting~~, ~~allowSwitching~~), listView, spacing (blockGap, margin, padding), units (em, px, rem, vh, vw), ~~html~~
- **Attributes:** allowResize, aspectRatio, caption, columns, fixedHeight, ids, imageCrop, images, linkTarget, linkTo, navigationButtonType, randomOrder, shortCodeTransforms, sizeSlug

## Group
Expand Down Expand Up @@ -472,7 +472,7 @@ An organized collection of items displayed in a specific order. ([Source](https:
- **Name:** core/list
- **Category:** text
- **Allowed Blocks:** core/list-item
- **Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), interactivity (clientNavigation), listView, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), contentRole, interactivity (clientNavigation), listView, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** ordered, placeholder, reversed, start, type, values

## List Item
Expand Down Expand Up @@ -568,7 +568,7 @@ Add a submenu to your navigation. ([Source](https://github.com/WordPress/gutenbe
- **Name:** core/navigation-submenu
- **Category:** design
- **Parent:** core/navigation
- **Supports:** anchor, interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
- **Supports:** anchor, contentRole, interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
- **Attributes:** description, id, isTopLevelItem, kind, label, opensInNewTab, rel, title, type, url

## Page Break
Expand Down
8 changes: 4 additions & 4 deletions packages/block-editor/src/store/private-selectors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ import {
} from './private-keys';
import { BLOCK_VISIBILITY_VIEWPORTS } from '../components/block-visibility/constants';

const { isContentBlock } = unlock( blocksPrivateApis );
const { isContentBlock, isContentRoleBlock } = unlock( blocksPrivateApis );

export { getBlockSettings } from './get-block-settings';

Expand Down Expand Up @@ -104,12 +104,12 @@ export function isContainerInsertableToInContentOnlyMode(
) {
const isBlockContentBlock = isContentBlock( blockName );
const rootBlockName = getBlockName( state, rootClientId );
const isContainerContentBlock = isContentBlock( rootBlockName );
const isContainerContentBlock = isContentRoleBlock( rootBlockName );
const isRootBlockMain = getSectionRootClientId( state ) === rootClientId;

// In contentOnly mode, containers shouldn't be inserted into unless:
// 1. they are a section root;
Copy link
Member

@ramonjd ramonjd Feb 25, 2026

Choose a reason for hiding this comment

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

Is this still the case? e.g., The container is the section root, or...

// 2. they are a content block and the block to be inserted is also content.
// 1. they support contentRole.
// 2. the block to be inserted supports contentRole or contains content attributes.
return (
isRootBlockMain || ( isContainerContentBlock && isBlockContentBlock )
);
Expand Down
3 changes: 2 additions & 1 deletion packages/block-library/src/gallery/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,8 @@
"interactivity": {
"clientNavigation": true
},
"listView": true
"listView": true,
"contentRole": true
Copy link
Member

@ramonjd ramonjd Feb 25, 2026

Choose a reason for hiding this comment

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

Trying to use my meat brain to test today 😄

So I understand, adding the contentRole` prop preserves current behavior for these blocks?

I mean, is it saying "this block’s inner area is a content container", and therefore lets users insert allowed blocks (Image) into that area in contentOnly mode?

Copy link
Contributor Author

@tellthemachines tellthemachines Feb 25, 2026

Choose a reason for hiding this comment

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

Yes!

},
"editorStyle": "wp-block-gallery-editor",
"style": "wp-block-gallery"
Expand Down
3 changes: 2 additions & 1 deletion packages/block-library/src/list/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,8 @@
"interactivity": {
"clientNavigation": true
},
"listView": true
"listView": true,
"contentRole": true
},
"selectors": {
"border": ".wp-block-list:not(.wp-block-list .wp-block-list)"
Expand Down
3 changes: 2 additions & 1 deletion packages/block-library/src/navigation-submenu/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,8 @@
},
"interactivity": {
"clientNavigation": true
}
},
"contentRole": true
},
"editorStyle": "wp-block-navigation-submenu-editor",
"style": "wp-block-navigation-submenu"
Expand Down
3 changes: 2 additions & 1 deletion packages/blocks/src/api/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Internal dependencies
*/
import { lock } from '../lock-unlock';
import { isContentBlock } from './utils';
import { isContentBlock, isContentRoleBlock } from './utils';

// The blocktype is the most important concept within the block API. It defines
// all aspects of the block configuration and its interfaces, including `edit`
Expand Down Expand Up @@ -186,6 +186,7 @@ import { parseRawBlock as _parseRawBlock } from './parser';
export const privateApis = {};
lock( privateApis, {
isContentBlock,
isContentRoleBlock,
fieldsKey,
formKey,
parseRawBlock: _parseRawBlock,
Expand Down
11 changes: 11 additions & 0 deletions packages/blocks/src/api/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -409,6 +409,17 @@ export const __experimentalGetBlockAttributesNamesByRole = ( ...args ) => {
return getBlockAttributesNamesByRole( ...args );
};

/**
* Checks if a block supports the contentRole feature.
*
* @param {string} name The name of the block to check.
* @return {boolean} Whether the block supports contentRole.
*/
export function isContentRoleBlock( name ) {
const blockType = getBlockType( name );
return !! blockType?.supports?.contentRole;
}

/**
* Checks if a block is a content block by examining its attributes.
* A block is considered a content block if it has at least one attribute
Expand Down
Loading