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

[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

[im3dabasia]

@triple0t , Thank you for raising the issue.

Regarding the first screencast, I tried reproducing the issue you described but could not add a paragraph block beside the button block. I believe this is the intended behavior. The buttons block is designed to have only buttons added to it, not any other elements. So, in my opinion, this is its natural behavior.

Regarding 2nd and 3rd screencast,

I was able to add a paragraph after the image block by selecting either the image block or the column block. I was able to do this, and I believe this is the intended behavior.

Screen.Recording.2025-01-20.at.10.50.24.AM.mov

Please let me know if I missed anything.

[triple0t]

Hi @im3dabasia, Thank you for taking a look.

Regarding the first screencast, I tried reproducing the issue you described but could not add a paragraph block beside the button block. I believe this is the intended behavior. The buttons block is designed to have only buttons added to it, not any other elements. So, in my opinion, this is its natural behavior.

but could not add a paragraph block beside the button block.

Please try adding a paragraph after the button block.

Regarding 2nd and 3rd screencast,
I was able to add a paragraph after the image block by selecting either the image block or the column block. I was able to do this, and I believe this is the intended behavior.

I noted this procedure in the issue description. Here is a quick recap

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

When you click on the editor canvas and attempt adding a new block by dragging and dropping it from the block inserter, you will notice the placeholder does not exist at the bottom of the column (after the button or image block), but it does exist above the block.

The UI is confusing precisely because of this. i.e., You can add a paragraph above the Block (button or image block) but not below it.