Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix block border color issues in bundled themes (Pullquote) #2944

Open
wants to merge 12 commits into
base: trunk
Choose a base branch
from
+429 −28
Open

Fix block border color issues in bundled themes (Pullquote) #2944

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
84adec4
Add default theme border colors to Twenty Twenty styles
adamwoodnz Jun 30, 2022
56b10a1
Add border colors to inline styles generated from customizer
adamwoodnz Jul 3, 2022
a549452
Add preset border colors to Twenty Twenty One styles
adamwoodnz Jul 4, 2022
03a5c6b
Add fallbacks to border colors for Twenty Twenty One
adamwoodnz Jul 4, 2022
334bc17
Add support for block border colors in Twenty Nineteen theme styles
adamwoodnz Jul 5, 2022
d68e175
Rebuild Twenty Twenty styles
adamwoodnz Feb 23, 2023
55060f3
Fix Twenty Nineteen white border color styles
adamwoodnz Feb 23, 2023
a0f8727
Fix Twenty Nineteen custom primary and secondary border color styles …
adamwoodnz Jul 24, 2023
14881f0
Revert renaming twentynineteen color filters
adamwoodnz Jul 24, 2023
bc0f2c6
Remove unnecessary var fallbacks from tt1 border color classes
adamwoodnz Jul 24, 2023
0ecf616
Add support for block border color controls in t19, t20 and t21
adamwoodnz Jul 24, 2023
5e7d505
Allow twentytwenty pullquote border styles to be applied in the editor
adamwoodnz Jul 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/wp-content/themes/twentynineteen/functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,9 @@ function twentynineteen_setup() {

// Add support for custom line height.
add_theme_support( 'custom-line-height' );

// Add support for block border controls.
add_theme_support( 'border' );
}
endif;
add_action( 'after_setup_theme', 'twentynineteen_setup' );
Expand Down
13 changes: 11 additions & 2 deletions src/wp-content/themes/twentynineteen/inc/color-patterns.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,13 +133,15 @@ function twentynineteen_custom_colors_css() {

/*
* Set border color for:
* wp block quote
* :focus
* - wp block quote
* - :focus
* - Blocks (primary border color)
*/
blockquote,
.entry .entry-content blockquote,
.entry .entry-content .wp-block-quote:not(.is-large),
.entry .entry-content .wp-block-quote:not(.is-style-large),
.entry .entry-content *[class^="wp-block-"].has-primary-border-color,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
Expand All @@ -159,6 +161,13 @@ function twentynineteen_custom_colors_css() {
border-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
}

/*
* - Blocks (secondary border color)
*/
.entry .entry-content *[class^="wp-block-"].has-secondary-border-color {
border-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness_hover . ' ); /* base: #005177; */
}

.gallery-item > div > a:focus {
box-shadow: 0 0 0 2px hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
}
Expand Down
35 changes: 28 additions & 7 deletions src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -545,9 +545,9 @@
display: block;
}

// If an image does not have a left/center/right alignment,
// it's a direct child of .wp-block-image. If it has no other
// alignment added, we want to make sure the image and its
// If an image does not have a left/center/right alignment,
// it's a direct child of .wp-block-image. If it has no other
// alignment added, we want to make sure the image and its
// caption do not extend beyond the width of the text column.
&:not(.alignwide):not(.alignfull) > img,
&:not(.alignwide):not(.alignfull) > a > img,
Expand Down Expand Up @@ -832,7 +832,7 @@
//! Group
.wp-block-group {

// When the Group block is standard/wide, we need to prevent full-aligned
// When the Group block is standard/wide, we need to prevent full-aligned
// child blocks from expanding out of their container.
&:not(.alignfull) > .wp-block-group__inner-container > .alignfull,
&:not(.alignfull) > .wp-block-group__inner-container > .wp-block-image > img {
Expand Down Expand Up @@ -873,7 +873,7 @@
}
}

// If the Group block is full-width, it does not need this extra padding.
// If the Group block is full-width, it does not need this extra padding.
&.alignfull {
padding-left: 0;
padding-right: 0;
Expand All @@ -888,15 +888,15 @@
&:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
width: 100%;
max-width: 100%;

@include media(tablet) {
width: calc( 100% + #{$size__spacing-unit * 2} );
max-width: calc( 100% + #{$size__spacing-unit * 2} );
margin-left: -#{$size__spacing-unit};
}
}
}

}

//! Latest Comments
Expand Down Expand Up @@ -1045,4 +1045,25 @@
.wp-block-pullquote.is-style-solid-color blockquote.has-white-color {
color: #FFF;
}

//! Custom border colors
.has-primary-border-color {
border-color: $color__border-block-primary;
}

.has-secondary-border-color {
border-color: $color__border-block-secondary;
}

.has-dark-gray-border-color {
border-color: $color__border-block-dark-gray;
}

