themeum / qubely

Qubely Blocks – Full-fledged Gutenberg Toolkit
GNU General Public License v3.0
84 stars 36 forks source link

Gutenberg default paragraph blocks spacing issue when child of qubely row block #42

Open jgarib opened 3 years ago

jgarib commented 3 years ago

There appears to be a style issue in the editor regarding the default paragraph blocks when they are children of qubely row block. I first noticed this issue sometime in early august and have been hot patching my sites to mitigate the issue, but this is a less than ideal approach. Since it's been an issue for almost 2 months now I thought I would shine a spotlight on it.

I would classify this as a minor issue, but I'm sure it's frustrating a lot of users of the Qubely plugin. The offending css in particular is this:

.editor-styles-wrapper .qubely-row *>[data-type="qubely/column"] [data-block] { margin-top:0; margin-bottom:0; }

This overrides the default paragraph block's margins that are defined as follows:

.editor-styles-wrapper p { font-size: inherit; line-height: inherit; margin-top: 28px; margin-bottom: 28px; } Here is what the paragraphs look like when the parent row / column block has focus / has been selected: qubley-collapsing-p-styles-selected

As soon as you click out or select a different row block on the same tier as the offending row, they now look like this: qubely-collapsing-p-styles-not-selected

Row blocks are by far the most used component of Qubely for me and this wreaks havoc when users go in to edit content as their expectation is that what they see in the gutenberg editor should closely align with what they see on the front end.