Tracking: Improve blocks that have placeholder form

[t-hamano]

Overview

Some blocks have form elements within Placeholder component. In this tracking issue, I would like to discuss applying a uniform style to these blocks and solving some problems. I would like to hear your opinions.

Target blocks

• [ ] core/embed
• [ ] core/rss
• [x] core/table
• [ ] core/shortcode

What's the problem?

As may be related to this comment, I think the following problems exist with blocks that have form elements within Placeholder component.

• Input elements and submit buttons are styled separately in each block.
• Layout is broken in the site editor or on certain screen widths.

Solution

I propose the following 3 solutions to these problems.

1. Don't use the element directly

In the core/embed block, the input[type="url"] element is used, but it should be replaced with TextControl as in the core/rss block. https://github.com/WordPress/gutenberg/blob/c489f755eed1c6db6bad021562105caa19aad805/packages/block-library/src/embed/embed-placeholder.js#L28-L35

2. Use gap style in form tags

In core/table, core/rss, core/embed block, input elements and button are placed directly under form tag, but the styling of these elements varies from block to block.

e.g. https://github.com/WordPress/gutenberg/blob/c489f755eed1c6db6bad021562105caa19aad805/packages/block-library/src/table/editor.scss#L61-L68

Applying gap: 8px; to the form tag eliminates the need for the block's own styling and ensures that the margins are correctly maintained at any screen width.

3. Apply box-sizing to form elements

The site editor doesn't apply box-sizing:border-box to form elements, so the layout is broken in several blocks. To fix this, I think we should apply box-sizing:border-box to the input element directly below the form tag.

Problems per block

The following are problems per block I have found:

core/embed

• [ ] the input[type="url"] element is used.
• [x] Input elements and button elements stick together when the screen width is narrow: #59275

core/rss

• [ ] The input and button elements are styled with own classes.
• [x] The height of the input and button elements do not match in certain screen widths in the site editor: #53819

core/table

• [x] The input and button elements are styled with own classes. #56935
• [x] box-sizing is not applied and elements overlap in the site editor: #42889

core/shortcode

• [ ] Classes for Placeholder component are used to create a unique layout.
• [x] Textarea overflows and resizes horizontally in the site editor:
  • #49723
  • #49831

[t-hamano]

Improvement Roadmap

In order to limit the impact on each component, I would like to follow these steps:

• [x] Apply box-sizing: border-box; to TextControl and TextareaControl placed within Placeholder component
  • ~~#42294~~
  • #42889
• [ ] Replace input element with TextControl #64668
• [x] Fix: textarea overflows and resizes horizontally in the site editor
  • #49723
  • #49831
• [x] Use gap style in form tags and remove block-specific styles:
  • #59275

[t-hamano]

Update: In #59275, the Placeholder component has been improved based on the gap layout.

[jasmussen]

Thanks for working on this.