From adb8e018d8bbc49d5a6af3ebc49b5ec5d3af065a Mon Sep 17 00:00:00 2001 From: Jason Crist Date: Wed, 17 Mar 2021 13:31:06 -0400 Subject: [PATCH 1/3] Added configurable core/code block attributes --- blank-canvas-blocks/experimental-theme.json | 12 ++++++++++++ blank-canvas-blocks/sass/blocks/_code.scss | 9 +++++++++ blank-canvas-blocks/sass/ponyfill.scss | 1 + 3 files changed, 22 insertions(+) create mode 100644 blank-canvas-blocks/sass/blocks/_code.scss diff --git a/blank-canvas-blocks/experimental-theme.json b/blank-canvas-blocks/experimental-theme.json index f0f5750bcc..3d27278c5b 100644 --- a/blank-canvas-blocks/experimental-theme.json +++ b/blank-canvas-blocks/experimental-theme.json @@ -180,6 +180,18 @@ "left": "calc( 2 * var(--wp--custom--padding--horizontal) )" } }, + "code": { + "color": { + "text": "inherit", + "background": "none" + }, + "border": { + "radius": "0", + "color": "#cccccc", + "width": "2px", + "style": "solid" + } + }, "navigation": { "mobile": { "menu": { diff --git a/blank-canvas-blocks/sass/blocks/_code.scss b/blank-canvas-blocks/sass/blocks/_code.scss new file mode 100644 index 0000000000..c2a12e8664 --- /dev/null +++ b/blank-canvas-blocks/sass/blocks/_code.scss @@ -0,0 +1,9 @@ +// TODO: This shouldn't be necessary when either of these land: https://github.com/WordPress/gutenberg/pull/27582 || https://github.com/WordPress/gutenberg/issues/29778 +.wp-block-code { + border-radius: var(--wp--custom--code--border--radius); + border-width: var(--wp--custom--code--border--width); + border-style: var(--wp--custom--code--border--style); + border-color: var(--wp--custom--code--border--color); + color: var(--wp--custom--code--color--text); + background-color: var(--wp--custom--code--color--background); +} \ No newline at end of file diff --git a/blank-canvas-blocks/sass/ponyfill.scss b/blank-canvas-blocks/sass/ponyfill.scss index 6f711a92fc..8321e1a779 100644 --- a/blank-canvas-blocks/sass/ponyfill.scss +++ b/blank-canvas-blocks/sass/ponyfill.scss @@ -20,3 +20,4 @@ @import "blocks/group"; @import "blocks/separator"; @import "blocks/video"; +@import "blocks/code"; From 20afdb543f9bcb545896ae399299f601882f8365 Mon Sep 17 00:00:00 2001 From: Jason Crist Date: Wed, 17 Mar 2021 13:32:19 -0400 Subject: [PATCH 2/3] Refactored alignmnet to be less specific so attributes like 'padding' could be targeted by simple block-specific selectors --- blank-canvas-blocks/sass/base/_alignment.scss | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/blank-canvas-blocks/sass/base/_alignment.scss b/blank-canvas-blocks/sass/base/_alignment.scss index 71b9c32ea8..bff98f1a9a 100644 --- a/blank-canvas-blocks/sass/base/_alignment.scss +++ b/blank-canvas-blocks/sass/base/_alignment.scss @@ -15,26 +15,29 @@ body { // This is the default with of blocks on the page with not assign alignwide or alignfull .wp-site-blocks *[class*="__inner-container"] > .wp-block-group, .wp-site-blocks > *:not(.wp-block-post-content):not(.wp-block-template-part), -.wp-site-blocks .wp-block-post-content > * { +.wp-block-post-content > * { max-width: var(--wp--custom--width--default); margin-left: auto; margin-right: auto; - padding: 0 var(--wp--custom--margin--horizontal); + padding-left: var(--wp--custom--margin--horizontal); + padding-right: var(--wp--custom--margin--horizontal); } // Align the block to be on the "wider" side of things .wp-site-blocks *[class*="__inner-container"] > .alignwide, -.wp-site-blocks .alignwide { +.alignwide { width: var(--wp--custom--width--wide); max-width: 100%; } // The block should span the full width of the page .wp-site-blocks *[class*="__inner-container"] > .alignfull, -.wp-site-blocks .alignfull { +.alignfull { max-width: unset; margin-left: unset; margin-right: unset; + padding-left: unset; + padding-right: unset; } // Align Center From 5f2c607f8a3a021128a829859c4563cd02d8819c Mon Sep 17 00:00:00 2001 From: Jason Crist Date: Wed, 17 Mar 2021 13:32:34 -0400 Subject: [PATCH 3/3] Built css --- blank-canvas-blocks/assets/ponyfill.css | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/blank-canvas-blocks/assets/ponyfill.css b/blank-canvas-blocks/assets/ponyfill.css index 3baa6cdaa4..774b37c451 100644 --- a/blank-canvas-blocks/assets/ponyfill.css +++ b/blank-canvas-blocks/assets/ponyfill.css @@ -77,24 +77,27 @@ body { .wp-site-blocks *[class*="__inner-container"] > .wp-block-group, .wp-site-blocks > *:not(.wp-block-post-content):not(.wp-block-template-part), -.wp-site-blocks .wp-block-post-content > * { +.wp-block-post-content > * { max-width: var(--wp--custom--width--default); margin-left: auto; margin-right: auto; - padding: 0 var(--wp--custom--margin--horizontal); + padding-left: var(--wp--custom--margin--horizontal); + padding-right: var(--wp--custom--margin--horizontal); } .wp-site-blocks *[class*="__inner-container"] > .alignwide, -.wp-site-blocks .alignwide { +.alignwide { width: var(--wp--custom--width--wide); max-width: 100%; } .wp-site-blocks *[class*="__inner-container"] > .alignfull, -.wp-site-blocks .alignfull { +.alignfull { max-width: unset; margin-left: unset; margin-right: unset; + padding-left: unset; + padding-right: unset; } .aligncenter { @@ -473,4 +476,13 @@ p.has-drop-cap:not(:focus):first-letter { text-align: var(--wp--custom--video--caption--text-align); } +.wp-block-code { + border-radius: var(--wp--custom--code--border--radius); + border-width: var(--wp--custom--code--border--width); + border-style: var(--wp--custom--code--border--style); + border-color: var(--wp--custom--code--border--color); + color: var(--wp--custom--code--color--text); + background-color: var(--wp--custom--code--color--background); +} + /*# sourceMappingURL=ponyfill.css.map */ \ No newline at end of file