From 2fd7920279b3234a74f84da395c987c00ef77696 Mon Sep 17 00:00:00 2001 From: Nick Cernis Date: Fri, 8 Mar 2019 15:28:49 +0200 Subject: [PATCH 01/13] Add Customizer colors to block editor palette --- config/editor-color-palette.php | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/config/editor-color-palette.php b/config/editor-color-palette.php index aafef315..a372c416 100644 --- a/config/editor-color-palette.php +++ b/config/editor-color-palette.php @@ -2,6 +2,7 @@ /** * Genesis Sample child theme. * + * @package Genesis Sample * @author StudioPress * @license GPL-2.0-or-later * @link https://my.studiopress.com/themes/genesis-sample/ @@ -11,6 +12,16 @@ * Editor color palette config. */ return array( + array( + 'name' => __( 'Custom color', 'genesis-sample' ), // Called “Link Color” in the Customizer options. Renamed because “Link Color” implies it can only be used for links. + 'slug' => 'custom', + 'color' => get_theme_mod( 'genesis_sample_link_color', genesis_sample_customizer_get_default_link_color() ), + ), + array( + 'name' => __( 'Accent color', 'genesis-sample' ), + 'slug' => 'accent', + 'color' => get_theme_mod( 'genesis_sample_accent_color', genesis_sample_customizer_get_default_accent_color() ), + ), array( 'name' => __( 'Light gray', 'genesis-sample' ), 'slug' => 'light-gray', From ee7a71bfa243ae1f62f16e8d9b50ec1ba7d46b58 Mon Sep 17 00:00:00 2001 From: Nick Cernis Date: Mon, 11 Mar 2019 20:25:33 +0100 Subject: [PATCH 02/13] Update custom colors to use consistent slugs between themes See: - https://github.com/studiopress/genesis/issues/2204 - https://github.com/WordPress/gutenberg/issues/7553 --- config/editor-color-palette.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/config/editor-color-palette.php b/config/editor-color-palette.php index a372c416..d979b27c 100644 --- a/config/editor-color-palette.php +++ b/config/editor-color-palette.php @@ -14,12 +14,12 @@ return array( array( 'name' => __( 'Custom color', 'genesis-sample' ), // Called “Link Color” in the Customizer options. Renamed because “Link Color” implies it can only be used for links. - 'slug' => 'custom', + 'slug' => 'theme-primary', 'color' => get_theme_mod( 'genesis_sample_link_color', genesis_sample_customizer_get_default_link_color() ), ), array( 'name' => __( 'Accent color', 'genesis-sample' ), - 'slug' => 'accent', + 'slug' => 'theme-secondary', 'color' => get_theme_mod( 'genesis_sample_accent_color', genesis_sample_customizer_get_default_accent_color() ), ), array( From 64fa4bcf139ca634b3a26dc7cc1af5438e22161f Mon Sep 17 00:00:00 2001 From: Nick Cernis Date: Tue, 12 Mar 2019 22:57:22 +0100 Subject: [PATCH 03/13] Reduce block editor config to single file, add inline styles logic TODO: test and adapt inline styles for use in Genesis Sample. --- config/block-editor-settings.php | 71 ++++++++++++++ config/editor-color-palette.php | 40 -------- config/editor-font-sizes.php | 34 ------- lib/gutenberg/init.php | 16 +++- lib/gutenberg/inline-styles.php | 155 +++++++++++++++++++++++++++++++ 5 files changed, 238 insertions(+), 78 deletions(-) create mode 100644 config/block-editor-settings.php delete mode 100644 config/editor-color-palette.php delete mode 100644 config/editor-font-sizes.php create mode 100644 lib/gutenberg/inline-styles.php diff --git a/config/block-editor-settings.php b/config/block-editor-settings.php new file mode 100644 index 00000000..9c0b4958 --- /dev/null +++ b/config/block-editor-settings.php @@ -0,0 +1,71 @@ + 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700', + 'content-width' => 1062, + 'default-button-bg' => $genesis_sample_link_color, + 'default-button-color' => $genesis_sample_link_color_contrast, + 'default-button-outline-hover' => $genesis_sample_link_color_brightness, + 'default-link-color' => $genesis_sample_link_color, + 'editor-color-palette' => array( + array( + 'name' => __( 'Custom color', 'genesis-sample' ), // Called “Link Color” in the Customizer options. Renamed because “Link Color” implies it can only be used for links. + 'slug' => 'theme-primary', + 'color' => get_theme_mod( 'genesis_sample_link_color', genesis_sample_customizer_get_default_link_color() ), + ), + array( + 'name' => __( 'Accent color', 'genesis-sample' ), + 'slug' => 'theme-secondary', + 'color' => get_theme_mod( 'genesis_sample_accent_color', genesis_sample_customizer_get_default_accent_color() ), + ), + array( + 'name' => __( 'Light gray', 'genesis-sample' ), + 'slug' => 'light-gray', + 'color' => '#f5f5f5', + ), + array( + 'name' => __( 'Medium gray', 'genesis-sample' ), + 'slug' => 'medium-gray', + 'color' => '#999', + ), + array( + 'name' => __( 'Dark gray', 'genesis-sample' ), + 'slug' => 'dark-gray', + 'color' => '#333', + ), + ), + 'editor-font-sizes' => array( + array( + 'name' => __( 'Small', 'genesis-sample' ), + 'size' => 12, + 'slug' => 'small', + ), + array( + 'name' => __( 'Normal', 'genesis-sample' ), + 'size' => 16, + 'slug' => 'normal', + ), + array( + 'name' => __( 'Large', 'genesis-sample' ), + 'size' => 20, + 'slug' => 'large', + ), + array( + 'name' => __( 'Larger', 'genesis-sample' ), + 'size' => 24, + 'slug' => 'larger', + ), + ), +); diff --git a/config/editor-color-palette.php b/config/editor-color-palette.php deleted file mode 100644 index d979b27c..00000000 --- a/config/editor-color-palette.php +++ /dev/null @@ -1,40 +0,0 @@ - __( 'Custom color', 'genesis-sample' ), // Called “Link Color” in the Customizer options. Renamed because “Link Color” implies it can only be used for links. - 'slug' => 'theme-primary', - 'color' => get_theme_mod( 'genesis_sample_link_color', genesis_sample_customizer_get_default_link_color() ), - ), - array( - 'name' => __( 'Accent color', 'genesis-sample' ), - 'slug' => 'theme-secondary', - 'color' => get_theme_mod( 'genesis_sample_accent_color', genesis_sample_customizer_get_default_accent_color() ), - ), - array( - 'name' => __( 'Light gray', 'genesis-sample' ), - 'slug' => 'light-gray', - 'color' => '#f5f5f5', - ), - array( - 'name' => __( 'Medium gray', 'genesis-sample' ), - 'slug' => 'medium-gray', - 'color' => '#999', - ), - array( - 'name' => __( 'Dark gray', 'genesis-sample' ), - 'slug' => 'dark-gray', - 'color' => '#333', - ), -); diff --git a/config/editor-font-sizes.php b/config/editor-font-sizes.php deleted file mode 100644 index 367b4f8f..00000000 --- a/config/editor-font-sizes.php +++ /dev/null @@ -1,34 +0,0 @@ - __( 'Small', 'genesis-sample' ), - 'size' => 12, - 'slug' => 'small', - ), - array( - 'name' => __( 'Normal', 'genesis-sample' ), - 'size' => 16, - 'slug' => 'normal', - ), - array( - 'name' => __( 'Large', 'genesis-sample' ), - 'size' => 20, - 'slug' => 'large', - ), - array( - 'name' => __( 'Larger', 'genesis-sample' ), - 'size' => 24, - 'slug' => 'larger', - ), -); diff --git a/lib/gutenberg/init.php b/lib/gutenberg/init.php index 3a33695a..35805068 100644 --- a/lib/gutenberg/init.php +++ b/lib/gutenberg/init.php @@ -35,9 +35,11 @@ function genesis_sample_enqueue_gutenberg_frontend_styles() { */ function genesis_sample_block_editor_styles() { + $block_editor_settings = genesis_get_config( 'block-editor-settings' ); + wp_enqueue_style( 'genesis-sample-gutenberg-fonts', - 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700', + $block_editor_settings['admin-fonts-url'], array(), CHILD_THEME_VERSION ); @@ -95,25 +97,31 @@ function genesis_sample_blocks_body_classes( $classes ) { // Make media embeds responsive. add_theme_support( 'responsive-embeds' ); +$genesis_sample_block_editor_settings = genesis_get_config( 'block-editor-settings' ); + // Adds support for editor font sizes. add_theme_support( 'editor-font-sizes', - genesis_get_config( 'editor-font-sizes' ) + $genesis_sample_block_editor_settings['editor-font-sizes'] ); // Adds support for editor color palette. add_theme_support( 'editor-color-palette', - genesis_get_config( 'editor-color-palette' ) + $genesis_sample_block_editor_settings['editor-color-palette'] ); +require_once get_stylesheet_directory() . '/lib/gutenberg/inline-styles.php'; + add_action( 'after_setup_theme', 'genesis_sample_content_width', 0 ); /** * Set content width to match the “wide” Gutenberg block width. */ function genesis_sample_content_width() { + $block_editor_settings = genesis_get_config( 'block-editor-settings' ); + // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- See https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/issues/924 - $GLOBALS['content_width'] = apply_filters( 'genesis_sample_content_width', 1062 ); + $GLOBALS['content_width'] = apply_filters( 'genesis_sample_content_width', $block_editor_settings['content-width'] ); } diff --git a/lib/gutenberg/inline-styles.php b/lib/gutenberg/inline-styles.php new file mode 100644 index 00000000..b0b4e64f --- /dev/null +++ b/lib/gutenberg/inline-styles.php @@ -0,0 +1,155 @@ + Date: Tue, 12 Mar 2019 23:01:33 +0100 Subject: [PATCH 04/13] Remove font sizes now supplied by inline CSS --- lib/gutenberg/front-end.css | 19 ------------------- lib/gutenberg/style-editor.css | 19 ------------------- 2 files changed, 38 deletions(-) diff --git a/lib/gutenberg/front-end.css b/lib/gutenberg/front-end.css index 79d96d71..d743e6db 100644 --- a/lib/gutenberg/front-end.css +++ b/lib/gutenberg/front-end.css @@ -1,22 +1,3 @@ -/* Font Sizes ----------------------------------------------------------------------------- */ - -.entry-content p.has-small-font-size { - font-size: 12px; -} - -.entry-content p.has-regular-font-size { - font-size: 16px; -} - -.entry-content p.has-large-font-size { - font-size: 20px; -} - -.entry-content p.has-larger-font-size { - font-size: 24px; -} - /* Drop Caps ---------------------------------------------------------------------------- */ diff --git a/lib/gutenberg/style-editor.css b/lib/gutenberg/style-editor.css index 68a0c99c..6e28e2cd 100755 --- a/lib/gutenberg/style-editor.css +++ b/lib/gutenberg/style-editor.css @@ -270,25 +270,6 @@ p.has-background.light-text a:hover { margin-top: 10px; } -/* Font Sizes ----------------------------------------------------------------------------- */ - -p.has-small-font-size { - font-size: 12px; -} - -p.has-regular-font-size { - font-size: 16px; -} - -p.has-large-font-size { - font-size: 20px; -} - -p.has-larger-font-size { - font-size: 24px; -} - /* Lists ---------------------------------------------------------------------------- */ From eeae74da193a5dbb842b0ce37d30dbbe884c8d2f Mon Sep 17 00:00:00 2001 From: Nick Cernis Date: Tue, 12 Mar 2019 23:04:08 +0100 Subject: [PATCH 05/13] Adjust normal font size to reflect default body size The block editor does not emit inline styles for the 'normal' size. --- config/block-editor-settings.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config/block-editor-settings.php b/config/block-editor-settings.php index 9c0b4958..f48c9608 100644 --- a/config/block-editor-settings.php +++ b/config/block-editor-settings.php @@ -54,7 +54,7 @@ ), array( 'name' => __( 'Normal', 'genesis-sample' ), - 'size' => 16, + 'size' => 18, 'slug' => 'normal', ), array( From ef922782750038173d6723b075d537697bcdefd3 Mon Sep 17 00:00:00 2001 From: Nick Cernis Date: Wed, 13 Mar 2019 10:58:17 +0100 Subject: [PATCH 06/13] Remove color palette CSS - Equivalent front-end CSS is now added in `inline-styles.php`. - Editor CSS is now added inline by WordPress. --- lib/gutenberg/front-end.css | 27 --------------------------- lib/gutenberg/style-editor.css | 27 --------------------------- 2 files changed, 54 deletions(-) diff --git a/lib/gutenberg/front-end.css b/lib/gutenberg/front-end.css index d743e6db..5983e782 100644 --- a/lib/gutenberg/front-end.css +++ b/lib/gutenberg/front-end.css @@ -22,33 +22,6 @@ h6.light { color: #f5f5f5; } -/* Color Palette ----------------------------------------------------------------------------- */ - -.entry-content .has-light-gray-background-color { - background-color: #f5f5f5 !important; -} - -.entry-content .has-light-gray-color { - color: #f5f5f5 !important; -} - -.entry-content .has-medium-gray-background-color { - background-color: #999 !important; -} - -.entry-content .has-medium-gray-color { - color: #999 !important; -} - -.entry-content .has-dark-gray-background-color { - background-color: #333 !important; -} - -.entry-content .has-dark-gray-color { - color: #333 !important; -} - /* Background Color ---------------------------------------------------------------------------- */ diff --git a/lib/gutenberg/style-editor.css b/lib/gutenberg/style-editor.css index 6e28e2cd..506861fd 100755 --- a/lib/gutenberg/style-editor.css +++ b/lib/gutenberg/style-editor.css @@ -224,33 +224,6 @@ p.has-background.light-text a:hover { text-align: center; } -/* Color Palette ----------------------------------------------------------------------------- */ - -.has-light-gray-background-color { - background-color: #f5f5f5; -} - -.has-light-gray-color { - color: #f5f5f5; -} - -.has-medium-gray-background-color { - background-color: #999; -} - -.has-medium-gray-color { - color: #999; -} - -.has-dark-gray-background-color { - background-color: #333; -} - -.has-dark-gray-color { - color: #333; -} - /* Cover Image ---------------------------------------------------------------------------- */ From 987aacce1db0e66ff45498a4dcae36d2b9421c89 Mon Sep 17 00:00:00 2001 From: Nick Cernis Date: Wed, 13 Mar 2019 13:11:25 +0100 Subject: [PATCH 07/13] Fix since versions --- lib/gutenberg/inline-styles.php | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/gutenberg/inline-styles.php b/lib/gutenberg/inline-styles.php index b0b4e64f..4aefbcde 100644 --- a/lib/gutenberg/inline-styles.php +++ b/lib/gutenberg/inline-styles.php @@ -12,7 +12,7 @@ /** * Outputs front-end inline styles based on colors declared in config/block-editor-settings.php. * - * @since 1.2.0 + * @since 2.9.0 */ function genesis_sample_custom_gutenberg_css() { @@ -58,7 +58,7 @@ function genesis_sample_custom_gutenberg_css() { * Note this will appear before the style-editor.css injected by JavaScript, * so overrides will need to have higher specificity. * - * @since 1.2.0 + * @since 2.9.0 */ function genesis_sample_custom_gutenberg_admin_css() { @@ -93,7 +93,7 @@ function genesis_sample_custom_gutenberg_admin_css() { /** * Generate CSS for editor font sizes from the provided theme support. * - * @since 1.2.0 + * @since 2.9.0 * * @return string The CSS for editor font sizes if theme support was declared. */ @@ -121,7 +121,7 @@ function genesis_sample_inline_font_sizes() { /** * Generate CSS for editor colors based on theme color palette support. * - * @since 1.2.0 + * @since 2.9.0 * * @return string The editor colors CSS if `editor-color-palette` theme support was declared. */ From 1086ca53b39ee982244ac75d00e9cf5b818c4629 Mon Sep 17 00:00:00 2001 From: Nick Cernis Date: Wed, 13 Mar 2019 14:12:26 +0100 Subject: [PATCH 08/13] Adjust button styling to account for new inline button styles --- lib/gutenberg/front-end.css | 25 +++++++++++-------------- lib/gutenberg/style-editor.css | 2 -- 2 files changed, 11 insertions(+), 16 deletions(-) diff --git a/lib/gutenberg/front-end.css b/lib/gutenberg/front-end.css index 5983e782..3e6ebfa7 100644 --- a/lib/gutenberg/front-end.css +++ b/lib/gutenberg/front-end.css @@ -129,13 +129,12 @@ h6.light { font-weight: 600; } -.wp-block-button .wp-block-button__link { - background-color: #333; - border: 0; +.site-container .wp-block-button .wp-block-button__link { + border-width: 0; border-radius: 5px; - color: #fff; cursor: pointer; font-size: 16px; + font-family: "Source Sans Pro", sans-serif; font-weight: 600; padding: 15px 30px; text-align: center; @@ -144,26 +143,24 @@ h6.light { width: auto; } -.wp-block-button.is-style-outline .wp-block-button__link:focus, -.wp-block-button.is-style-outline .wp-block-button__link:hover, -.wp-block-button .wp-block-button__link:focus, -.wp-block-button .wp-block-button__link:hover { - box-shadow: inset 0 0 200px rgba(230, 230, 230, 0.15); -} - /* Button Variations */ -.wp-block-button.is-style-squared .wp-block-button__link { +.site-container .wp-block-button.is-style-squared .wp-block-button__link { border-radius: 0; } -.wp-block-button.is-style-outline .wp-block-button__link { +.site-container .wp-block-button.is-style-outline .wp-block-button__link { background-color: transparent; border: 2px solid currentColor; border-radius: 0; - color: #333; padding: 13px 28px; } +.site-container .wp-block-button .wp-block-button__link:focus, +.site-container .wp-block-button .wp-block-button__link:hover, +.site-container .wp-block-button.is-style-outline .wp-block-button__link:focus, +.site-container .wp-block-button.is-style-outline .wp-block-button__link:hover { + box-shadow: inset 0 0 200px rgba(230, 230, 230, 0.25); +} /* Blockquotes and captions ---------------------------------------------------------------------------- */ diff --git a/lib/gutenberg/style-editor.css b/lib/gutenberg/style-editor.css index 506861fd..2558d4e0 100755 --- a/lib/gutenberg/style-editor.css +++ b/lib/gutenberg/style-editor.css @@ -305,10 +305,8 @@ hr.wp-block-separator.is-style-dots { } .wp-block-button .wp-block-button__link { - background-color: #333; border: 0; border-radius: 5px; - color: #fff; cursor: pointer; font-size: 16px; font-family: "Source Sans Pro", sans-serif; From 8bd023dbacb8196748bc46564d222b3dde8e8b6d Mon Sep 17 00:00:00 2001 From: Nick Cernis Date: Wed, 13 Mar 2019 14:13:22 +0100 Subject: [PATCH 09/13] Drop gray colors --- config/block-editor-settings.php | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/config/block-editor-settings.php b/config/block-editor-settings.php index f48c9608..aa3b582f 100644 --- a/config/block-editor-settings.php +++ b/config/block-editor-settings.php @@ -30,21 +30,6 @@ 'slug' => 'theme-secondary', 'color' => get_theme_mod( 'genesis_sample_accent_color', genesis_sample_customizer_get_default_accent_color() ), ), - array( - 'name' => __( 'Light gray', 'genesis-sample' ), - 'slug' => 'light-gray', - 'color' => '#f5f5f5', - ), - array( - 'name' => __( 'Medium gray', 'genesis-sample' ), - 'slug' => 'medium-gray', - 'color' => '#999', - ), - array( - 'name' => __( 'Dark gray', 'genesis-sample' ), - 'slug' => 'dark-gray', - 'color' => '#333', - ), ), 'editor-font-sizes' => array( array( From 18fb5e2271aec59d8d5c5f9b9a8c3f377c441b18 Mon Sep 17 00:00:00 2001 From: Nick Cernis Date: Wed, 13 Mar 2019 14:33:27 +0100 Subject: [PATCH 10/13] Update container block to use inline text and button colors --- config/import/content/homepage.php | 22 +++++++--------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/config/import/content/homepage.php b/config/import/content/homepage.php index befbc4a4..78c6bcfa 100644 --- a/config/import/content/homepage.php +++ b/config/import/content/homepage.php @@ -77,27 +77,19 @@ -
+
-
-

Contact us today

+
+

Contact us today

-
-
Get in touch
- - - -

-
+
+
Get in touch
+
- - - -

-
+
From 2a9038e1ec49cb44711d91fb925d2da122391504 Mon Sep 17 00:00:00 2001 From: Nick Cernis Date: Wed, 13 Mar 2019 21:13:48 +0100 Subject: [PATCH 11/13] Pull colors from config file instead of theme support Fixes an issue @dreamwhisper discovered where changing Customizer colors would not update button colors in the preview until changes are published. --- lib/gutenberg/inline-styles.php | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/lib/gutenberg/inline-styles.php b/lib/gutenberg/inline-styles.php index 4aefbcde..40c23a12 100644 --- a/lib/gutenberg/inline-styles.php +++ b/lib/gutenberg/inline-styles.php @@ -127,14 +127,11 @@ function genesis_sample_inline_font_sizes() { */ function genesis_sample_inline_color_palette() { - $css = ''; - $editor_color_palette = get_theme_support( 'editor-color-palette' ); - - if ( ! $editor_color_palette ) { - return ''; - } + $css = ''; + $block_editor_settings = genesis_get_config( 'block-editor-settings' ); + $editor_color_palette = $block_editor_settings['editor-color-palette']; - foreach ( $editor_color_palette[0] as $color_info ) { + foreach ( $editor_color_palette as $color_info ) { $css .= << Date: Wed, 13 Mar 2019 23:24:25 -0400 Subject: [PATCH 12/13] Fix editor link hover --- lib/gutenberg/style-editor.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/lib/gutenberg/style-editor.css b/lib/gutenberg/style-editor.css index 8dff9622..5d4e35f7 100755 --- a/lib/gutenberg/style-editor.css +++ b/lib/gutenberg/style-editor.css @@ -42,6 +42,12 @@ a { color: #0073e5; } +a:focus, +a:hover { + color: #333; + text-decoration: none; +} + h1, h2, h3, From 111b8aaf00401d7fc20ba61326dbe8b187be0a1c Mon Sep 17 00:00:00 2001 From: Jen Baumann Date: Wed, 13 Mar 2019 23:28:59 -0400 Subject: [PATCH 13/13] Fix editor (admin) outlined button default color --- lib/gutenberg/style-editor.css | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/gutenberg/style-editor.css b/lib/gutenberg/style-editor.css index 5d4e35f7..b28ff22f 100755 --- a/lib/gutenberg/style-editor.css +++ b/lib/gutenberg/style-editor.css @@ -349,7 +349,6 @@ hr.wp-block-separator.is-style-dots { background-color: transparent; border: 2px solid currentColor; border-radius: 0; - color: #333; padding: 13px 28px; }