Skip to content

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

@jgarib

Description

@jgarib

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions