Paragraph Block toolbars are inconsistent and random

[maddisondesigns]

Describe the bug
Clicking on a Paragraph Block shows seemingly random and completely inconsistent toolbars. Sometimes the toolbar only shows the Alignment icon, other times it shows Alignment, Bold, Italic, Link and Strikethrough icons. There doesn't appear to be any correlation as to where you click and what toolbar shows. It seems to be worse when Paragraph Blocks are inside columns.

Vid: https://cl.ly/3f1060881cd7

To Reproduce
Steps to reproduce the behavior:

1. Insert multiple Column Blocks and inside that, insert Paragraph Blocks in the columns
2. Click the different Paragraph Blocks and see what toolbars appear

Expected behavior
Clicking anywhere in the Paragraph block should show only one toolbar all the time. This toolbar should have the Alignment, Bold, Italic, Link and Strikethrough icons.

Desktop (please complete the following information):

• OS: macOS Sierra 10.12.6
• Browser: Firefox Quantum 63.0 (64-bit)
• Version: WP 5.0 Beta 1

[designsimply]

Adding a screenshot from the video for reference:

[chrisvanpatten]

The nested paragraphs lacking formatting seems really weird in particular. I noticed that today in master.

[carladoria]

I wasn't able to reproduce this entirely. I tested on Chrome and Firefox. Only one block showed a simplified version of the toolbar, but when I came back again to the same column block, it showed the complete toolbar. And then I could see the same complete toolbar on all blocks as in this recording:

https://drive.google.com/file/d/1JVjzG_h2rh_wp304BnQRBbvEYMGDeD1E/view

[aduth]

I am also unable to reproduce. The controls are collapsed in a nested context, which is expected. Perhaps resolved / implemented as part of #14233.

It can be reopened if still problematic.

[maddisondesigns]

Please re-open this as it's still doing exactly the same thing as I posted in my original vid.

Here's another vid showing it happening with 5.2-beta3-45255

https://cl.ly/8d41fa228dc7

[aduth]

@maddisondesigns Yep, that looks quite wrong. I'll reopen.

It'll help toward a resolution to be made reproduceable. It's not clear to me what it is about your particular scenario that causes the issue to be present for you, and not others, as I've not ever seen it occur for me with paragraphs in columns (same browser, same WordPress version).

Would you be able to share the exact contents of that post somewhere? Are there other plugins active on the site which integrate with the editor?

[maddisondesigns]

The issue seems to occur depending on where you click in the block.

In the image below,. you can see the heading Column ⟶ Paragraph block header, which appears after hovering over the block for a second or two. If you click on this heading, it shows one toolbar. If you click on the actual contents within the block, it shows another toolbar.

What's even more inconsistent though, is if you click on that block header (it shows the short toolbar), then click on the content within that block (it shows the long toolbar). If you then go and click on another block, and then come back and click on that original block header again, it now shows the long toolbar. It makes the whole thing even more confusing and inconsistent.

Here's the content for a simple page that I just created where I can reproduce that issue:

<h2>Columns Block</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns has-2-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. </p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. <br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide has-2-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. </p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. <br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull has-2-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. </p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. <br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"columns":3} -->
<div class="wp-block-columns has-3-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1.<br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2.<br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3.<br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"columns":4} -->
<div class="wp-block-columns has-4-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1.<br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2.<br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3.<br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. <br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"columns":5} -->
<div class="wp-block-columns has-5-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1.<br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2.<br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3.<br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. <br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. <br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"columns":6} -->
<div class="wp-block-columns has-6-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1.<br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2.<br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3.<br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. <br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. <br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 6. This is column 6. This is column 6. This is column 6. This is column 6. This is column 6. This is column 6. This is column 6. This is column 6. This is column 6. This is column 6.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"columns":6,"align":"wide"} -->
<div class="wp-block-columns alignwide has-6-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1.<br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2.<br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3.<br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. <br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. <br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 6. This is column 6. This is column 6. This is column 6. This is column 6. This is column 6. This is column 6. This is column 6. This is column 6. This is column 6. This is column 6.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"columns":6,"align":"full"} -->
<div class="wp-block-columns alignfull has-6-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1. This is column 1.<br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2. This is column 2.<br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3. This is column 3.<br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. This is column 4. <br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. This is column 5. <br></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>This is column 6. This is column 6. This is column 6. This is column 6. This is column 6. This is column 6. This is column 6. This is column 6. This is column 6. This is column 6. This is column 6.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

[maddisondesigns]

This can be replicated when no other plugins are activated

[youknowriad]

I think this is just the regular behavior of the paragraph block (no matter where it's placed). Basically if the RichText input is not focused, the formatting controls are not visible because we don't know to which selection the controls should apply.

[youknowriad]

I think this is fixed.