From 8cd004b767ac53616c7b41e4e8501bdab28048cf Mon Sep 17 00:00:00 2001 From: Nick Cernis Date: Fri, 12 Oct 2018 22:37:00 +0200 Subject: [PATCH 1/6] Extract Gutenberg functionality - Moves all Gutenberg content into own module/folder - Extracts Gutenberg front-end CSS, loaded separately - Moves Gutenberg back-end styles to lib/gutenberg/ folder --- functions.php | 78 +----- lib/gutenberg/front-end.css | 228 ++++++++++++++++ lib/gutenberg/init.php | 105 ++++++++ .../gutenberg/style-editor.css | 0 style.css | 243 ------------------ 5 files changed, 340 insertions(+), 314 deletions(-) create mode 100644 lib/gutenberg/front-end.css create mode 100644 lib/gutenberg/init.php rename style-editor.css => lib/gutenberg/style-editor.css (100%) diff --git a/functions.php b/functions.php index 808d8f57..ca5edbc5 100755 --- a/functions.php +++ b/functions.php @@ -13,6 +13,11 @@ // Starts the engine. require_once get_template_directory() . '/lib/init.php'; +// Defines the child theme (do not remove). +define( 'CHILD_THEME_NAME', 'Genesis Sample' ); +define( 'CHILD_THEME_URL', 'https://www.studiopress.com/' ); +define( 'CHILD_THEME_VERSION', '2.7.0' ); + // Sets up the Theme. require_once get_stylesheet_directory() . '/lib/theme-defaults.php'; @@ -46,10 +51,8 @@ function genesis_sample_localization_setup() { // Adds the Genesis Connect WooCommerce notice. require_once get_stylesheet_directory() . '/lib/woocommerce/woocommerce-notice.php'; -// Defines the child theme (do not remove). -define( 'CHILD_THEME_NAME', 'Genesis Sample' ); -define( 'CHILD_THEME_URL', 'https://www.studiopress.com/' ); -define( 'CHILD_THEME_VERSION', '2.7.0' ); +// Adds Gutenberg support. +require_once get_stylesheet_directory() . '/lib/gutenberg/init.php'; add_action( 'wp_enqueue_scripts', 'genesis_sample_enqueue_scripts_styles' ); /** @@ -178,73 +181,6 @@ function genesis_sample_content_width() { // Adds image sizes. add_image_size( 'sidebar-featured', 75, 75, true ); -add_action( 'enqueue_block_editor_assets', 'genesis_sample_block_editor_styles' ); -/** - * Enqueues block editor style. - */ -function genesis_sample_block_editor_styles() { - - wp_enqueue_style( 'genesis-sample-block-editor-fonts', '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700', array(), CHILD_THEME_VERSION ); - wp_enqueue_style( 'genesis-sample-block-editor-styles', get_theme_file_uri( '/style-editor.css' ), false, '1.0', 'all' ); - -} - -// Adds support for block alignments. -add_theme_support( 'align-wide' ); - -// Adds support for editor font sizes. -add_theme_support( - 'editor-font-sizes', - array( - array( - 'name' => __( 'small', 'genesis-sample' ), - 'shortName' => __( 'S', 'genesis-sample' ), - 'size' => 12, - 'slug' => 'small', - ), - array( - 'name' => __( 'regular', 'genesis-sample' ), - 'shortName' => __( 'M', 'genesis-sample' ), - 'size' => 16, - 'slug' => 'regular', - ), - array( - 'name' => __( 'large', 'genesis-sample' ), - 'shortName' => __( 'L', 'genesis-sample' ), - 'size' => 20, - 'slug' => 'large', - ), - array( - 'name' => __( 'larger', 'genesis-sample' ), - 'shortName' => __( 'XL', 'genesis-sample' ), - 'size' => 24, - 'slug' => 'larger', - ), - ) -); - -// Adds support for editor color palette. -add_theme_support( - 'editor-color-palette', - array( - 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', - ), - ) -); - // Adds support for after entry widget. add_theme_support( 'genesis-after-entry-widget-area' ); diff --git a/lib/gutenberg/front-end.css b/lib/gutenberg/front-end.css new file mode 100644 index 00000000..2e93d8fc --- /dev/null +++ b/lib/gutenberg/front-end.css @@ -0,0 +1,228 @@ +/* Gutenberg Blocks +---------------------------------------------------------------------------------------------------- */ + +.wp-block-preformatted { + white-space: pre-wrap; +} + +hr.wp-block-separator { + border: none; + border-top: 1px solid #eee; + margin: 1.65em auto; +} + +.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { + max-width: 100px +} + +.wp-block-audio audio { + width: 100%; +} + +.content .wp-block-button .wp-block-button__link { + background-color: #333; + border: 0; + border-radius: 0; + color: #fff; + cursor: pointer; + font-size: 16px; + font-weight: 600; + padding: 15px 30px; + text-align: center; + text-decoration: none; + white-space: normal; + width: auto; +} + +.content .wp-block-button .wp-block-button__link:focus, +.content .wp-block-button .wp-block-button__link:hover { + background-color: #0073e5; + color: #fff; +} + +.wp-block-button.alignleft, +.wp-block-cover-image.alignleft { + margin-right: 2em; +} + +.wp-block-button.alignright, +.wp-block-cover-image.alignright { + margin-left: 2em; +} + +.wp-block-image.alignwide, +.wp-block-image.alignfull, +.wp-block-embed.alignwide, +.wp-block-embed.alignfull { + margin-bottom: 30px; +} + +.entry-content .wp-block-columns { + display: block; +} + +.entry-content .wp-block-columns .wp-block-column { + margin: 0; +} + +/* Columns +--------------------------------------------- */ + +.entry-content .wp-block-columns { + margin-bottom: 30px; +} + +.entry-content .wp-block-columns .wp-block-column { + margin-left: 15px; + margin-right: 15px; +} + +.entry-content .wp-block-columns .wp-block-column:first-of-type { + margin-left: 0; +} + +.entry-content .wp-block-columns .wp-block-column:last-of-type { + margin-right: 0; +} + +/* Cover Image +--------------------------------------------- */ + +.full-width-content .entry-content .wp-block-cover-image.alignfull { + width: 100vw; +} + +.entry-content .wp-block-cover-image .wp-block-cover-image-text { + font-size: 48px; +} + +/* Figcaption +--------------------------------------------- */ + +.entry-content .wp-block-image figcaption { + color: #666; + font-size: 14px; + font-style: italic; + margin-bottom: 30px; + margin-top: 10px; +} + +/* 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; +} + +/* Color Palette +--------------------------------------------- */ + +.entry-content .has-light-gray-background-color { + background-color: #f5f5f5; +} + +.entry-content .has-light-gray-color { + color: #f5f5f5; +} + +.entry-content .has-medium-gray-background-color { + background-color: #999; +} + +.entry-content .has-medium-gray-color { + color: #999; +} + +.entry-content .has-dark-gray-background-color { + background-color: #333; +} + +.entry-content .has-dark-gray-color { + color: #333; +} + +/* Gallery +--------------------------------------------- */ + +.entry-content .wp-block-gallery { + padding-left: 0; +} + +/* Alignment +--------------------------------------------- */ + +.full-width-content .entry-content .alignfull { + margin-left: calc( -100vw / 2 + 100% / 2 ); + margin-right: calc( -100vw / 2 + 100% / 2 ); + max-width: 100vw; +} + +/* Background Color +--------------------------------------------- */ + +.entry-content p.has-background { + padding: 25px 30px; +} + +.entry-content p.has-background.box-shadow { + box-shadow: 0 0 20px rgba(0,0,0,0.1); +} + +.entry-content p.has-background.light-text a { + color: #fff; + text-decoration: underline; +} + +.entry-content p.has-background.light-text a:focus, +.entry-content p.has-background.light-text a:hover { + text-decoration: none; +} + +/* Blockquote +--------------------------------------------- */ + +.entry-content .wp-block-quote cite { + color: #666; + display: block; + font-size: 14px; + margin-top: -25px; +} + +/* Media Queries +--------------------------------------------- */ + +@media only screen and (min-width: 510px) { + + .entry-content .wp-block-columns { + display: flex; + } + + .entry-content .wp-block-columns .wp-block-column { + flex: 1; + margin-left: 15px; + margin-right: 15px; + } + +} + +@media only screen and (min-width: 1062px) { + + .full-width-content .entry-content .alignwide { + margin-left: -180px; + margin-right: -180px; + min-width: 1062px; + } + +} diff --git a/lib/gutenberg/init.php b/lib/gutenberg/init.php new file mode 100644 index 00000000..c58e906e --- /dev/null +++ b/lib/gutenberg/init.php @@ -0,0 +1,105 @@ + __( 'small', 'genesis-sample' ), + 'shortName' => __( 'S', 'genesis-sample' ), + 'size' => 12, + 'slug' => 'small', + ), + array( + 'name' => __( 'regular', 'genesis-sample' ), + 'shortName' => __( 'M', 'genesis-sample' ), + 'size' => 16, + 'slug' => 'regular', + ), + array( + 'name' => __( 'large', 'genesis-sample' ), + 'shortName' => __( 'L', 'genesis-sample' ), + 'size' => 20, + 'slug' => 'large', + ), + array( + 'name' => __( 'larger', 'genesis-sample' ), + 'shortName' => __( 'XL', 'genesis-sample' ), + 'size' => 24, + 'slug' => 'larger', + ), + ) +); + +// Adds support for editor color palette. +add_theme_support( + 'editor-color-palette', + array( + 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/style-editor.css b/lib/gutenberg/style-editor.css similarity index 100% rename from style-editor.css rename to lib/gutenberg/style-editor.css diff --git a/style.css b/style.css index 19f92ac8..3d45c9ec 100755 --- a/style.css +++ b/style.css @@ -40,16 +40,6 @@ - Search Form - Titles - WordPress -- WordPress Editor - - Alignment - - Background Color - - Blockquote - - Color Palette - - Columns - - Cover Image - - Figcaption - - Font Sizes - - Gallery - Widgets - Featured Content - Plugins @@ -69,7 +59,6 @@ - Entry Comments - Sidebar - Footer Widgets -- Gutenberg Blocks - Site Footer - Media Queries - Min-width: 960px @@ -767,146 +756,6 @@ img.alignright, margin: 0 0 30px; } - -/* WordPress Editor ----------------------------------------------------------------------------------------------------- */ - -/* Alignment ---------------------------------------------- */ - -.full-width-content .entry-content .alignfull { - margin-left: calc( -100vw / 2 + 100% / 2 ); - margin-right: calc( -100vw / 2 + 100% / 2 ); - max-width: 100vw; -} - -/* Background Color ---------------------------------------------- */ - -.entry-content p.has-background { - padding: 25px 30px; -} - -.entry-content p.has-background.box-shadow { - box-shadow: 0 0 20px rgba(0,0,0,0.1); -} - -.entry-content p.has-background.light-text a { - color: #fff; - text-decoration: underline; -} - -.entry-content p.has-background.light-text a:focus, -.entry-content p.has-background.light-text a:hover { - text-decoration: none; -} - -/* Blockquote ---------------------------------------------- */ - -.entry-content .wp-block-quote cite { - color: #666; - display: block; - font-size: 14px; - margin-top: -25px; -} - -/* Color Palette ---------------------------------------------- */ - -.entry-content .has-light-gray-background-color { - background-color: #f5f5f5; -} - -.entry-content .has-light-gray-color { - color: #f5f5f5; -} - -.entry-content .has-medium-gray-background-color { - background-color: #999; -} - -.entry-content .has-medium-gray-color { - color: #999; -} - -.entry-content .has-dark-gray-background-color { - background-color: #333; -} - -.entry-content .has-dark-gray-color { - color: #333; -} - -/* Columns ---------------------------------------------- */ - -.entry-content .wp-block-columns { - margin-bottom: 30px; -} - -.entry-content .wp-block-columns .wp-block-column { - margin-left: 15px; - margin-right: 15px; -} - -.entry-content .wp-block-columns .wp-block-column:first-of-type { - margin-left: 0; -} - -.entry-content .wp-block-columns .wp-block-column:last-of-type { - margin-right: 0; -} - -/* Cover Image ---------------------------------------------- */ - -.full-width-content .entry-content .wp-block-cover-image.alignfull { - width: 100vw; -} - -.entry-content .wp-block-cover-image .wp-block-cover-image-text { - font-size: 48px; -} - -/* Figcaption ---------------------------------------------- */ - -.entry-content .wp-block-image figcaption { - color: #666; - font-size: 14px; - font-style: italic; - margin-bottom: 30px; - margin-top: 10px; -} - -/* 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; -} - -/* Gallery ---------------------------------------------- */ - -.entry-content .wp-block-gallery { - padding-left: 0; -} - - /* Widgets ---------------------------------------------------------------------------------------------------- */ @@ -1478,73 +1327,6 @@ p.entry-meta { margin-bottom: 20px; } -/* Gutenberg Blocks ----------------------------------------------------------------------------------------------------- */ - -.wp-block-preformatted { - white-space: pre-wrap; -} - -hr.wp-block-separator { - border: none; - border-top: 1px solid #eee; - margin: 1.65em auto; -} - -.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { - max-width: 100px -} - -.wp-block-audio audio { - width: 100%; -} - -.content .wp-block-button .wp-block-button__link { - background-color: #333; - border: 0; - border-radius: 0; - color: #fff; - cursor: pointer; - font-size: 16px; - font-weight: 600; - padding: 15px 30px; - text-align: center; - text-decoration: none; - white-space: normal; - width: auto; -} - -.content .wp-block-button .wp-block-button__link:focus, -.content .wp-block-button .wp-block-button__link:hover { - background-color: #0073e5; - color: #fff; -} - -.wp-block-button.alignleft, -.wp-block-cover-image.alignleft { - margin-right: 2em; -} - -.wp-block-button.alignright, -.wp-block-cover-image.alignright { - margin-left: 2em; -} - -.wp-block-image.alignwide, -.wp-block-image.alignfull, -.wp-block-embed.alignwide, -.wp-block-embed.alignfull { - margin-bottom: 30px; -} - -.entry-content .wp-block-columns { - display: block; -} - -.entry-content .wp-block-columns .wp-block-column { - margin: 0; -} - /* Footer Widgets ---------------------------------------------------------------------------------------------------- */ @@ -1592,20 +1374,6 @@ hr.wp-block-separator { /* Media Queries ---------------------------------------------------------------------------------------------------- */ -@media only screen and (min-width: 510px) { - - .entry-content .wp-block-columns { - display: flex; - } - - .entry-content .wp-block-columns .wp-block-column { - flex: 1; - margin-left: 15px; - margin-right: 15px; - } - -} - @media only screen and (min-width: 960px) { /* Site Header @@ -1787,17 +1555,6 @@ hr.wp-block-separator { } -@media only screen and (min-width: 1062px) { - - .full-width-content .entry-content .alignwide { - margin-left: -180px; - margin-right: -180px; - min-width: 1062px; - } - -} - - /* Print Styles ---------------------------------------------------------------------------------------------------- */ From 4c1475b71178cf1dacedcd93b1225a3ee74e8537 Mon Sep 17 00:00:00 2001 From: Nick Cernis Date: Sat, 13 Oct 2018 10:35:14 +0200 Subject: [PATCH 2/6] Improve Gutenberg CSS organisation --- lib/gutenberg/front-end.css | 207 +++++++++++++++++------------------- 1 file changed, 97 insertions(+), 110 deletions(-) diff --git a/lib/gutenberg/front-end.css b/lib/gutenberg/front-end.css index 2e93d8fc..b02ef8fe 100644 --- a/lib/gutenberg/front-end.css +++ b/lib/gutenberg/front-end.css @@ -1,45 +1,73 @@ -/* Gutenberg Blocks ----------------------------------------------------------------------------------------------------- */ +/* Font Sizes +--------------------------------------------- */ -.wp-block-preformatted { - white-space: pre-wrap; +.entry-content p.has-small-font-size{ + font-size: 12px; } -hr.wp-block-separator { - border: none; - border-top: 1px solid #eee; - margin: 1.65em auto; +.entry-content p.has-regular-font-size{ + font-size: 16px; } -.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { - max-width: 100px +.entry-content p.has-large-font-size{ + font-size: 20px; } -.wp-block-audio audio { - width: 100%; +.entry-content p.has-larger-font-size{ + font-size: 24px; } -.content .wp-block-button .wp-block-button__link { +/* Color Palette +--------------------------------------------- */ + +.entry-content .has-light-gray-background-color { + background-color: #f5f5f5; +} + +.entry-content .has-light-gray-color { + color: #f5f5f5; +} + +.entry-content .has-medium-gray-background-color { + background-color: #999; +} + +.entry-content .has-medium-gray-color { + color: #999; +} + +.entry-content .has-dark-gray-background-color { background-color: #333; - border: 0; - border-radius: 0; - color: #fff; - cursor: pointer; - font-size: 16px; - font-weight: 600; - padding: 15px 30px; - text-align: center; - text-decoration: none; - white-space: normal; - width: auto; } -.content .wp-block-button .wp-block-button__link:focus, -.content .wp-block-button .wp-block-button__link:hover { - background-color: #0073e5; +.entry-content .has-dark-gray-color { + color: #333; +} + +/* Background Color +--------------------------------------------- */ + +.entry-content p.has-background { + padding: 25px 30px; +} + +.entry-content p.has-background.box-shadow { + box-shadow: 0 0 20px rgba(0,0,0,0.1); +} + +.entry-content p.has-background.light-text a { color: #fff; + text-decoration: underline; +} + +.entry-content p.has-background.light-text a:focus, +.entry-content p.has-background.light-text a:hover { + text-decoration: none; } +/* Alignment +--------------------------------------------- */ + .wp-block-button.alignleft, .wp-block-cover-image.alignleft { margin-right: 2em; @@ -57,18 +85,17 @@ hr.wp-block-separator { margin-bottom: 30px; } -.entry-content .wp-block-columns { - display: block; -} - -.entry-content .wp-block-columns .wp-block-column { - margin: 0; +.full-width-content .entry-content .alignfull { + margin-left: calc( -100vw / 2 + 100% / 2 ); + margin-right: calc( -100vw / 2 + 100% / 2 ); + max-width: 100vw; } /* Columns --------------------------------------------- */ .entry-content .wp-block-columns { + display: block; margin-bottom: 30px; } @@ -96,103 +123,55 @@ hr.wp-block-separator { font-size: 48px; } -/* Figcaption ---------------------------------------------- */ - -.entry-content .wp-block-image figcaption { - color: #666; - font-size: 14px; - font-style: italic; - margin-bottom: 30px; - margin-top: 10px; -} - -/* Font Sizes +/* Buttons --------------------------------------------- */ -.entry-content p.has-small-font-size{ - font-size: 12px; -} - -.entry-content p.has-regular-font-size{ +.content .wp-block-button .wp-block-button__link { + background-color: #333; + border: 0; + border-radius: 0; + color: #fff; + cursor: pointer; font-size: 16px; + font-weight: 600; + padding: 15px 30px; + text-align: center; + text-decoration: none; + white-space: normal; + width: auto; } -.entry-content p.has-large-font-size{ - font-size: 20px; -} - -.entry-content p.has-larger-font-size{ - font-size: 24px; -} - -/* Color Palette ---------------------------------------------- */ - -.entry-content .has-light-gray-background-color { - background-color: #f5f5f5; +.content .wp-block-button .wp-block-button__link:focus, +.content .wp-block-button .wp-block-button__link:hover { + background-color: #0073e5; + color: #fff; } -.entry-content .has-light-gray-color { - color: #f5f5f5; -} +/* Other Blocks +---------------------------------------------------------------------------------------------------- */ -.entry-content .has-medium-gray-background-color { - background-color: #999; +.wp-block-preformatted { + white-space: pre-wrap; } -.entry-content .has-medium-gray-color { - color: #999; +hr.wp-block-separator { + border: none; + border-top: 1px solid #eee; + margin: 1.65em auto; } -.entry-content .has-dark-gray-background-color { - background-color: #333; +.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { + max-width: 100px } -.entry-content .has-dark-gray-color { - color: #333; +.wp-block-audio audio { + width: 100%; } -/* Gallery ---------------------------------------------- */ - .entry-content .wp-block-gallery { padding-left: 0; } -/* Alignment ---------------------------------------------- */ - -.full-width-content .entry-content .alignfull { - margin-left: calc( -100vw / 2 + 100% / 2 ); - margin-right: calc( -100vw / 2 + 100% / 2 ); - max-width: 100vw; -} - -/* Background Color ---------------------------------------------- */ - -.entry-content p.has-background { - padding: 25px 30px; -} - -.entry-content p.has-background.box-shadow { - box-shadow: 0 0 20px rgba(0,0,0,0.1); -} - -.entry-content p.has-background.light-text a { - color: #fff; - text-decoration: underline; -} - -.entry-content p.has-background.light-text a:focus, -.entry-content p.has-background.light-text a:hover { - text-decoration: none; -} - -/* Blockquote ---------------------------------------------- */ - .entry-content .wp-block-quote cite { color: #666; display: block; @@ -200,6 +179,14 @@ hr.wp-block-separator { margin-top: -25px; } +.entry-content .wp-block-image figcaption { + color: #666; + font-size: 14px; + font-style: italic; + margin-bottom: 30px; + margin-top: 10px; +} + /* Media Queries --------------------------------------------- */ From 5174b5b4ea4c7c51f4a283d89e71e7f254c8bf61 Mon Sep 17 00:00:00 2001 From: Nick Cernis Date: Fri, 19 Oct 2018 19:41:27 +0200 Subject: [PATCH 3/6] Fix front-end audio block width --- lib/gutenberg/front-end.css | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/gutenberg/front-end.css b/lib/gutenberg/front-end.css index b02ef8fe..fd7cc3e2 100644 --- a/lib/gutenberg/front-end.css +++ b/lib/gutenberg/front-end.css @@ -165,6 +165,7 @@ hr.wp-block-separator { } .wp-block-audio audio { + display: inline-block; width: 100%; } From be7dc2dd2dbc2d87896729ddd14a4b91361439bd Mon Sep 17 00:00:00 2001 From: Nick Cernis Date: Fri, 19 Oct 2018 19:49:58 +0200 Subject: [PATCH 4/6] =?UTF-8?q?Add=20editor=20styles=20=E2=80=9Cthe=20Gute?= =?UTF-8?q?nberg=20way=E2=80=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Causes styles in style-editor.css to be prefixed with .editor-block-list__block when imported by WordPress in the admin area, making it easier to re-use styles between the front-end and editor. Follows the methodology of the Twenty Nineteen theme. --- lib/gutenberg/init.php | 21 +++++++++++++++++---- lib/gutenberg/style-editor-title.css | 9 +++++++++ 2 files changed, 26 insertions(+), 4 deletions(-) create mode 100644 lib/gutenberg/style-editor-title.css diff --git a/lib/gutenberg/init.php b/lib/gutenberg/init.php index c58e906e..5e60764d 100644 --- a/lib/gutenberg/init.php +++ b/lib/gutenberg/init.php @@ -34,20 +34,33 @@ function genesis_sample_enqueue_gutenberg_frontend_styles() { function genesis_sample_block_editor_styles() { wp_enqueue_style( - 'genesis-sample-block-editor-fonts', + 'genesis-sample-gutenberg-fonts', 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700', array(), CHILD_THEME_VERSION - ); + ); + + /* Enqueue a separate admin stylesheet from the main `style-editor.css` to + * style the admin editor title only, due to this issue: + * https://github.com/WordPress/gutenberg/issues/10485. + * TODO: move this to `style-editor.css` once it's possible to style + * elements outside `.editor-block-list__block` via `add_editor_styles`. + */ wp_enqueue_style( - 'genesis-sample-block-editor-styles', - get_stylesheet_directory_uri() . '/lib/gutenberg/style-editor.css', + 'genesis-sample-editor-title', + get_stylesheet_directory_uri() . '/lib/gutenberg/style-editor-title.css', array(), CHILD_THEME_VERSION ); } +// Add support for editor styles. +add_theme_support( 'editor-styles' ); + +// Enqueue editor styles. +add_editor_style( '/lib/gutenberg/style-editor.css' ); + // Adds support for block alignments. add_theme_support( 'align-wide' ); diff --git a/lib/gutenberg/style-editor-title.css b/lib/gutenberg/style-editor-title.css new file mode 100644 index 00000000..0adc3f52 --- /dev/null +++ b/lib/gutenberg/style-editor-title.css @@ -0,0 +1,9 @@ +/* In a separate file until this is solved: +https://github.com/WordPress/gutenberg/issues/10485 */ +.editor-post-title__block .editor-post-title__input { + font-family: 'Source Sans Pro', sans-serif; + font-size: 30px; + font-weight: 400; + line-height: 1.2; + margin: 0 0 20px; +} \ No newline at end of file From eb25cd0c4f8dd0c619fb514faacd05f75f6dfcae Mon Sep 17 00:00:00 2001 From: Nick Cernis Date: Fri, 19 Oct 2018 19:51:41 +0200 Subject: [PATCH 5/6] Update editor styles to remove unneeded prefixes When added via add_editor_style, rules are prefixed with .editor-block-list__block to help them override default editor styles. --- lib/gutenberg/style-editor.css | 183 +++++++++++++++------------------ 1 file changed, 83 insertions(+), 100 deletions(-) diff --git a/lib/gutenberg/style-editor.css b/lib/gutenberg/style-editor.css index 481c36c6..0c89c57e 100755 --- a/lib/gutenberg/style-editor.css +++ b/lib/gutenberg/style-editor.css @@ -1,97 +1,121 @@ -/* Gutenberg editor column widths -/* Using extra .wp-admin class to override inline default styles: -/* https://github.com/WordPress/gutenberg/issues/9894. ----------------------------------------------------------------- */ +body { + color: #333; + font-family: 'Source Sans Pro', sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 1.625; +} + +p, ul, ol, dl { + font-size: 18px; + line-height: 1.625; +} /* Regular content width. /* 702px + 27px to match paragraph width on front-end and editor. ---------------------------------------------------------------- */ -body.wp-admin.gutenberg-editor-page .editor-block-list__block, -body.wp-admin.gutenberg-editor-page .editor-default-block-appender, -body.wp-admin.gutenberg-editor-page .editor-post-title__block { - max-width: 732px; +.wp-block { + width: 732px; } /* Width of "wide" blocks /* 1062px + 30px so wide images match width in front-end and editor. /* 1062px = default column width of 702px + .alignwide negative margin of 360px ---------------------------------------------------------------------------- */ -body.wp-admin.gutenberg-editor-page .editor-block-list__block[data-align="wide"] { - max-width: 1092px; +body[data-align="wide"] { + max-width: 1092px !important; } -/* Width of "full-wide" blocks */ -body.wp-admin.gutenberg-editor-page .editor-block-list__block[data-align="full"] { - max-width: none; +body[data-align="full"] { + max-width: none !important; } -/* Other Editor Defaults +/* Typography --------------------------------------------- */ -.gutenberg__editor { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; +a { + color: #0073e5; } -.gutenberg__editor .edit-post-visual-editor, -.gutenberg__editor .edit-post-visual-editor p { - color: #333; +h1, +h2, +h3, +h4, +h5, +h6 { font-family: 'Source Sans Pro', sans-serif; - font-size: 18px; font-weight: 400; - line-height: 1.625; + line-height: 1.2; + margin: 0 0 20px; } -.gutenberg__editor .editor-rich-text__tinymce a { - color: #0073e5; +h1 { + font-size: 30px; } -.gutenberg__editor .editor-post-title .editor-post-title__input { - font-family: 'Source Sans Pro', sans-serif; - font-size: 30px; - font-weight: 400; +h2 { + font-size: 27px; +} + +h3 { + font-size: 24px; + font-weight: 600; +} + +h4 { + font-size: 20px; + font-weight: 600; + margin-top: 40px; +} + +h5 { + font-size: 18px; +} + +h6 { + font-size: 16px; } /* Background Color --------------------------------------------- */ -.gutenberg__editor p.has-background { +p.has-background { padding: 25px 30px; } -.gutenberg__editor p.box-shadow { +p.box-shadow { box-shadow: 0 0 20px rgba(0,0,0,0.1); } -.gutenberg__editor p.has-background.light-text a { +p.has-background.light-text a { color: #fff; text-decoration: underline; } -.gutenberg__editor p.has-background.light-text a:focus, -.gutenberg__editor p.has-background.light-text a:hover { +p.has-background.light-text a:focus, +p.has-background.light-text a:hover { text-decoration: none; } /* Blockquotes --------------------------------------------- */ -.gutenberg__editor .wp-block-quote, -.gutenberg__editor .wp-block-quote cite, -.gutenberg__editor .wp-block-quote__citation { +.wp-block-quote, +.wp-block-quote cite, +.wp-block-quote__citation { font-family: 'Source Sans Pro', sans-serif; font-style: italic; font-size: 14px; text-align: left; } -.gutenberg__editor .wp-block-quote.is-large cite, -.gutenberg__editor .is-large .wp-block-quote__citation { +.wp-block-quote.is-large cite, +.is-large .wp-block-quote__citation { font-size: 18px; text-align: right; } -.gutenberg__editor .wp-block-pullquote__citation { +.wp-block-pullquote__citation { font-family: 'Source Sans Pro', sans-serif; font-size: 18px; font-style: italic; @@ -99,26 +123,26 @@ body.wp-admin.gutenberg-editor-page .editor-block-list__block[data-align="full"] text-transform: none; } -.gutenberg__editor .wp-block-quote.is-large p, -.gutenberg__editor .wp-block-quote.is-style-large p { +.wp-block-quote.is-large p, +.wp-block-quote.is-style-large p { font-size: 24px; } -.gutenberg__editor .wp-block-quote:not(.is-large):not(.is-style-large) { +.wp-block-quote:not(.is-large):not(.is-style-large) { border-left: 0; font-style: italic; margin: 30px; padding-left: 0; } -.gutenberg__editor .wp-block-quote cite { +.wp-block-quote cite { color: #666; font-size: 14px; margin-bottom: 0; margin-top: -15px; } -.gutenberg__editor .wp-block-pullquote { +.wp-block-pullquote { border: none; font-style: italic; margin: 30px; @@ -128,34 +152,34 @@ body.wp-admin.gutenberg-editor-page .editor-block-list__block[data-align="full"] /* Color Palette --------------------------------------------- */ -.gutenberg__editor .has-light-gray-background-color { +.has-light-gray-background-color { background-color: #f5f5f5; } -.gutenberg__editor .has-light-gray-color { +.has-light-gray-color { color: #f5f5f5; } -.gutenberg__editor .has-medium-gray-background-color { +.has-medium-gray-background-color { background-color: #999; } -.gutenberg__editor .has-medium-gray-color { +.has-medium-gray-color { color: #999; } -.gutenberg__editor .has-dark-gray-background-color { +.has-dark-gray-background-color { background-color: #333; } -.gutenberg__editor .has-dark-gray-color { +.has-dark-gray-color { color: #333; } /* Cover Image --------------------------------------------- */ -.gutenberg__editor .wp-block-cover-image .wp-block-cover-image-text { +.wp-block-cover-image .wp-block-cover-image-text { color: #fff; font-size: 48px; } @@ -163,7 +187,7 @@ body.wp-admin.gutenberg-editor-page .editor-block-list__block[data-align="full"] /* Figcaption --------------------------------------------- */ -.gutenberg__editor .wp-block-image figcaption { +.wp-block-image figcaption { color: #666; font-family: 'Source Sans Pro', sans-serif; font-size: 14px; @@ -174,61 +198,26 @@ body.wp-admin.gutenberg-editor-page .editor-block-list__block[data-align="full"] /* Font Sizes --------------------------------------------- */ -.gutenberg__editor p.has-small-font-size { +p.has-small-font-size { font-size: 12px; } -.gutenberg__editor p.has-regular-font-size { +p.has-regular-font-size { font-size: 16px; } -.gutenberg__editor p.has-large-font-size { +p.has-large-font-size { font-size: 20px; } -.gutenberg__editor p.has-larger-font-size { - font-size: 24px; -} - -/* Headings ---------------------------------------------- */ - -.gutenberg__editor .wp-block-heading { - font-family: 'Source Sans Pro', sans-serif; -} - -.gutenberg__editor .wp-block-heading h1, -.gutenberg__editor .wp-block-heading h2 { - font-weight: 400; -} - -.gutenberg__editor .wp-block-heading h3, -.gutenberg__editor .wp-block-heading h4 { - font-weight: 600; -} - -.gutenberg__editor .wp-block-heading h1 { - font-size: 30px; -} - -.gutenberg__editor .wp-block-heading h2 { - font-size: 27px; -} - -.gutenberg__editor .wp-block-heading h3 { +p.has-larger-font-size { font-size: 24px; } -.gutenberg__editor .wp-block-heading h4 { - font-size: 20px; -} - /* Lists --------------------------------------------- */ -.gutenberg__editor .editor-block-list__block li { - font-family: 'Source Sans Pro', sans-serif; - font-size: 18px; +.editor-block-list__block li { line-height: 1.625; margin-bottom: 0; } @@ -256,7 +245,6 @@ hr.wp-block-separator { --------------------------------------------- */ .wp-block-table { - font-family: 'Source Sans Pro', sans-serif; font-size: 18px; line-height: 2; } @@ -275,15 +263,10 @@ hr.wp-block-separator { border-bottom: 1px solid #eee; } -/* Audio Blocks +/* Buttons --------------------------------------------- */ -.wp-block-audio figcaption { - font-family: 'Source Sans Pro', sans-serif; -} - .wp-block-button .wp-block-button__link { - font-family: 'Source Sans Pro', sans-serif; background-color: #333; border: 0; border-radius: 0; @@ -302,6 +285,6 @@ hr.wp-block-separator { /* Galleries --------------------------------------------- */ -.gutenberg__editor .wp-block-gallery .blocks-gallery-item { +.wp-block-gallery .blocks-gallery-item { margin-bottom: 16px; } From 9a548c8a20f28a72120925b4b516808aa3402a2b Mon Sep 17 00:00:00 2001 From: Nick Cernis Date: Mon, 22 Oct 2018 11:59:37 +0200 Subject: [PATCH 6/6] Standards --- lib/gutenberg/init.php | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/lib/gutenberg/init.php b/lib/gutenberg/init.php index 5e60764d..0ee0447a 100644 --- a/lib/gutenberg/init.php +++ b/lib/gutenberg/init.php @@ -34,24 +34,25 @@ function genesis_sample_enqueue_gutenberg_frontend_styles() { function genesis_sample_block_editor_styles() { wp_enqueue_style( - 'genesis-sample-gutenberg-fonts', - 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700', - array(), - CHILD_THEME_VERSION + 'genesis-sample-gutenberg-fonts', + 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700', + array(), + CHILD_THEME_VERSION ); - /* Enqueue a separate admin stylesheet from the main `style-editor.css` to + /** + * Enqueue a separate admin stylesheet from the main `style-editor.css` to * style the admin editor title only, due to this issue: * https://github.com/WordPress/gutenberg/issues/10485. * TODO: move this to `style-editor.css` once it's possible to style * elements outside `.editor-block-list__block` via `add_editor_styles`. */ wp_enqueue_style( - 'genesis-sample-editor-title', - get_stylesheet_directory_uri() . '/lib/gutenberg/style-editor-title.css', - array(), - CHILD_THEME_VERSION - ); + 'genesis-sample-editor-title', + get_stylesheet_directory_uri() . '/lib/gutenberg/style-editor-title.css', + array(), + CHILD_THEME_VERSION + ); }