This css helps the default WP Gutenberg editor be more user friendly. Enqueue with the main CSS stylesheet.
/****************************************************************************
*****************************************************************************
# WP Editor Styles
Updated: April 26, 2024
*****************************************************************************
****************************************************************************/
/****************************************************************************
*****************************************************************************
# Styling
*****************************************************************************
****************************************************************************/
:root {
--gcw-max-xl: 85%;
--gcw-max: 1100px;
--gcw-max-m: 800px;
--gcw-max-s: 600px;
--sp-feat: 10rem;
--sp-base: 3rem;
--sp-rim: 1.25rem;
}
.block-editor-page .wp-block, .wp-block-column.is-vertically-aligned-bottom, .wp-block-column.is-vertically-aligned-center, .wp-block-column.is-vertically-aligned-top { max-width: 100%; width: unset; }
.block-editor-page .editor-block-list__layout { max-width: 100%; }
.block-editor-page .edit-post-visual-editor .wp-block { padding: 3px; margin: 10px !important; border: 3px #f1f1f1 solid !important;}
.block-editor-page .edit-post-visual-editor .wp-block[class*="wp-block-acf"] { background: #bafff3; }
.block-editor-page .edit-post-visual-editor .block-list-appender.wp-block,
.block-editor-page .edit-post-visual-editor .block-editor-default-block-appender.wp-block { padding: 0; border: none; }
.block-editor-page .edit-post-visual-editor .wp-block.wp-block-group { border: 6px #f1f1f1 solid !important; }
.block-editor-page .edit-post-visual-editor .wp-block.is-reusable { border: 4px #c0c5ff solid !important; }
.block-editor-page .edit-post-visual-editor .wp-block[data-align=wide] { max-width: 1100px; }
.block-editor-page .edit-post-visual-editor .wp-block[data-align=full] { max-width: 100%; }
/* Remove default Gap */
.editor-styles-wrapper :where(.wp-block-columns.is-layout-flex),
.editor-styles-wrapper :where(.is-layout-flex) { gap: 0 !important; }
/* GRID CONTAINER CLASSES - with Px widths for editor visual refference not related to actual theme sizing */
.block-editor-page .edit-post-visual-editor .wp-block.gcw-xl, .gcw-xl-child > :first-child { margin: 0 auto !important; width: 100%; max-width: var(--gcw-max-xl) !important; }
.block-editor-page .edit-post-visual-editor .wp-block.gcw, .gcw-child > :first-child { margin: 0 auto !important; width: 100%; max-width: var(--gcw-max) !important; }
.block-editor-page .edit-post-visual-editor .wp-block.gcw-m, .gcw-m-child > :first-child { margin: 0 auto !important; width: 100%; max-width: var(--gcw-max-m) !important; }
.block-editor-page .edit-post-visual-editor .wp-block.gcw-s, .gcw-s-child > :first-child { margin: 0 auto !important; width: 100%; max-width: var(--gcw-max-s) !important; }
.block-editor-page .edit-post-visual-editor .wp-block.gcw.fluid { width: 100%; max-width: 100% !important; }
/* Backend colors for ease of use */
.editor-styles-wrapper .has-white-background-color { color: var(--wp--preset--color--black) !important; }
.is-style-outline>.wp-block-button__link:not(.has-text-color), .wp-block-button__link.is-style-outline:not(.has-text-color) { background: transparent !important; }
/* SVG Helpers */
.block-editor-page .edit-post-visual-editor .wp-block[class*="wp-block-acf"] svg { height: 2em; }
/****************************************************************************
*****************************************************************************
# Grid Helpers (Copy from main CSS)
*****************************************************************************
****************************************************************************/
/*---------------------------------------------------------------------------
CSS Grid Helpers - GRID 1fr @ 799px
---------------------------------------------------------------------------*/
/* Rplacing Gutenberg Columns Flex to grid & GSS Auto Grid */
.wp-block-columns, .gssauto, .gssauto-child > * { display: grid !important; grid-auto-columns: 1fr; grid-auto-flow: row; margin-bottom: 0; }
.wp-block-column:not(:first-child) { margin-left: 0em; }
@media screen and (min-width: 800px) {
.wp-block-columns, .gssauto, .gssauto-child > * { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; margin-bottom: 0; }
}
/* GSS Grid 1fr @ 799px
-----------------------------------------------*/
*[class*="gss--"], *[class*="gsschild--"] > * { display: grid !important; grid-auto-columns: 1fr; grid-auto-flow: row;}
@media screen and (min-width: 800px) {
/* Auto Fit Grids */
.gss--1-auto, .gsschild----1-auto > * { display: grid !important;grid-template-columns: 1fr auto; }
.gss--auto-1, .gsschild--auto-1 > * { grid-template-columns: auto 1fr; }
/* repeat grids */
.gss--r-2, .gsschild--r-2 > * { grid-template-columns: repeat(2, 1fr) ; }
.gss--r-3, .gsschild--r-3 > * { grid-template-columns: repeat(3, 1fr) ; }
.gss--r-4, .gsschild--r-4 > * { grid-template-columns: repeat(4, 1fr) ; }
.gss--r-5, .gsschild--r-5 > * { grid-template-columns: repeat(5, 1fr) ; }
.gss--r-6, .gsschild--r-6 > * { grid-template-columns: repeat(6, 1fr) ; }
.gss--r-12, .gsschild--r-12 > * { grid-template-columns: repeat(12, 1fr) ; }
/* Set grid - Thirds */
.gss--1-2, .gsschild--1-2 > * { grid-template-columns: 1fr 2fr ; }
.gss--2-1, .gsschild--2-1 > * { grid-template-columns: 2fr 1fr ; }
/* Set grid - Fourths */
.gss--1-3, .gsschild--1-3 > * { grid-template-columns: 1fr 3fr ; }
.gss--3-1, .gsschild--3-1 > * { grid-template-columns: 3fr 1fr ; }
.gss--2-1-1, .gsschild--2-1-1 > * { grid-template-columns: 2fr 1fr 1fr ; }
.gss--1-2-1, .gsschild--1-2-1 > * { grid-template-columns: 1fr 2fr 1fr ; }
.gss--1-1-2, .gsschild--1-1-2 > * { grid-template-columns: 1fr 1fr 2fr ; }
/* Set grid - Fifths */
.gss--1-4, .gsschild--1-4 > * { grid-template-columns: 1fr 4fr ; }
.gss--4-1, .gsschild--4-1 > * { grid-template-columns: 4fr 1fr ; }
.gss--2-3, .gsschild--2-3 > * { grid-template-columns: 2fr 3fr ; }
.gss--3-2, .gsschild--3-2 > * { grid-template-columns: 3fr 2fr ; }
.gss--1-2-2, .gsschild--1-2-2 > * { grid-template-columns: 1fr 2fr 2fr ; }
.gss--2-1-2, .gsschild--2-1-2 > * { grid-template-columns: 2fr 1fr 2fr ; }
.gss--2-2-1, .gsschild--2-2-1 > * { grid-template-columns: 2fr 2fr 1fr ; }
.gss--3-1-1, .gsschild--3-1-1 > * { grid-template-columns: 3fr 1fr 1fr ; }
.gss--1-3-1, .gsschild--1-3-1 > * { grid-template-columns: 1fr 3fr 1fr ; }
.gss--1-1-3, .gsschild--1-1-3 > * { grid-template-columns: 1fr 1fr 3fr ; }
/* Set grid - Sixths */
.gss--1-5, .gsschild--1-5 > * { grid-template-columns: 1fr 5fr ; }
.gss--5-1, .gsschild--5-1 > * { grid-template-columns: 5fr 1fr ; }
/* Grid Column Order i.e. Source Ordering */
.gsc--order-0 { order: 0; }
.gsc--order-1 { order: 1; }
.gsc--order-2 { order: 2; }
.gsc--order-3 { order: 3; }
/* Grid Column Over i.e. Overlap/Pull */
.gsc--over-r { position: relative; z-index: 10; margin-right: calc(-1 * var(--sp-base)) !important; }
.gsc--over-l { position: relative; z-index: 10; margin-left: calc(-1 * var(--sp-base)) !important; }
.gsc--over-h { position: relative; z-index: 10; margin-left: calc(-1 * var(--sp-base)) !important; margin-right: calc(-1 * var(--sp-base)) !important; }
.gsc--over-t { position: relative; z-index: 10; margin-top: calc(-1 * var(--sp-base)) !important; }
.gsc--over-b { position: relative; z-index: 10; margin-bottom: calc(-1 * var(--sp-base)) !important; }
.gsc--over-v { position: relative; z-index: 10; margin-top: calc(-1 * var(--sp-base)) !important; margin-bottom: calc(-1 * var(--sp-base)) !important; }
/* Grid Column Push */
.gsc--push-r { margin-right: calc(1 * var(--sp-base)); }
.gsc--push-l { margin-left: calc(1 * var(--sp-base)); }
/* Grid Column Span */
.gsc--span-0 { grid-column: 1 / -1; }
.gsc--span-2 { grid-column: auto / span 2; }
.gsc--span-3 { grid-column: auto / span 3; }
.gsc--span-4 { grid-column: auto / span 4; }
.gsc--span-5 { grid-column: auto / span 5; }
.gsc--span-6 { grid-column: auto / span 6; }
.gsc--span-7 { grid-column: auto / span 7; }
.gsc--span-8 { grid-column: auto / span 8; }
.gsc--span-9 { grid-column: auto / span 9; }
.gsc--span-10 { grid-column: auto / span 10; }
.gsc--span-11 { grid-column: auto / span 11; }
}
/* GSS Grid All
-----------------------------------------------*/
/* Auto Fit Grids */
.gss--1-auto-all, .gsschild--1-auto-all > * { grid-template-columns: 1fr auto; }
.gss--auto-1-all, .gsschild--auto-1-all > * { grid-template-columns: auto 1fr; }
/* repeat grids */
.gss--r-2-all, .gsschild--r-2-all > * { grid-template-columns: repeat(2, 1fr) ; }
.gss--r-3-all, .gsschild--r-3-all > * { grid-template-columns: repeat(3, 1fr) ; }
.gss--r-4-all, .gsschild--r-4-all > * { grid-template-columns: repeat(4, 1fr) ; }
.gss--r-5-all, .gsschild--r-5-all > * { grid-template-columns: repeat(5, 1fr) ; }
.gss--r-6-all, .gsschild--r-6-all > * { grid-template-columns: repeat(6, 1fr) ; }
.gss--r-12-all, .gsschild--r-12-all > * { grid-template-columns: repeat(12, 1fr) ; }
/* Set grid - Thirds */
.gss--1-2-all, .gsschild--1-2-all > * { grid-template-columns: 1fr 2fr ; }
.gss--2-1-all, .gsschild--2-1-all > * { grid-template-columns: 2fr 1fr ; }
/* Set grid - Fourths */
.gss--1-3-all, .gsschild--1-3-all > * { grid-template-columns: 1fr 3fr ; }
.gss--3-1-all, .gsschild--3-1-all > * { grid-template-columns: 3fr 1fr ; }
.gss--2-1-1-all, .gsschild--2-1-1-all > * { grid-template-columns: 2fr 1fr 1fr ; }
.gss--1-2-1-all, .gsschild--1-2-1-all > * { grid-template-columns: 1fr 2fr 1fr ; }
.gss--1-1-2-all, .gsschild--1-1-2-all > * { grid-template-columns: 1fr 1fr 2fr ; }
/* Set grid - Fifths */
.gss--1-4-all, .gsschild--1-4-all > * { grid-template-columns: 1fr 4fr ; }
.gss--4-1-all, .gsschild--4-1-all > * { grid-template-columns: 4fr 1fr ; }
.gss--2-3-all, .gsschild--2-3-all > * { grid-template-columns: 2fr 3fr ; }
.gss--3-2-all, .gsschild--3-2-all > * { grid-template-columns: 3fr 2fr ; }
.gss--1-2-2-all, .gsschild--1-2-2-all > * { grid-template-columns: 1fr 2fr 2fr ; }
.gss--2-1-2-all, .gsschild--2-1-2-all > * { grid-template-columns: 2fr 1fr 2fr ; }
.gss--2-2-1-all, .gsschild--2-2-1-all > * { grid-template-columns: 2fr 2fr 1fr ; }
.gss--3-1-1-all, .gsschild--3-1-1-all > * { grid-template-columns: 3fr 1fr 1fr ; }
.gss--1-3-1-all, .gsschild--1-3-1-all > * { grid-template-columns: 1fr 3fr 1fr ; }
.gss--1-1-3-all, .gsschild--1-1-3-all > * { grid-template-columns: 1fr 1fr 3fr ; }
/* Set grid - Sixths */
.gss--1-5-all, .gsschild--1-5-all > * { grid-template-columns: 1fr 5fr ; }
.gss--5-1-all, .gsschild--5-1-all > * { grid-template-columns: 5fr 1fr ; }
/* GSS Grid Small
-----------------------------------------------*/
@media screen and (max-width: 799px) {
/* Auto Fit Grids */
.gss--1-auto-small, .gsschild--1-auto-small > * { grid-template-columns: 1fr auto; }
.gss--auto-1-small, .gsschild--auto-1-small > * { grid-template-columns: auto 1fr; }
/* repeat grids */
.gss--r-2-small, .gsschild--r-2-small > * { grid-template-columns: repeat(2, 1fr) ; }
.gss--r-3-small, .gsschild--r-3-small > * { grid-template-columns: repeat(3, 1fr) ; }
.gss--r-4-small, .gsschild--r-4-small > * { grid-template-columns: repeat(4, 1fr) ; }
.gss--r-5-small, .gsschild--r-5-small > * { grid-template-columns: repeat(5, 1fr) ; }
.gss--r-6-small, .gsschild--r-6-small > * { grid-template-columns: repeat(6, 1fr) ; }
.gss--r-12-small, .gsschild--r-12-small > * { grid-template-columns: repeat(12, 1fr) ; }
/* Set grid - Thirds */
.gss--1-2-small, .gsschild--1-2-small > * { grid-template-columns: 1fr 2fr ; }
.gss--2-1-small, .gsschild--2-1-small > * { grid-template-columns: 2fr 1fr ; }
/* Set grid - Fourths */
.gss--1-3-small, .gsschild--1-3-small > * { grid-template-columns: 1fr 3fr ; }
.gss--3-1-small, .gsschild--3-1-small > * { grid-template-columns: 3fr 1fr ; }
.gss--2-1-1-small, .gsschild--2-1-1-small > * { grid-template-columns: 2fr 1fr 1fr ; }
.gss--1-2-1-small, .gsschild--1-2-1-small > * { grid-template-columns: 1fr 2fr 1fr ; }
.gss--1-1-2-small, .gsschild--1-1-2-small > * { grid-template-columns: 1fr 1fr 2fr ; }
/* Set grid - Fifths */
.gss--1-4-small, .gsschild--1-4-small > * { grid-template-columns: 1fr 4fr ; }
.gss--4-1-small, .gsschild--4-1-small > * { grid-template-columns: 4fr 1fr ; }
.gss--2-3-small, .gsschild--2-3-small > * { grid-template-columns: 2fr 3fr ; }
.gss--3-2-small, .gsschild--3-2-small > * { grid-template-columns: 3fr 2fr ; }
.gss--1-2-2-small, .gsschild--1-2-2-small > * { grid-template-columns: 1fr 2fr 2fr ; }
.gss--2-1-2-small, .gsschild--2-1-2-small > * { grid-template-columns: 2fr 1fr 2fr ; }
.gss--2-2-1-small, .gsschild--2-2-1-small > * { grid-template-columns: 2fr 2fr 1fr ; }
.gss--3-1-1-small, .gsschild--3-1-1-small > * { grid-template-columns: 3fr 1fr 1fr ; }
.gss--1-3-1-small, .gsschild--1-3-1-small > * { grid-template-columns: 1fr 3fr 1fr ; }
.gss--1-1-3-small, .gsschild--1-1-3-small > * { grid-template-columns: 1fr 1fr 3fr ; }
/* Set grid - Sixths */
.gss--1-5-small, .gsschild--1-5-small > * { grid-template-columns: 1fr 5fr ; }
.gss--5-1-small, .gsschild--5-1-small > * { grid-template-columns: 5fr 1fr ; }
}
/*---------------------------------------------------------------------------
Flex Columns Helpers - 100% Width @ 799px
---------------------------------------------------------------------------*/
*[class*="fcls--"] { display: flex !important; flex-wrap: wrap !important; justify-content: center; flex: 0 0 100% !important; }
.fcls--6,
.fcls--5,
.fcls--4,
.fcls--3,
.fcls--2 { margin: 0 !important; gap: 0; }
.fcls--6-rim,
.fcls--5-rim,
.fcls--4-rim,
.fcls--3-rim,
.fcls--2-rim { margin: 0 calc( var(--sp-rim) * -0.5 ) !important; gap: var(--sp-rim); }
.fcls--6-base,
.fcls--5-base,
.fcls--4-base,
.fcls--3-base,
.fcls--2-base { margin: 0 calc( var(--sp-base) * -0.5 ) !important; gap: var(--sp-base); }
@media screen and (min-width: 800px) {
.fcls--6 > * { flex: 0 0 16.666666% !important; }
.fcls--5 > * { flex: 0 0 20% !important; }
.fcls--4 > * { flex: 0 0 25% !important; }
.fcls--3 > * { flex: 0 0 33.333333% !important; }
.fcls--2 > * { flex: 0 0 50% !important; }
.fcls--6-rim > * { flex: 0 0 calc(16.666666% - var(--sp-rim)) !important; }
.fcls--5-rim > * { flex: 0 0 calc(20% - var(--sp-rim)) !important; }
.fcls--4-rim > * { flex: 0 0 calc(25% - var(--sp-rim)) !important; }
.fcls--3-rim > * { flex: 0 0 calc(33.333333% - var(--sp-rim)) !important; }
.fcls--2-rim > * { flex: 0 0 calc(50% - var(--sp-rim)) !important; }
.fcls--6-base > * { flex: 0 0 calc(16.666666% - var(--sp-base)) !important; }
.fcls--5-base > * { flex: 0 0 calc(20% - var(--sp-base)) !important; }
.fcls--4-base > * { flex: 0 0 calc(25% - var(--sp-base)) !important; }
.fcls--3-base > * { flex: 0 0 calc(33.333333% - var(--sp-base)) !important; }
.fcls--2-base > * { flex: 0 0 calc(50% - var(--sp-base)) !important; }
}
/*---------------------------------------------------------------------------
Gap Helpers for CSS Gird & Flexbox
---------------------------------------------------------------------------*/
.grid-gap-rim, .grid-gap-rim-child > * { gap: var(--sp-rim) !important; }
.grid-gap, .grid-gap-child > * { gap: var(--sp-base) !important; }
.grid-gap-feat, .grid-gap-feat-child > * { gap: var(--sp-feat) !important; }
.row-gap-rim, .row-gap-rim-child > * { row-gap: var(--sp-rim) !important; }
.row-gap, .row-gap-child > * { row-gap: var(--sp-base) !important; }
.row-gap-feat, .row-gap-feat-child > * { row-gap: var(--sp-feat) !important; }
.col-gap-rim, .col-gap-rim-child > * { column-gap: var(--sp-rim) !important; }
.col-gap, .col-gap-child > * { column-gap: var(--sp-base) !important; }
.col-gap-feat, .col-gap-feat-child > * { column-gap: var(--sp-feat) !important; }
/*---------------------------------------------------------------------------
Galleries
---------------------------------------------------------------------------*/
/* Reset Gallery Figure sizing*/
.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images.columns-6 figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images.columns-7 figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images.columns-8 figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2)~figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image):first-child:last-child
{ width: 100% !important }
/* Gallery Block Grid & Columns */
.wp-block-gallery { display: grid !important; }
.wp-block-gallery.columns-1 { grid-template-columns: repeat(1, 1fr); }
.wp-block-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.wp-block-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.wp-block-gallery.columns-4 { grid-template-columns: repeat(3, 1fr); }
.wp-block-gallery.columns-5 { grid-template-columns: repeat(3, 1fr); }
.wp-block-gallery.columns-6 { grid-template-columns: repeat(3, 1fr); }
.wp-block-gallery.columns-7 { grid-template-columns: repeat(3, 1fr); }
.wp-block-gallery.columns-8 { grid-template-columns: repeat(3, 1fr); }
.wp-block-gallery.columns-9 { grid-template-columns: repeat(3, 1fr); }
@media screen and (min-width: 800px) {
.wp-block-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }
.wp-block-gallery.columns-5 { grid-template-columns: repeat(5, 1fr); }
.wp-block-gallery.columns-6 { grid-template-columns: repeat(6, 1fr); }
.wp-block-gallery.columns-7 { grid-template-columns: repeat(7, 1fr); }
.wp-block-gallery.columns-8 { grid-template-columns: repeat(8, 1fr); }
.wp-block-gallery.columns-9 { grid-template-columns: repeat(9, 1fr); }
}
/* Buttons Block
-----------------------------------------------*/
.wp-block-buttons-is-layout-flex { display: flex; gap: 1rem; }
/****************************************************************************
*****************************************************************************
# ACF BLOCKS
*****************************************************************************
****************************************************************************/
.acf-relationship .list { height: unset !important; }