Audit blocks for contentOnly mode support

[talldan]

Description

contentOnly mode is becoming more prevalent in the editor after 'Select Mode: Use the content-only behavior in select mode' was merged.

Lots of block types still aren't working perfectly in contentOnly mode, so this list intends to capture those issues so that they can be worked on in parallel by multiple devs. Lots of the blocks also share similar issues, so hopefully there are higher-level solutions to the problems that can be found (lets discuss these in the comments).

Feel free to add more to this issue if you discover untracked issues.

Rough snippet that can be run in post editor's console to generate example blocks in contentOnly locked groups, YMMV 🤷

const blockExamples = wp.data.select( 'core/blocks' ).getBlockTypes()
  .filter( ( { example } ) => example )
  .map( ( { name, title, example: { attributes, innerBlocks } } ) => ( { name, title, attributes, innerBlocks } ) );
const createInnerExamples = ( innerBlocks ) => innerBlocks.map( ( { name, attributes, innerBlocks } ) => {
  return wp.blocks.createBlock( name, attributes, createInnerExamples( innerBlocks ?? [] ) );
});
const createExamples = ( examples ) => examples.map( ( { name, title, attributes, innerBlocks } ) => {
  const innerBlockInstances = createInnerExamples( innerBlocks ?? [] );

  return wp.blocks.createBlock( 'core/group', {
    templateLock: 'contentOnly',
    metadata: { name: title }
  }, [ wp.blocks.createBlock( name, attributes, innerBlockInstances ) ]);
});
const innerBlockInstances = createExamples( blockExamples );
const blocks = wp.data.select( 'core/block-editor' ).getBlocks();

wp.data.dispatch( 'core/block-editor' ).insertBlocks( innerBlockInstances, blocks.length );

Blocks

All blocks

• Restrict formatting controls in write mode (contentOnly)
• Disable block transforms in write mode - All transform actions (row, stack, grid, etc on the Group block for example) should be disabled for all blocks when the editor is in write mode.
• Remove tools from third party blocks by default and consider surfacing a way for block toolbar controls to opt into rendering during write mode.

Buttons