.has-light-gray-border-color {
border-color: $color__border-block-light-gray;
}

.has-white-border-color {
border-color: $color__border-block-white;
}
}
33 changes: 22 additions & 11 deletions src/wp-content/themes/twentynineteen/sass/variables-site/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,42 @@
// Default palette
$color__primary: #0073aa;
$color__secondary: #005177;
$color__dark-gray: #111;
$color__light-gray: #767676;
$color__white: #fff;

// Backgrounds
$color__background-body: #fff;
$color__background-input: #fff;
$color__background-body: $color__white;
$color__background-input: $color__white;
$color__background-screen: #f1f1f1;
$color__background-hr: #ccc;
$color__background-button: #0073aa;
$color__background-button-hover: #111;
$color__background-button: $color__primary;
$color__background-button-hover: $color__dark-gray;
$color__background-pre: #eee;
$color__background-ins: #fff9c0;
$color__background_selection: mix( $color__background-body, $color__background-button, 75% ); // lighten( salmon, 22.5% ); // lighten( #0999d4, 48% );

// Text
$color__text-main: #111;
$color__text-light: #767676;
$color__text-hover: lighten( #111, 22.5% );
$color__text-main: $color__dark-gray;
$color__text-light: $color__light-gray;
$color__text-hover: lighten( $color__dark-gray, 22.5% );
$color__text-screen: #21759b;
$color__text-input: #666;
$color__text-input-focus: #111;
$color__text-input-focus: $color__dark-gray;

// Links
$color__link: #0073aa;
$color__link-visited: #0073aa;
$color__link: $color__primary;
$color__link-visited: $color__primary;
$color__link-hover: darken( $color__link, 10% );

// Borders
$color__border: #ccc;
$color__border-link: #0073aa;
$color__border-link: $color__primary;
$color__border-block-primary: $color__primary;
$color__border-block-secondary: $color__secondary;
$color__border-block-dark-gray: $color__dark-gray;
$color__border-block-light-gray: $color__light-gray;
$color__border-block-white: $color__white;
$color__border-link-hover: darken( $color__link, 10% );
$color__border-button: #ccc #ccc #bbb;
$color__border-button-hover: #ccc #bbb #aaa;
Expand Down
20 changes: 20 additions & 0 deletions src/wp-content/themes/twentynineteen/style-rtl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6431,6 +6431,26 @@ body.page .main-navigation {
color: #FFF;
}

.entry .entry-content .has-primary-border-color {
border-color: #0073aa;
}

.entry .entry-content .has-secondary-border-color {
border-color: #005177;
}

.entry .entry-content .has-dark-gray-border-color {
border-color: #111;
}

.entry .entry-content .has-light-gray-border-color {
border-color: #767676;
}

.entry .entry-content .has-white-border-color {
border-color: #fff;
}

/* Media */
.page-content .wp-smiley,
.entry-content .wp-smiley,
Expand Down
20 changes: 20 additions & 0 deletions src/wp-content/themes/twentynineteen/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6443,6 +6443,26 @@ body.page .main-navigation {
color: #FFF;
}

.entry .entry-content .has-primary-border-color {
border-color: #0073aa;
}

.entry .entry-content .has-secondary-border-color {
border-color: #005177;
}

.entry .entry-content .has-dark-gray-border-color {
border-color: #111;
}

.entry .entry-content .has-light-gray-border-color {
border-color: #767676;
}

.entry .entry-content .has-white-border-color {
border-color: #fff;
}

/* Media */
.page-content .wp-smiley,
.entry-content .wp-smiley,
Expand Down
5 changes: 4 additions & 1 deletion src/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -801,13 +801,16 @@ hr.wp-block-separator.is-style-dots::before {
/* Block: Pullquote -------------------------- */

.editor-styles-wrapper .wp-block-pullquote {
border: none;
color: inherit;
padding: 0;
position: relative;
text-align: center;
}

.editor-styles-wrapper .wp-block-pullquote:not(.has-border-color):not([style*=border-width]) {
border: none;
}

.editor-styles-wrapper .wp-block-pullquote::before {
background: #fff;
border-radius: 50%;
Expand Down
5 changes: 4 additions & 1 deletion src/wp-content/themes/twentytwenty/assets/css/editor-style-block.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -805,13 +805,16 @@ hr.wp-block-separator.is-style-dots::before {
/* Block: Pullquote -------------------------- */

.editor-styles-wrapper .wp-block-pullquote {
border: none;
color: inherit;
padding: 0;
position: relative;
text-align: center;
}

.editor-styles-wrapper .wp-block-pullquote:not(.has-border-color):not([style*=border-width]) {
border: none;
}

.editor-styles-wrapper .wp-block-pullquote::before {
background: #fff;
border-radius: 50%;
Expand Down
10 changes: 8 additions & 2 deletions src/wp-content/themes/twentytwenty/functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -601,6 +601,9 @@ function twentytwenty_block_editor_settings() {
if ( '#ffffff' === strtolower( twentytwenty_get_color_for_area( 'content', 'text' ) ) ) {
add_theme_support( 'dark-editor-style' );
}

// Add support for block border controls.
add_theme_support( 'border' );
}

add_action( 'after_setup_theme', 'twentytwenty_block_editor_settings' );
Expand Down Expand Up @@ -739,24 +742,27 @@ function twentytwenty_get_elements_array() {
'content' => array(
'accent' => array(
'color' => array( '.color-accent', '.color-accent-hover:hover', '.color-accent-hover:focus', ':root .has-accent-color', '.has-drop-cap:not(:focus):first-letter', '.wp-block-button.is-style-outline', 'a' ),
'border-color' => array( 'blockquote', '.border-color-accent', '.border-color-accent-hover:hover', '.border-color-accent-hover:focus' ),
'border-color' => array( 'blockquote', '.border-color-accent', '.border-color-accent-hover:hover', '.border-color-accent-hover:focus', ':root .has-accent-border-color' ),
'background-color' => array( 'button', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file .wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.bg-accent', '.bg-accent-hover:hover', '.bg-accent-hover:focus', ':root .has-accent-background-color', '.comment-reply-link' ),
'fill' => array( '.fill-children-accent', '.fill-children-accent *' ),
),
'background' => array(
'color' => array( ':root .has-background-color', 'button', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.wp-block-button', '.comment-reply-link', '.has-background.has-primary-background-color:not(.has-text-color)', '.has-background.has-primary-background-color *:not(.has-text-color)', '.has-background.has-accent-background-color:not(.has-text-color)', '.has-background.has-accent-background-color *:not(.has-text-color)' ),
'background-color' => array( ':root .has-background-background-color' ),
'border-color' => array( ':root .has-background-border-color' ),
),
'text' => array(
'color' => array( 'body', '.entry-title a', ':root .has-primary-color' ),
'background-color' => array( ':root .has-primary-background-color' ),
'border-color' => array( ':root .has-primary-border-color' ),
),
'secondary' => array(
'color' => array( 'cite', 'figcaption', '.wp-caption-text', '.post-meta', '.entry-content .wp-block-archives li', '.entry-content .wp-block-categories li', '.entry-content .wp-block-latest-posts li', '.wp-block-latest-comments__comment-date', '.wp-block-latest-posts__post-date', '.wp-block-embed figcaption', '.wp-block-image figcaption', '.wp-block-pullquote cite', '.comment-metadata', '.comment-respond .comment-notes', '.comment-respond .logged-in-as', '.pagination .dots', '.entry-content hr:not(.has-background)', 'hr.styled-separator', ':root .has-secondary-color' ),
'background-color' => array( ':root .has-secondary-background-color' ),
'border-color' => array( ':root .has-secondary-border-color' ),
),
'borders' => array(
'border-color' => array( 'pre', 'fieldset', 'input', 'textarea', 'table', 'table *', 'hr' ),
'border-color' => array( 'pre', 'fieldset', 'input', 'textarea', 'table', 'table *', 'hr', ':root .has-subtle-background-border-color' ),
'background-color' => array( 'caption', 'code', 'code', 'kbd', 'samp', '.wp-block-table.is-style-stripes tbody tr:nth-child(odd)', ':root .has-subtle-background-background-color' ),
'border-bottom-color' => array( '.wp-block-table.is-style-stripes' ),
'border-top-color' => array( '.wp-block-latest-posts.is-grid li' ),
Expand Down
19 changes: 19 additions & 0 deletions src/wp-content/themes/twentytwenty/style-rtl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2740,6 +2740,10 @@ h2.entry-title {
color: #fff;
}

:root .has-accent-border-color {
border-color: #cd2653;
}

:root .has-primary-color {
color: #000;
}
Expand All @@ -2749,6 +2753,10 @@ h2.entry-title {
color: #f5efe0;
}

:root .has-primary-border-color {
border-color: #000;
}

:root .has-secondary-color {
color: #6d6d6d;
}
Expand All @@ -2758,6 +2766,10 @@ h2.entry-title {
color: #fff;
}

:root .has-secondary-border-color {
border-color: #6d6d6d;
}

:root .has-subtle-background-color {
color: #dcd7ca;
}
Expand All @@ -2767,6 +2779,10 @@ h2.entry-title {
color: #000;
}

:root .has-subtle-background-border-color {
border-color: #dcd7ca;
}

:root .has-background-color {
color: #f5efe0;
}
Expand All @@ -2776,6 +2792,9 @@ h2.entry-title {
color: #000;
}

:root .has-background-border-color {
border-color: #f5efe0;
}

/* Block Typography Classes ------------------ */

Expand Down