Blocks Becoming Confused

Hey @abutlwer,

You should use Block Navigator to easily navigate through blocks: https://nimb.ws/dO4XSP

Let me know if it helps. ??

The block navigator has the same confusion problem, unfortunately. Here is a a minimal test file that will display the problem.

<!-- wp:heading {"level":3} -->
<h3>Are You Competitive?</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If you’re starting your studies this October and want to take part in Cambridge team racing in dinghies, this is the CUCrC section you’re looking for! This page should give you a taste of what the Blues sailing teams do and tell you all about Cambridge team racing. The Team Racing Section also provides the University’s Match Racing teams</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>UK University Team Racing</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"ticss-18d62dad","hasCustomCSS":true,"customCSS":".ticss-18d62dad {\n  max-width: 70% !important;\n  float: left !important;\n}"} -->
<p class="ticss-18d62dad">Most organised university sailing in the UK is team racing. A team race involves two teams of three boats. The winning team is that with the best combined position across the finish line (add up the positions and 10 or less wins the race). Team race courses are small, meaning that each race lasts just 6 to 12 minutes. All of this amounts to an extremely exciting and tactical form of racing. At an event, there will generally be 8 to 24 teams entered, with an initial round robin followed by a knock-out stage.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1402,"sizeSlug":"large","className":"ticss-7fa6d98b","hasCustomCSS":true,"customCSS":".ticss-7fa6d98b {\n  float: right !important;\n}\nfigure.ticss-7fa6d98b {\n  max-width: 30% !important;\n  margin-top: 0 !important;\n  margin-bottom: 0 !important;\n  padding-left: 0.5em !important;\n}\nfigure.ticss-7fa6d98b \u003e figcaption {\n  max-width: 98% !important;\n  margin-top: 0 !important;\n  margin-bottom: 0 !important;\n  padding-top: 0.2em !important;\n  padding-bottom: 0.2em !important;\n}"} -->
<figure class="wp-block-image size-large ticss-7fa6d98b"><img src="https://www.cucrc.org/test/wp-content/uploads/2017/12/TRBUSAGybe.jpg" alt="Photo of dinghies sailing" class="wp-image-1402"/><figcaption>Cambridge prepare to gybe at BUSA - with Southampton well trapped outside them</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"className":"ticss-98db6756","hasCustomCSS":true,"customCSS":".ticss-98db6756 {\n  max-width: 70% !important;\n  float: left !important;\n}"} -->
<p class="ticss-98db6756">Find out more by viewing the&nbsp;<a rel="noreferrer noopener" href="https://en.wikipedia.org/wiki/Team_racing" target="_blank">Wikipedia article on team racing</a>. Also read the excellent book ‘Team Racing Companion’ (ISBN 978-1-909911-11-6) by Chris Atkins – a Blue in all his 3 years and captain of the victorious 1977 varsity team.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Team Racing Boats</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Currently, the boat of choice for team racing in the UK is the Firefly. These are 12ft two-man fibreglass dinghies that are highly manoeuvrable. This makes them excellent for tactical team racing moves – obstructing the opposition to let your team mates through. Fireflies are also easily handled and crewed by ladies. CUCrC has two relatively new flights of Fireflies, making our facilities amongst the best in the country</p>
<!-- /wp:paragraph -->

And here is the same page implemented without Blocks CSS. It displays fine in the block editor, with all blocks separate.

<!-- wp:heading {"level":3} -->
<h3>Are You Competitive</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If you’re starting your studies this October and want to take part in Cambridge team racing in dinghies, this is the CUCrC section you’re looking for! This page should give you a taste of what the Blues sailing teams do and tell you all about Cambridge team racing. The Team Racing Section also provides the University’s Match Racing teams.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>UK University Team Racing</h3>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"arb-left"} -->
<p class="arb-left">Most organised university sailing in the UK is team racing. A team race involves two teams of three boats. The winning team is that with the best combined position across the finish line (add up the positions and 10 or less wins the race). Team race courses are small, meaning that each race lasts just 6 to 12 minutes. All of this amounts to an extremely exciting and tactical form of racing. At an event, there will generally be 8 to 24 teams entered, with an initial round robin followed by a knock-out stage.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1402,"sizeSlug":"large","className":"arb-right"} -->
<figure class="wp-block-image size-large arb-right"><img src="https://www.cucrc.org/test/wp-content/uploads/2017/12/TRBUSAGybe.jpg" alt="Photo of dinghies sailing" class="wp-image-1402"/><figcaption>Cambridge prepare to gybe at BUSA - with Southampton well trapped outside them</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"className":"arb-left"} -->
<p class="arb-left">Find out more by viewing the&nbsp;<a rel="noreferrer noopener" href="https://en.wikipedia.org/wiki/Team_racing" target="_blank">Wikipedia article on team racing</a>. Also read the excellent book ‘Team Racing Companion’ (ISBN 978-1-909911-11-6) by Chris Atkins – a Blue in all his 3 years and captain of the victorious 1977 varsity team.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Team Racing Boats</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Currently, the boat of choice for team racing in the UK is the Firefly. These are 12ft two-man fibreglass dinghies that are highly manoeuvrable. This makes them excellent for tactical team racing moves – obstructing the opposition to let your team mates through. Fireflies are also easily handled and crewed by ladies. CUCrC has two relatively new flights of Fireflies, making our facilities amongst the best in the country</p>
<!-- /wp:paragraph -->

And here is the CSS I used in the above code.

.arb-left {
  max-width: 70% !important;
  float: left !important;
}
.arb-right {
  float: right !important;
  max-width: 30% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-left: 0.5em !important;  
}
figure.arb-right > figcaption {
  max-width: 98% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0.2em !important;
  padding-bottom: 0.2em !important;
}

Have done some further testing, trying out a lot of alternative arrangements. The declaration of ‘float: left/right;’ in the Custom CSS definitely seems to be the cause of the ‘block confusion’ I am experiencing in the Visual editor. Once ‘float’ appears in the Custom CSS, no amount of juggling can separate the blocks that get confounded.

Hope this helps, Anthony

Hey @abutlwer,

Can you record a video of your backend and show what gets wrong so we could better understand it? Thank you! ??

Hi Hardeep

Here is a link which shows what I get when I attempt to edit the page in the block editor:
View of block confusion in Visual editor
The page displays OK in the code editor and also displays OK on the website:
Problem page on test website

As you can see, just one big block is displayed for the two ‘float left’ paragraphs and the ‘float right’ image – and the block incorporates the next (h3) heading on the page. It is no longer possible to access the individual paragraphs or the image – though one can alter the text of the heading.

I have discovered a workaround. Insert the image just before the material that is to go to its left and use the standard block editor facility to right-align the image. This set up a div block, so one can then use div.selector in the custom CSS to style the figure and the figcaption. Getting tid of the double dots (..) remains an issue.

Hope this helps, Anthony

Hey @abutlwer,

Sorry I didn’t get a notification for the last message. I was just browsing the support forum and saw that you’ve replied.

I tried it from our side and it seems to be a similar issue. I’m able to select the blocks but I can understand the issue. We really can’t do much about it as it’s just blocks reacting to CSS the way they’re structured. It’s not an issue with the editor or the plugin, just how float property reacts with blocks in the backend. Hope you understand.

Let me know your thoughts.

Yes, I thought something deep was going on! Here is my workaround – which is for flowing text beside and underneath an image, and is not directly concerned with Custom CSS.

1. First add the image beside and below which text is to flow, selecting right or left alignment as required and adding Custom CSS to reduce margins and padding of the image and its caption if desired. (I like text to be fairly ‘tight’ at the top and bottom of an image when text is flowing around.)

2. Add the paragraphs that are to flow around the image – they will flow correctly without any explicit action.

3. If an item, such as a heading, that clears floats comes before the image space is completely taken up, crop the height of the image as much as possible to reduce its vertical space – and put up with any remaining white space.

Hope this may help someone else.

• This reply was modified 4 years, 9 months ago by Anthony Butler.
• This reply was modified 4 years, 9 months ago by Anthony Butler.

Thank you @abutlwer for sharing your experience. ??