• User cannot add/remove individual buttons (see Add new mode to contentOnly locking to allow insertion of new inner blocks #52018)
• ~"Add before" and "add after" options available in the Button block but they don't do anything

Cover

• Background image cannot be modified (should it be possible to modify this?)
• Initial block placeholder can't be interacted with in contentOnly mode (possibly the same issue as above).
• Text inside Cover not always editable. Reproduced intermittently, with Cover containing Groups with text inside.

Details

PR: #70124

• Details block appears as a single 'Paragraph' in the Inspector Content panel

File

PR: #65787

• Block is completely non-interactive, including the placeholder

Gallery

• Placeholder is non-interactive in contentOnly mode.
• Users cannot add/remove items (should they be able to?) (see Add new mode to contentOnly locking to allow insertion of new inner blocks #52018)

Image

• Image inserted while in write mode or pre-inserted at root level has "add text over image" option available but doesn't have "caption" option.
• Image not having ability to add caption is inconsistent with Audio and Video blocks which do allow adding a caption.
• For pre-inserted Images with captions, the caption isn't always editable (I've reproduced the bug fairly consistently when the block toolbar is at the bottom of the block).
• Update the order of the tools in the image block to: 1. Add link, 2. Add caption, 3. Crop, 4. Add text over image, 5. Add duotone. In Write Mode the only one of these available should be "link".
• Move "Replace" to before the other tools as it's the most critical
• Hide Cut/Copy commands in Write Mode (contentOnly)

List

PR: #65836

• Users cannot add/remove list items from the list block or nest list items (how should nested list items appear in the Inspector content panel?) (see Add new mode to contentOnly locking to allow insertion of new inner blocks #52018)
• List Items currently have a special case in the code to prevent them appearing in the Inspector Content panel (a more general solution to this should be found as other container blocks will have the same kind of problem for their inner blocks):

  gutenberg/packages/block-editor/src/components/block-inspector/index.js

  Line 242 in df27bd9

  getBlockName( current ) !== 'core/list-item' &&

• "Add before" and "add after" options available in List item but they don't do anything

Media / Text

• Additional paragraphs can't be added in the content area of the block (similar to Quote)
• In the Inspector panel, the paragraph that's inside the Media Text block appears after it (again, similar to Quote)

More

PR: #70100

• User cannot edit 'Read more' text

Navigation

• Cannot be edited (see Navigation Block: develop a content-only representation #65699)
• Add View button to navigation link blocks

Post Title / Featured Image / Excerpt

• Blocks cannot be edited (they have no attributes suitable for the role: content declaration)

Query

• Query Loop Block: develop a content-only representation #66614

Quote

• The paragraph that's inside the Quote appears after the Quote block in the Inspector Content panel (to repro, add a quote block inside a group, apply contentOnly templateLock to the group, and select the group.)
• Users cannot add more paragraphs (should they be able to? If so should they also be able to add other types of blocks? How do these appear in the Inspector Content panel?) (see Add new mode to contentOnly locking to allow insertion of new inner blocks #52018)

Site Logo / Site Title / Site Tagline

PR: #71627 (makes site tagline a content block)

• Site Tagline cannot be edited (has no attributes suitable for the role: content declaration)
• Fix: Hide heading level and alignment controls in site-title block when in contentOnly mode
• Fix: Hide crop and dimensions controls in site-logo block when in Write Mode

Social Link(s)

• Social Link: Add contentOnly editing support #66622
• Allow editing individual link text. Should be button be refactored to use <RichText />?
• Should social link block styles be shown in Write mode for each link or only the social links block container?
• Additional blocks cannot be added to Social Links (see Add new mode to contentOnly locking to allow insertion of new inner blocks #52018)
• Social links block can be inserted into a page in Write mode, but it can't be edit. Should it be removed from the inserter?

Spacer

• Should spacer be resizable?

Synced Patterns in Write Mode

PR: #67026

• Write Mode: Non-overridden synced pattern content is editable #66424

Table

PR: #70114

• Block is completely non-editable in contentOnly mode, including the initial placeholder

Template Parts

• Template parts are unselectable in write mode, as they're not considered 'sections'. (see Template part selecting and editing unavailable in “Write” mode #66463)

[youknowriad]

For blocks like "list" and "quote", their "inner blocks area" should be marked as "content" somehow it seems. But how far do we take this: is "cover" block's inner blocks also "content"? I guess not but the line is very blurry, in some situations I would love to be able to add paragraphs within "already designed cover blocks" for instance.

[talldan]

For blocks like "list" and "quote", their "inner blocks area" should be marked as "content" somehow it seems. But how far do we take this: is "cover" block's inner blocks also "content"? I guess not but the line is very blurry, in some situations I would love to be able to add paragraphs within "already designed cover blocks" for instance.

Yep, it does feel a bit blurry. Also whether only paragraphs can be added to Quote/Cover or other types of content blocks too.

Heading and List might be other basic text blocks that are candidates. Then List is itself a container, so this is where the flat content structure in contentOnly mode starts to become more challenging to represent.

[richtabor]

For blocks like "list" and "quote", their "inner blocks area" should be marked as "content" somehow it seems. But how far do we take this: is "cover" block's inner blocks also "content"?

The most straightforward move is to solve for repeatable inner blocks, like Button within Buttons block, and List Item within the List block first. Where if you press enter, another of the same block is inserted.

[talldan]

File block was an easy one to fix so I've made a PR - #65787.

I've also been experimenting with the List block with mixed results. I'll try to get a PR up soon.

[richtabor]

For blocks like "list" and "quote", their "inner blocks area" should be marked as "content" somehow it seems.

Related #57911

[annezazu]

I just tested Write/Design mode with a few themes and want to underscore the following as we need these:

• Site Title/Site Logo: for themes that have a "link in bio" feel, this completely breaks the experience as you can't edit much of the main pieces you would want to.
• Navigation: for any theme, I'd want to be able to edit navigation.

Blocks I think should be on the list:

Social Icons: it's odd that you can't edit these, especially if you think about a link in bio site

social.icons.can.t.edit.mov

Query Loop block: strange experience where you can edit the "no results" text but nothing else. I think we should expand what's available in block settings in line with what's described here so there's a more visual and clearer action to take: #63497

query.loop.oddness.mov

[annezazu]

Just did user testing with a friend and want to underscore featured image block too. They couldn't select it and, as a result, didn't know what it was or where it would show up! Here's a quick video demoing how awkward this is, audio included:

featured.image.explanation.mov

Finally, they also ran into issues with the site tagline where it says "write your site tagline" prompt yet they can't select it. Pretty confusing!