Add Gutenberg theme settings and block styling
This commit is contained in:
+85
-9
@@ -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);
|
||||
}
|
||||
|
||||
@@ -402,6 +402,25 @@ h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.3em;
|
||||
}
|
||||
|
||||
/* Keep prose readable while allowing Gutenberg's alignment controls to escape its measure. */
|
||||
.entry-content > .alignwide,
|
||||
.single .entry-thumbnail {
|
||||
/* A post's featured image uses the same breakout geometry as a Wide Gutenberg block. */
|
||||
width: min(var(--wide), calc(100vw - 3rem));
|
||||
max-width: none;
|
||||
margin-left: 50%;
|
||||
margin-right: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.entry-content > .alignfull {
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
margin-left: 50%;
|
||||
margin-right: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.entry-content h2 {
|
||||
margin-top: 2em;
|
||||
font-size: 1.55em;
|
||||
@@ -453,6 +472,111 @@ h4 {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
/* Gutenberg block treatments that need more than the shared theme.json tokens. */
|
||||
.wp-element-caption,
|
||||
.entry-content figcaption {
|
||||
color: var(--muted);
|
||||
font-family: "Berkeley Mono", monospace;
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.wp-block-button__link,
|
||||
.wp-element-button {
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 2px;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-family: "Berkeley Mono", monospace;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.04em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wp-block-button__link:hover,
|
||||
.wp-block-button__link:focus,
|
||||
.wp-element-button:hover,
|
||||
.wp-element-button:focus {
|
||||
border-color: var(--accent-hover);
|
||||
background: var(--accent-hover);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.is-style-outline > .wp-block-button__link {
|
||||
background: transparent;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.wp-block-table {
|
||||
overflow-x: auto;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.wp-block-table table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.wp-block-table th,
|
||||
.wp-block-table td {
|
||||
padding: 0.55em 0.7em;
|
||||
border: 1px solid var(--line);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.wp-block-table th {
|
||||
background: var(--surface);
|
||||
font-family: "Berkeley Mono", monospace;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.wp-block-quote__citation,
|
||||
.wp-block-pullquote__citation {
|
||||
color: var(--muted);
|
||||
font-family: "Berkeley Mono", monospace;
|
||||
font-size: 0.68rem;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.wp-block-pullquote {
|
||||
padding: 2rem 0;
|
||||
border-top: 2px solid var(--accent);
|
||||
border-bottom: 2px solid var(--accent);
|
||||
color: var(--text);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.wp-block-pullquote blockquote {
|
||||
max-width: var(--content);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 0 auto;
|
||||
color: inherit;
|
||||
font-family: "Alpha Lyrae", sans-serif;
|
||||
font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.75rem);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.wp-block-cover__inner-container {
|
||||
max-width: var(--content);
|
||||
}
|
||||
|
||||
.wp-block-gallery .wp-element-caption {
|
||||
margin: 0.5rem 0 0;
|
||||
}
|
||||
|
||||
.wp-block-media-text {
|
||||
gap: clamp(1rem, 3vw, 2.5rem);
|
||||
}
|
||||
|
||||
.wp-block-group.has-background,
|
||||
.wp-block-columns.has-background {
|
||||
padding: clamp(1.25rem, 4vw, 3rem);
|
||||
}
|
||||
.hero {
|
||||
position: relative;
|
||||
display: grid;
|
||||
|
||||
+165
@@ -0,0 +1,165 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/wp/6.6/theme.json",
|
||||
"version": 3,
|
||||
"settings": {
|
||||
"appearanceTools": true,
|
||||
"color": {
|
||||
"custom": true,
|
||||
"customGradient": true,
|
||||
"defaultDuotone": false,
|
||||
"defaultGradients": false,
|
||||
"defaultPalette": false,
|
||||
"duotone": [
|
||||
{
|
||||
"colors": ["#1d1b19", "#c3480b"],
|
||||
"name": "Retro amber",
|
||||
"slug": "retro-amber"
|
||||
}
|
||||
],
|
||||
"gradients": [
|
||||
{
|
||||
"gradient": "linear-gradient(135deg, #c3480b 0%, #8f3508 100%)",
|
||||
"name": "Signal amber",
|
||||
"slug": "signal-amber"
|
||||
},
|
||||
{
|
||||
"gradient": "linear-gradient(135deg, #282623 0%, #171615 100%)",
|
||||
"name": "Console dark",
|
||||
"slug": "console-dark"
|
||||
}
|
||||
],
|
||||
"palette": [
|
||||
{ "color": "#f8f5f0", "name": "Canvas", "slug": "canvas" },
|
||||
{ "color": "#fffdf9", "name": "Surface", "slug": "surface" },
|
||||
{ "color": "#1d1b19", "name": "Ink", "slug": "ink" },
|
||||
{ "color": "#706a63", "name": "Muted", "slug": "muted" },
|
||||
{ "color": "#c3480b", "name": "Signal amber", "slug": "signal-amber" },
|
||||
{ "color": "#8f3508", "name": "Signal amber dark", "slug": "signal-amber-dark" },
|
||||
{ "color": "#282623", "name": "Console", "slug": "console" }
|
||||
]
|
||||
},
|
||||
"layout": {
|
||||
"contentSize": "760px",
|
||||
"wideSize": "1180px"
|
||||
},
|
||||
"spacing": {
|
||||
"blockGap": true,
|
||||
"margin": true,
|
||||
"padding": true,
|
||||
"units": ["px", "rem", "%", "vw", "vh"],
|
||||
"spacingSizes": [
|
||||
{ "name": "1", "size": "0.5rem", "slug": "20" },
|
||||
{ "name": "2", "size": "1rem", "slug": "30" },
|
||||
{ "name": "3", "size": "1.5rem", "slug": "40" },
|
||||
{ "name": "4", "size": "2.5rem", "slug": "50" },
|
||||
{ "name": "5", "size": "4rem", "slug": "60" },
|
||||
{ "name": "6", "size": "6rem", "slug": "70" }
|
||||
]
|
||||
},
|
||||
"typography": {
|
||||
"customFontSize": true,
|
||||
"defaultFontSizes": false,
|
||||
"dropCap": true,
|
||||
"fluid": true,
|
||||
"fontFamilies": [
|
||||
{
|
||||
"fontFamily": "\"Alpha Lyrae\", sans-serif",
|
||||
"name": "Alpha Lyrae",
|
||||
"slug": "alpha-lyrae",
|
||||
"fontFace": [
|
||||
{
|
||||
"fontFamily": "Alpha Lyrae",
|
||||
"fontStyle": "normal",
|
||||
"fontWeight": "500",
|
||||
"src": ["file:./fonts/AlphaLyrae-Medium.woff2"]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"fontFamily": "\"Crimson Pro\", Georgia, serif",
|
||||
"name": "Crimson Pro",
|
||||
"slug": "crimson-pro",
|
||||
"fontFace": [
|
||||
{
|
||||
"fontFamily": "Crimson Pro",
|
||||
"fontStyle": "normal",
|
||||
"fontWeight": "200 900",
|
||||
"src": ["file:./fonts/crimson-pro-latin-wght-normal.woff2"]
|
||||
},
|
||||
{
|
||||
"fontFamily": "Crimson Pro",
|
||||
"fontStyle": "italic",
|
||||
"fontWeight": "200 900",
|
||||
"src": ["file:./fonts/crimson-pro-latin-wght-italic.woff2"]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"fontFamily": "\"Berkeley Mono\", monospace",
|
||||
"name": "Berkeley Mono",
|
||||
"slug": "berkeley-mono",
|
||||
"fontFace": [
|
||||
{
|
||||
"fontFamily": "Berkeley Mono",
|
||||
"fontStyle": "normal",
|
||||
"fontWeight": "400",
|
||||
"src": ["file:./fonts/BerkeleyMono-Regular.woff2"]
|
||||
},
|
||||
{
|
||||
"fontFamily": "Berkeley Mono",
|
||||
"fontStyle": "normal",
|
||||
"fontWeight": "700",
|
||||
"src": ["file:./fonts/BerkeleyMono-Bold.woff2"]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"fontSizes": [
|
||||
{ "name": "Small", "size": "1rem", "slug": "small" },
|
||||
{ "name": "Body", "size": "1.25rem", "slug": "body" },
|
||||
{ "name": "Large", "size": "1.75rem", "slug": "large" },
|
||||
{ "name": "Display", "size": "2.5rem", "slug": "display" },
|
||||
{ "name": "Hero", "size": "4rem", "slug": "hero" }
|
||||
],
|
||||
"lineHeight": true
|
||||
},
|
||||
"useRootPaddingAwareAlignments": true
|
||||
},
|
||||
"styles": {
|
||||
"color": {
|
||||
"background": "var:preset|color|canvas",
|
||||
"text": "var:preset|color|ink"
|
||||
},
|
||||
"elements": {
|
||||
"button": {
|
||||
"border": { "radius": "2px" },
|
||||
"color": { "background": "var:preset|color|signal-amber", "text": "#ffffff" },
|
||||
"spacing": { "padding": { "top": "0.55rem", "right": "0.9rem", "bottom": "0.55rem", "left": "0.9rem" } },
|
||||
"typography": { "fontFamily": "var:preset|font-family|berkeley-mono", "fontSize": "0.75rem", "letterSpacing": "0.04em" }
|
||||
},
|
||||
"heading": {
|
||||
"typography": { "fontFamily": "var:preset|font-family|alpha-lyrae", "fontWeight": "500", "lineHeight": "1.16" }
|
||||
},
|
||||
"link": {
|
||||
"color": { "text": "var:preset|color|signal-amber" }
|
||||
}
|
||||
},
|
||||
"blocks": {
|
||||
"core/quote": {
|
||||
"border": { "color": "var:preset|color|signal-amber", "left": { "color": "var:preset|color|signal-amber", "width": "4px" } },
|
||||
"color": { "text": "var:preset|color|muted" },
|
||||
"spacing": { "padding": { "left": "1.25rem" } },
|
||||
"typography": { "fontStyle": "italic" }
|
||||
},
|
||||
"core/pullquote": {
|
||||
"border": { "top": { "color": "var:preset|color|signal-amber", "width": "2px" }, "bottom": { "color": "var:preset|color|signal-amber", "width": "2px" } },
|
||||
"typography": { "fontFamily": "var:preset|font-family|alpha-lyrae" }
|
||||
},
|
||||
"core/table": {
|
||||
"border": { "color": "var:preset|color|muted", "width": "1px" }
|
||||
}
|
||||
},
|
||||
"spacing": { "blockGap": "1.5rem" },
|
||||
"typography": { "fontFamily": "var:preset|font-family|crimson-pro", "fontSize": "1.25rem", "lineHeight": "1.55" }
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user