[Resolved] Possible Rank Math table of contents block conflict with GeneratePress

[Juan Ramón]

Hello, friends
I need help trying to solve a problem.

Rank Math (free version) has added a new table of contents block.

https://rankmath.com/kb/table-of-contents-block/

This block has some conflict with GeneratePress (I have verified this using only the default template) which prevents it from displaying the “Dimensions” options in the editor.

https://ibb.co/rF6CJQW

I also found that it fails when I put that table of contents block inside a GenerateBlocks Container (which was the alternative to the missing dimensions options).

I have contacted Rank Math support who have accessed the staging and confirmed that the conflict is with GeneratePress, but they can’t give me any more clues.

https://ibb.co/DrYfQ41

Would it be possible to take a look at the staging to find a solution? I would like to be able to use this new block to have one less plugin 😛

Thanks in advance.

[David]

Hi there,

if the Dimension panel is the core inspector control, then i believe that is only supported in a Block based theme that has the relevant theme.json supports added. As GP is a PHP based theme, i do not believe you can enable that.

Can you check with Rank Math if that is the control they are using ?

[Juan Ramón]

Thank you, David
Ok then I’ll ask them and let you know later.

[David]

Please do 🙂

[Juan Ramón]

Hi, again David.

We now have the answer from Rank Math:

That is correct. This is only supported if you have the correct implementation to support this based on this: https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#spacing-control

[David]

Thats great – then simply add the following PHP snippet to your site:

add_theme_support( 'custom-spacing' );

[Juan Ramón]

Good morning David
Great, it works

My site now: https://ibb.co/84R6bz3

The dimensions panel appears, but it only shows the padding, I don’t know if it’s possible to recover the margin option.

Screenshot of the Rank Math page: https://ibb.co/kcxGgyB

Anyway it’s not very important, now I’m going to test if it works well inside a GenerateBlocks container so I can have margin/pading and everything.

[Juan Ramón]

Ok
Rank Math block inside a GenerateBlocks container does not work. I will add it directly and replace it in all posts where I used the reusable block.

I think we can consider the problem (almost) solved until Rank Math improves its table of contents block.

[David]

Yeah it requires a theme.json to be added to the theme.
You can read more info on that here:

https://generatepress.com/forums/topic/deactivate-gutenberg-block-controls-theme-json/

TLDR: We are still looking at how to ‘integrate’ theme.json into the theme without breaking users sites.
If you can manage with the control today then i would suggest not looking at this 🙂

If need be you can use some CSS to add some space, let me know if thats required ?

[Juan Ramón]

I understand. No problem, I’ll wait.

Yes, I would need some CSS to be able to add for example some space 15 px around to separate it from the border because the padding is not applied when it is added in the configuration and now it looks like this:

https://jrmora.com/gaturro-personaje-vapuleado-paseo-historieta/

[David]

Ok, so you could try this:

.wp-block-rank-math-toc-block {
    --wp--preset--spacing--50: 15px;
    --wp--preset--spacing--20: 5px;
    margin-bottom: 15px;
    border: 1px solid;
    border-radius: 20px;
    box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.1);
}

I included the border, border-radius and box-shadow styles to match the block below it. Delete that if you want 🙂

[Juan Ramón]

Wow! thank you very much, perfect with border-radius and box-shadow. Identical to the original 😛

Now I will find a way to locate in the database all the tables added with the plugin and replace them all little by little with a new reusable block.

Very kind, as always, I insist: much appreciated.

Last question: Can this warning be a problem?

https://ibb.co/c6LxMLv

[David]

So that warning can be ignored.

For info:
Those are CSS Variables. They are a CSS Level 3 specification that is supported by ALL modern browsers.
But the WordPress Customizer Additional CSS code mirror only parses Level 2 CSS so it does not recognise them.

[Juan Ramón]

Nice.
Long live CSS level 3 then.

[David]

Here here ! 🙂

Glad to be of help

[Author]

Posts