Earlier today Andrew Leonard and I were playing with the columns CSS property. When we were applying it to a list block we noticed that the block was to the left hand side of the editor. We were using the Twenty Sixteen theme. We tracked it down to some CSS that set the left and right margins to small values. Normally they’re auto.
- Imagine my surprise when I discovered the same thing happens in this theme, Twenty Seventeen.
- And Andrew says it’s the same in Twenty Fourteen.
The CSS is pretty similar in each theme. This is the relevant CSS from Twenty Seventeen.
/* List styles */
.edit-post-visual-editor ul:not(.wp-block-gallery),
.editor-block-list__block ul:not(.wp-block-gallery),
.block-library-list ul,
.edit-post-visual-editor ol,
.editor-block-list__block ol,
.block-library-list ol,
.block-library-list .editor-rich-text__tinymce {
margin: 0 0 1.5em 1.5em;
padding: 0;
}
Problem resolution
I’ve raised TRAC ticket #51607 suggesting the same solution as was developed for Twenty Fifteen, which had the same problem
Workaround
I tried adding the following CSS in Customiser > Additional CSS, but this doesn’t take effect in the block editor since it’s not loaded. The workaround needs to be applied elsewhere.
Twenty Seventeen
.edit-post-visual-editor ul:not(.wp-block-gallery) {
margin: 0 auto 1.5em auto;
}