A few differences between editor and frontend

[yankiara]

Cwicly Plugin version: 1.2.9.3

Hi,

Here are a few things I noticed that don’t match frontend in backend editor.
Gutenberg is not that easy to tame

1. Before and after in inline elements

Backend:

Frontend:

I guess it is due to the display: block of the div which causes a line break.

Not sure whether it is WP or Cwicly, though

2. Paragraph margins

Here the .is-root-container messes with my custom CSS.

3. Rules based on last-child

I could solve this with different targets, but here, the “+” button seems to add a div in my grid, so my last item is not the actual last item, and order property was not applied to the right element.

[yankiara]

This is actually a critical issue for clients, especially when editing content like page or post.

Also found this, which is a bit brutal

A last one: If I remove the .is-root-container p rule to get my margins back, blocks margins add up instead of collapsing:

Changing display back to block solves the problem

[yankiara]

So, here is quick fix for the most basic issues I’ve mentionned above:

.is-root-container.block-editor-block-list__layout {
    display: block;
}
.is-root-container p {
	margin-block-start: 1em; /* Set your own p margins here */
	margin-block-end: 1em;
}
:where(ul,ol):not([class]), :where(ul,ol).block-editor-block-list__block {
	padding-left: 1.5em; /* Set your favorite list padding */
}

NOTE: I use :not([class]) because unfortunately, nav menus & image galleries (and maybe other blocks) still use ul tag to display elements (which seems a bit prehistorical to me!) so I need to exclude them.

And here is my actual SCSS (which also handles headings spacing and removes margins for first and last children):

h1, h2, h3, h4 {
	margin-block-start: 1.5em;
	margin-block-end: 1em;
}
p, :where(ul,ol):not([class]), .is-root-container p {
	margin-block-start: 1em;
	margin-block-end: 1em;
}
:where(ul, ol):not([class]) > li:not(:last-child), :where(ul, ol).block-editor-block-list__block > li:not(:last-child) {
	margin-block-end: 0.75em;
}
:where(p, :where(ul, ol):not([class]), :where(ul, ol).block-editor-block-list__block, h1, h2, h3, h4) {
    &:first-child {
	    margin-block-start: 0;
    }
    &:last-child {
	    margin-block-end: 0;
    }
}
:where(ul,ol):not([class]), :where(ul,ol).block-editor-block-list__block {
	padding-left: 1.5em;
}

Maybe you have some better way to do this?

[yankiara]

Small addition

I usually change the list bullets style to match my global design and add a bit of life, for instance:

ul:not([class]), ul.block-editor-block-list__block {
    list-style: none;
    padding: 0px;
    & li:before {
        margin-right: 0.5em;
    	color: var(--c-bullets);
        content: '\27A2';
    }
}

But due to the before/after issue mentionned above, there’s again a line break after the bullets

So here is a fix for basic blocks:

:where(p, h1, h2, h3, li) > .block-editor-rich-text__editable {
    display: inline;
}

Now, backend looks exactly like frontend:

[owynter]

Great stuff.
I would consider my CSS knowledge “intermediate” at best, so I was only able to keep up with some of that

I’ve found some fiddly things on list items, myself, and have had to add some workaround through trial and error. Your point about Gutenberg being “not easy to tame” is so right. I can never be sure which is a Cwicly issue, and which is just Gute being Gute.

[yankiara]

@owynter

I can never be sure which is a Cwicly issue, and which is just Gute being Gute.

I see what you mean! I always have a WP test website tab open close to my Cwicly test website so that I can quickly check what comes from what

Here, except maybe for the before/after issue which is a bit ambiguous, all problems seem to have been introduced by Cwicly, so hopefully they can Cwicly fix them

[yankiara]

I found another issue with styling added in script tags inside editor.

Those script tags mess with pseudo-classes like :first-child, :last-child, :nth-child, etc.

Maybe all styles could be added to a global script tag outside of rendered markup?