Testing Astra’s Table of Contents Block

Astra’s Table Of Contents block is inserted in the next block. Its styling and other settings are done inline. And when editing with the Astra theme it looks very different than it does on the published page/post.

A number of settings do not even work. The Align Right setting is causing the box to align right, which is the expected behavior, but oddly also the contents of the box are aligning right but the bullets and heading are aligned left, which looks pretty silly and very unprofessional. But most importantly, the text does not flow around the box, as it is designed to do with WordPress blocks. And when editing this page, Block 1 looks completely differently.

VERY VERY BUGGY

Here’s where it really gets crazy. I created Block 2 below when the Astra theme was Active. And the formatting that does not work in Block 1, did not work. Then I edited this page with 2020 theme, and the formatting started working. Then switched back to the Astra theme, and it continued to work.

So it seems like the Astra theme breaks the block. And the 2020 theme fixes it, and it stays fixed. The Astra theme seems super buggy.

Block 1 – Created when Astra theme was Active

  • Settings of the block directly below this list block.
  • Align = Right
  • Background color = Green (DOES NOT WORK)
  • Header Color = Blue (DOES NOT WORK)
  • Border Color = Red (DOES NOT WORK)
  • Make Content Collapsible = Enabled

Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block.

Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block.

Block 2 – Created when Astra theme was Active, then Edited with 2020 theme

  • Settings of the block below this list block.
  • Align = Right
  • Background color = Blue
  • Header Color = Red
  • Border Color = Red
  • Make Content Collapsible = Enabled

Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block.

Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block. Text to test if it flows around the block.

Screen shots of editing Block 1 & Block 2

Astra Table of Contents Block Editing Block 1
Astra Table of Contents Block Editing Block 2

Viewing of Block 1 with Astra theme

Astra Table of Contents Block Viewing Block 1

Here is what Block 2 looked like…

While Editing with Astra theme

Astra Table of Contents Block – Editing with Astra theme

Viewed after switching to 2020 Theme

Astra Table of Contents Block working in 2020 Theme

Heading 1 – H2

Paragraph

Heading 2 – H2

Paragraph

Heading 2.1 – H3

Paragraph

Heading 2.1 – H3

Paragraph

Heading 3 – H2

Paragraph