Add Gutenberg theme settings and block styling

This commit is contained in:
2026-07-27 11:38:07 +02:00
parent e7897377e5
commit f8c2feac7b
3 changed files with 374 additions and 9 deletions
+85 -9
View File
@@ -60,9 +60,7 @@ body.editor-styles-wrapper {
font-family: "Crimson Pro", Georgia, serif;
}
.editor-styles-wrapper .wp-block {
max-width: 760px;
}
/*
* Gutenberg's visual editor uses this wrapper (rather than <body>) as its canvas.
@@ -86,13 +84,12 @@ body.editor-styles-wrapper {
line-height: inherit !important;
}
.editor-styles-wrapper .wp-block[data-align="wide"] {
max-width: 1180px;
}
/*
* theme.json supplies contentSize and wideSize to Gutenberg's root container.
* Do not override its alignment geometry here: it also handles full-width blocks
* in the editor sidebar and other constrained editor layouts.
*/
.editor-styles-wrapper .wp-block[data-align="full"] {
max-width: none;
}
.editor-styles-wrapper a {
color: #c3480b;
@@ -194,3 +191,82 @@ body.editor-styles-wrapper {
border: 0;
border-top: 1px solid #d8d0c6;
}
/* Match frontend previews for core blocks whose structure needs explicit editor styling. */
.editor-styles-wrapper .wp-block-button__link,
.editor-styles-wrapper .wp-element-button {
border: 1px solid #c3480b;
border-radius: 2px;
background: #c3480b;
color: #fff;
font-family: "Berkeley Mono", monospace;
font-size: 0.75rem;
letter-spacing: 0.04em;
}
.editor-styles-wrapper .is-style-outline > .wp-block-button__link {
background: transparent;
color: #c3480b;
}
.editor-styles-wrapper .wp-block-table {
overflow-x: auto;
font-size: 0.85em;
}
.editor-styles-wrapper .wp-block-table table {
width: 100%;
border-collapse: collapse;
}
.editor-styles-wrapper .wp-block-table th,
.editor-styles-wrapper .wp-block-table td {
padding: 0.55em 0.7em;
border: 1px solid #d8d0c6;
text-align: left;
}
.editor-styles-wrapper .wp-block-table th,
.editor-styles-wrapper .wp-block-quote__citation,
.editor-styles-wrapper .wp-block-pullquote__citation {
font-family: "Berkeley Mono", monospace;
}
.editor-styles-wrapper .wp-block-table th,
.editor-styles-wrapper .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
background: #fffdf9;
}
.editor-styles-wrapper .wp-block-pullquote {
padding: 2rem 0;
border-top: 2px solid #c3480b;
border-bottom: 2px solid #c3480b;
text-align: left;
}
.editor-styles-wrapper .wp-block-pullquote blockquote {
padding: 0;
border: 0;
margin: 0;
color: #1d1b19;
font-family: "Alpha Lyrae", sans-serif;
font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.75rem);
font-style: normal;
}
.editor-styles-wrapper .wp-block-cover__inner-container {
max-width: 760px;
}
.editor-styles-wrapper .wp-block-gallery .wp-element-caption {
margin: 0.5rem 0 0;
}
.editor-styles-wrapper .wp-block-media-text {
gap: clamp(1rem, 3vw, 2.5rem);
}
.editor-styles-wrapper .wp-block-group.has-background,
.editor-styles-wrapper .wp-block-columns.has-background {
padding: clamp(1.25rem, 4vw, 3rem);
}