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
• 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.

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.

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.
  Embed Block: Replace native input element with InputControl component #64668
• Input elements and button elements stick together when the screen width is narrow:
  Unify placeholders #59275
  

✅ core/rss

• The input and button elements are styled with own classes.
  Placeholder: Tweak placeholder style #61590
• The height of the input and button elements do not match in certain screen widths in the site editor:
  InputControl-based components: Add opt-in prop for next 40px default size #53819
  

✅ core/table

• The input and button elements are styled with own classes.
  Tweak table block placeholder with __next40pxDefaultSize props #56935
• box-sizing is not applied and elements overlap in the site editor:
  BaseControl: Add box-sizing resets #42889
  

✅ core/shortcode

• Classes for Placeholder component are used to create a unique layout.
  Shortcode Block: fix layout margin override #55028
• Textarea overflows and resizes horizontally in the site editor:
  • Shortcode: Prevent external styling of editing UI #49723
  • Base Styles: Add the editor input reset with increased specificity #49831