From 97414f07a334833a25a9f658a2c143fa0f18622a Mon Sep 17 00:00:00 2001 From: Utkarsh Patel Date: Thu, 19 May 2022 18:06:06 +0530 Subject: [PATCH 1/3] Add support for gutenberg typography class --- theme/assets/css/src/base/typography.css | 17 +++++ theme/inc/block-editor.php | 84 ++++++++++++++++++++++ theme/theme.json | 89 ++++++++++++++++++++++++ 3 files changed, 190 insertions(+) create mode 100644 theme/theme.json diff --git a/theme/assets/css/src/base/typography.css b/theme/assets/css/src/base/typography.css index 5e8f9a968..bc7379ce7 100644 --- a/theme/assets/css/src/base/typography.css +++ b/theme/assets/css/src/base/typography.css @@ -61,6 +61,23 @@ @mixin selector-typography .mdc-typography--subtitle1, label-large, 1, 1.75, 400; @mixin selector-typography .mdc-typography--subtitle2, label-medium, 0.875, 1.375, 500; +/** WordPress Gutenberg typography class registered in theme support / theme.json. */ +@mixin selector-typography .has-display-large-font-size, display-large, 7.5, 6, 300; +@mixin selector-typography .has-display-medium-font-size, display-medium, 6.875, 6, 300; +@mixin selector-typography .has-display-small-font-size, display-small, 6, 6, 300; +@mixin selector-typography .has-headline-large-font-size, headline-large, 3.75, 3.75, 300; +@mixin selector-typography .has-headline-medium-font-size, headline-medium, 3, 3.125, 400; +@mixin selector-typography .has-headline-small-font-size, headline-small, 2.125, 2.5, 400; +@mixin selector-typography .has-title-large-font-size, title-large, 1.5, 2, 400; +@mixin selector-typography .has-title-medium-font-size, title-medium, 1.25, 2, 500; +@mixin selector-typography .has-title-small-font-size, title-small, 0.875, 1.57, 500; +@mixin selector-typography .has-body-large-font-size, body-large, 1, 1.5, 400; +@mixin selector-typography .has-body-medium-font-size, body-medium, 0.875, 1.25, 400; +@mixin selector-typography .has-body-small-font-size, body-small, 0.75, 1.25, 400; +@mixin selector-typography .has-label-large-font-size, label-large, 1, 1.75, 400; +@mixin selector-typography .has-label-medium-font-size, label-medium, 0.875, 1.375, 500; +@mixin selector-typography .has-label-small-font-size, label-small, 0.75, 2, 500; + /* Backward compat: For `body` types typography should be applied to child elements as well */ @mixin selector-typography .mdc-typography--body1 *, body-large, 1, 1.5, 400; @mixin selector-typography .mdc-typography--body2 *, body-large, 0.875, 1.25, 400; diff --git a/theme/inc/block-editor.php b/theme/inc/block-editor.php index adea9a502..5a1945b2e 100644 --- a/theme/inc/block-editor.php +++ b/theme/inc/block-editor.php @@ -26,6 +26,7 @@ function setup() { add_action( 'init', __NAMESPACE__ . '\\register_disable_section_meta' ); add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\\enqueue_block_editor_assets' ); add_action( 'body_class', __NAMESPACE__ . '\\filter_body_class' ); + add_action( 'after_setup_theme', __NAMESPACE__ . '\\add_font_sizes' ); } /** @@ -96,3 +97,86 @@ function filter_body_class( $classes ) { return $classes; } + +function add_font_sizes(){ + add_theme_support( + 'editor-font-sizes', + [ + [ + 'name' => __( 'Display Large', 'material-design-google' ), + 'size' => '7.5em', + 'slug' => 'display-large', + ], + [ + 'name' => __( 'Display Medium', 'material-design-google' ), + 'size' => '6.875em', + 'slug' => 'display-medium', + ], + [ + 'name' => __( 'Display Small', 'material-design-google' ), + 'size' => '6em', + 'slug' => 'display-small', + ], + [ + 'name' => __( 'Headline Large', 'material-design-google' ), + 'size' => '3.75em', + 'slug' => 'headline-large', + ], + [ + 'name' => __( 'Headline Medium', 'material-design-google' ), + 'size' => '3em', + 'slug' => 'headline-medium', + ], + [ + 'name' => __( 'Headline Small', 'material-design-google' ), + 'size' => '2.125em', + 'slug' => 'headline-small', + ], + [ + 'name' => __( 'Title Large', 'material-design-google' ), + 'size' => '1.5em', + 'slug' => 'title-large', + ], + [ + 'name' => __( 'Title Medium', 'material-design-google' ), + 'size' => '1.25em', + 'slug' => 'title-medium', + ], + [ + 'name' => __( 'Title Small', 'material-design-google' ), + 'size' => '0.875em', + 'slug' => 'title-small', + ], + [ + 'name' => __( 'Label Large', 'material-design-google' ), + 'size' => '1em', + 'slug' => 'label-large', + ], + [ + 'name' => __( 'Label Medium', 'material-design-google' ), + 'size' => '0.875em', + 'slug' => 'label-medium', + ], + [ + 'name' => __( 'Label Small', 'material-design-google' ), + 'size' => '0.75em', + 'slug' => 'label-small', + ], + [ + 'name' => __( 'Body Large', 'material-design-google' ), + 'size' => '1em', + 'slug' => 'body-large', + ], + [ + 'name' => __( 'Body Medium', 'material-design-google' ), + 'size' => '0.875em', + 'slug' => 'body-medium', + ], + [ + 'name' => __( 'Body Small', 'material-design-google' ), + 'size' => '0.75em', + 'slug' => 'body-small', + ], + ] + ); +} diff --git a/theme/theme.json b/theme/theme.json new file mode 100644 index 000000000..2080d47b9 --- /dev/null +++ b/theme/theme.json @@ -0,0 +1,89 @@ +{ + "$schema": "https://schemas.wp.org/wp/5.8/theme.json", + "version": 1, + "settings": { + "layout": { + "contentSize": "840px", + "wideSize": "100vw" + }, + "typography": { + "fontSizes": [ + { + "name": "Display Large", + "size": "var(--md-sys-typescale-display-large-size, 7.5em)", + "slug": "display-large" + }, + { + "name": "Display Medium", + "size": "var(--md-sys-typescale-display-medium-size, 6.875em)", + "slug": "display-medium" + }, + { + "name": "Display Small", + "size": "var(--md-sys-typescale-display-small-size, 6em)", + "slug": "display-small" + }, + { + "name": "Headline Large", + "size": "var(--md-sys-typescale-headline-large-size, 3.75em)", + "slug": "headline-large" + }, + { + "name": "Headline Medium", + "size": "var(--md-sys-typescale-headline-medium-size, 3em)", + "slug": "headline-medium" + }, + { + "name": "Headline Small", + "size": "var(--md-sys-typescale-headline-small-size, 2.125em)", + "slug": "headline-small" + }, + { + "name": "Title Large", + "size": "var(--md-sys-typescale-title-large-size, 1.5em)", + "slug": "title-large" + }, + { + "name": "Title Medium", + "size": "var(--md-sys-typescale-title-medium-size, 1.25em)", + "slug": "title-medium" + }, + { + "name": "Title Small", + "size": "var(--md-sys-typescale-title-small-size, 0.875em)", + "slug": "title-small" + }, + { + "name": "Label Large", + "size": "var(--md-sys-typescale-label-large-size, 1em)", + "slug": "label-large" + }, + { + "name": "Label Medium", + "size": "var(--md-sys-typescale-label-medium-size, 0.875em)", + "slug": "label-medium" + }, + { + "name": "Label Small", + "size": "var(--md-sys-typescale-label-small-size, 0.75em)", + "slug": "label-small" + }, + { + "name": "Body Large", + "size": "var(--md-sys-typescale-body-large-size, 1)", + "slug": "body-large" + }, + { + "name": "Body Medium", + "size": "var(--md-sys-typescale-body-medium-size, 0.857em)", + "slug": "body-medium" + }, + { + "name": "Body Small", + "size": "var(--md-sys-typescale-body-small-size, 0.75em)", + "slug": "body-small" + } + ] + } + } +} From f663ae8c83260f48428dc93e584ce5a0e136795e Mon Sep 17 00:00:00 2001 From: Utkarsh Patel Date: Mon, 30 May 2022 17:50:05 +0530 Subject: [PATCH 2/3] Fix font picker for WP 5.6 --- plugin/assets/css/src/block-editor.css | 7 ++++ theme/inc/block-editor.php | 49 +++++++++++++++++--------- 2 files changed, 40 insertions(+), 16 deletions(-) diff --git a/plugin/assets/css/src/block-editor.css b/plugin/assets/css/src/block-editor.css index ae0018309..c9ff91a8e 100644 --- a/plugin/assets/css/src/block-editor.css +++ b/plugin/assets/css/src/block-editor.css @@ -78,3 +78,10 @@ .mdc-image-list__label { white-space: normal; } + +/* + * Fix dropdown font size on Gutenberg with 5.6. + */ +.components-font-size-picker__select > ul > li { + font-size: inherit !important; +} diff --git a/theme/inc/block-editor.php b/theme/inc/block-editor.php index 5a1945b2e..6ec594f4f 100644 --- a/theme/inc/block-editor.php +++ b/theme/inc/block-editor.php @@ -98,83 +98,100 @@ function filter_body_class( $classes ) { return $classes; } -function add_font_sizes(){ +/** + * Em to px. + */ +function em_to_px( $em ) { + return (int) ( $em * 16 ); +} + +/** + * Add font sizes. + * + * @return void + */ +function add_font_sizes() { + // Handle for 5.6 and 5.7 WP, 5.8 and later will be handled via theme.json. + if ( version_compare( get_bloginfo( 'version' ), '5.6', '<' ) || version_compare( get_bloginfo( 'version' ), '5.8', '>=' ) ) { + return; + } + add_theme_support( 'editor-font-sizes', [ [ 'name' => __( 'Display Large', 'material-design-google' ), - 'size' => '7.5em', + 'size' => em_to_px( 7.5 ), 'slug' => 'display-large', ], [ 'name' => __( 'Display Medium', 'material-design-google' ), - 'size' => '6.875em', + 'size' => em_to_px( 6.875 ), 'slug' => 'display-medium', ], [ 'name' => __( 'Display Small', 'material-design-google' ), - 'size' => '6em', + 'size' => em_to_px( 6 ), 'slug' => 'display-small', ], [ 'name' => __( 'Headline Large', 'material-design-google' ), - 'size' => '3.75em', + 'size' => em_to_px( 3.75 ), 'slug' => 'headline-large', ], [ 'name' => __( 'Headline Medium', 'material-design-google' ), - 'size' => '3em', + 'size' => em_to_px( 3 ), 'slug' => 'headline-medium', ], [ 'name' => __( 'Headline Small', 'material-design-google' ), - 'size' => '2.125em', + 'size' => em_to_px( 2.125 ), 'slug' => 'headline-small', ], [ 'name' => __( 'Title Large', 'material-design-google' ), - 'size' => '1.5em', + 'size' => em_to_px( 1.5 ), 'slug' => 'title-large', ], [ 'name' => __( 'Title Medium', 'material-design-google' ), - 'size' => '1.25em', + 'size' => em_to_px( 1.25 ), 'slug' => 'title-medium', ], [ 'name' => __( 'Title Small', 'material-design-google' ), - 'size' => '0.875em', + 'size' => em_to_px( 0.875 ), 'slug' => 'title-small', ], [ 'name' => __( 'Label Large', 'material-design-google' ), - 'size' => '1em', + 'size' => em_to_px( 1 ), 'slug' => 'label-large', ], [ 'name' => __( 'Label Medium', 'material-design-google' ), - 'size' => '0.875em', + 'size' => em_to_px( 0.875 ), 'slug' => 'label-medium', ], [ 'name' => __( 'Label Small', 'material-design-google' ), - 'size' => '0.75em', + 'size' => em_to_px( 0.75 ), 'slug' => 'label-small', ], [ 'name' => __( 'Body Large', 'material-design-google' ), - 'size' => '1em', + 'size' => em_to_px( 1 ), 'slug' => 'body-large', ], [ 'name' => __( 'Body Medium', 'material-design-google' ), - 'size' => '0.875em', + 'size' => em_to_px( 0.875 ), 'slug' => 'body-medium', ], [ 'name' => __( 'Body Small', 'material-design-google' ), - 'size' => '0.75em', + 'size' => em_to_px( 0.75 ), 'slug' => 'body-small', ], ] From cd38d4a23392615b8c307963257ac01fa193056d Mon Sep 17 00:00:00 2001 From: Utkarsh Patel Date: Mon, 30 May 2022 18:05:22 +0530 Subject: [PATCH 3/3] Lint --- theme/inc/block-editor.php | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/theme/inc/block-editor.php b/theme/inc/block-editor.php index 6ec594f4f..1c9d092b0 100644 --- a/theme/inc/block-editor.php +++ b/theme/inc/block-editor.php @@ -100,6 +100,10 @@ function filter_body_class( $classes ) { /** * Em to px. + * + * @param float $em Em value. + * + * @return int */ function em_to_px( $em ) { return (int) ( $em * 16 );