Skip to content

Placeholder does not appear when trying to insert a block to the bottom of a Column #68754

@triple0t

Description

@triple0t

Description

The placeholder does not appear when trying to insert a block to the bottom of a Column from the Block inserter (unless the item in the column is already selected).

The bug is noticeable when the last item in the column block is a button or an image.

Note: I don't know if this issue is a bug or an intended behavior. The UI is confusing either way.

Step-by-step reproduction instructions

  1. Ensure you are using WordPress 6.7.1
  2. Open the post editor (e.g., from the WP admin dashboard, click on Add new post)
  3. Create a one-column block (you can give it a background color)
  4. Add a Paragraph and Button at the bottom of the column block OR add a single Image block. Either option, ensure the Button or Image block is the last item in the column
  5. Click on the editor canvas
  6. Attempt to add a new Paragraph block by moving it from the Blocks inserter sidebar.
  7. Observe that the placeholder does not exist, and you cannot add the block to the column bottom (after the Button or Image block).

Screenshots, screen recording, code snippet

Placeholder does not appear after button block

Placeholder-does-not-appear-after-button-block.mp4

Placeholder does not appear after image block

Placeholder-does-not-appear-after-image-block.mp4

Placeholder appears after selecting column content

Placeholder-appears-after-selecting-column-content.mp4

Block content

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"backgroundColor":"accent-3"} -->
<div class="wp-block-column has-accent-3-background-color has-background"><!-- wp:paragraph -->
<p>This is a column</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Click me</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":"200px"} -->
<div style="height:200px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"backgroundColor":"accent-1"} -->
<div class="wp-block-column has-accent-1-background-color has-background"><!-- wp:image {"aspectRatio":"1","scale":"contain","sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://pd.w.org/2023/07/44364b18862589f06.53436652.jpg" alt="" style="aspect-ratio:1;object-fit:contain"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Playground: Link

Environment info

WordPress 6.7.1
I can replicate the behavior with Gutenberg 20.0.0 activated and deactivated.
Browser: Chrome, Firefox and Safari
Device: MacBook Pro (Apple M3 Max) with macOS 15.2

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Block] ColumnsAffects the Columns Block[Type] BugAn existing feature does not function as intended

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions