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

gutenberg/packages/block-library/src/embed/embed-placeholder.js

Lines 28 to 35 in c489f75

	<input
	type="url"
	value={ value || '' }
	className="components-placeholder__input"
	aria-label={ label }
	placeholder={ __( 'Enter URL to embed here…' ) }
	onChange={ onChange }
	/>

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.

gutenberg/packages/block-library/src/table/editor.scss

Lines 61 to 68 in c489f75

	.blocks-table__placeholder-form.blocks-table__placeholder-form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	> * {
	margin-bottom: $grid-unit-10;
	}

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
    

[t-hamano]

Improvement Roadmap

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

• Apply box-sizing: border-box; to TextControl and TextareaControl placed within Placeholder component
  • Placeholder: Add a box-sizing border-box to input fields #42294
  • BaseControl: Add box-sizing resets #42889
• Replace input element with TextControl
  Embed Block: Replace native input element with InputControl component #64668
• Fix: 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
• Use gap style in form tags and remove block-specific styles:
  • Unify placeholders #59275

[t-hamano]

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

[jasmussen]

Thanks for working on this.