Skip to content

Commit 9f9d51b

Browse files
PatelUtkarshPatelUtkarsh
authored
Merge pull request #358 from material-components/fix/147
Allow user to pick m2 typography tokens; Update fse template
2 parents a82ef8e + 2f8e509 commit 9f9d51b

File tree

11 files changed

+117
-17
lines changed

11 files changed

+117
-17
lines changed

‎theme/assets/css/src/base/typography.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,20 @@
2626
@mixin selector-typography h6, headline6, 1.25, 2, 500;
2727
@mixin selector-typography p, body1, 1, 1.5, 400;
2828
@mixin selector-typography figcaption, subtitle1, 1, 1.75, 400;
29+
30+
/**
31+
* Theme.json typography for additional class.
32+
*/
33+
@mixin selector-typography .has-headline-1-font-size, headline1, 6, 6, 300;
34+
@mixin selector-typography .has-headline-2-font-size, headline2, 3.75, 3.75, 300;
35+
@mixin selector-typography .has-headline-3-font-size, headline3, 3, 3.125, 400;
36+
@mixin selector-typography .has-headline-4-font-size, headline4, 2.125, 2.5, 400;
37+
@mixin selector-typography .has-headline-5-font-size, headline5, 1.5, 2, 400;
38+
@mixin selector-typography .has-headline-6-font-size, headline6, 1.25, 2, 500;
39+
@mixin selector-typography .has-subtitle-1-font-size, subtitle1, 1, 1.75, 400 ;
40+
@mixin selector-typography .has-subtitle-2-font-size, subtitle2, 0.875, 1.375, 500;
41+
@mixin selector-typography .has-body-1-font-size, body1, 1, 1.5, 400;
42+
@mixin selector-typography .has-body-2-font-size, body2, 0.875, 1.25, 400;
43+
@mixin selector-typography .has-caption-font-size, caption, 0.75, 1.25, 400;
44+
@mixin selector-typography .has-button-font-size, button, 0.875, 2.25, 500;
45+
@mixin selector-typography .has-overline-font-size, overline, 0.75, 2, 500;

‎theme/assets/css/src/components/top-app-bar.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,8 @@
5555
padding: 0;
5656
}
5757

58-
& .site-title a {
58+
& .site-title a,
59+
& .wp-block-site-title a {
5960
margin-right: 3px;
6061
text-decoration: none;
6162

‎theme/assets/src/block-editor/hooks.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,6 @@ import { createHigherOrderComponent } from '@wordpress/compose';
2222
import { useEffect } from '@wordpress/element';
2323

2424
const blockClassPrefillMap = {
25-
'core/site-title': 'site-title mdc-typography mdc-typography--headline6',
26-
'core/post-title': 'mdc-typography mdc-typography-headline2 entry-title',
2725
'core/navigation-link': 'mdc-tab',
2826
'core/navigation': 'nav-wrap mdc-tab-scroller__scroll-area',
2927
};

‎theme/inc/block-editor.php‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
*/
2828
function setup() {
2929
add_action( 'init', __NAMESPACE__ . '\\register_disable_section_meta' );
30+
add_action( 'admin_init', __NAMESPACE__ . '\\force_enqueue_block_editor_assets' );
3031
add_action( 'enqueue_block_editor_assets', __NAMESPACE__ . '\\enqueue_block_editor_assets' );
3132
if ( ! is_fse() ) {
3233
add_action( 'body_class', __NAMESPACE__ . '\\filter_body_class' );
@@ -38,6 +39,21 @@ function setup() {
3839
$overrides_block = new Override();
3940
}
4041

42+
/**
43+
* Force enqueue block editor assets for FSE.
44+
*
45+
* @return void
46+
*/
47+
function force_enqueue_block_editor_assets() {
48+
global $pagenow;
49+
if ( $pagenow !== 'site-editor.php' ) {
50+
return;
51+
}
52+
// Force registration of block editor assets early so .
53+
54+
do_action( 'enqueue_block_editor_assets' );
55+
}
56+
4157
/**
4258
* Register disable section meta.
4359
*/

‎theme/inc/customizer/colors.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -294,7 +294,7 @@ function get_dark_controls() {
294294
/**
295295
* Handle updating theme.json color palette.
296296
*
297-
* @param \WP_Customize $wp_customize WP_Customize instance.
297+
* @param \WP_Customize_Manager $wp_customize WP_Customize instance.
298298
*/
299299
function after_save( $wp_customize ) {
300300
if ( ! is_fse() ) {
@@ -379,7 +379,7 @@ function get_all_color_controls() {
379379
/**
380380
* Get user color palette.
381381
*
382-
* @param \WP_Customize $wp_customize WP_Customize instance.
382+
* @param \WP_Customize_Manager $wp_customize WP_Customize instance.
383383
*
384384
* @return array
385385
*/

‎theme/parts/header.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<div class="wp-block-group mdc-top-app-bar__row top-app-bar__header">
77
<!-- wp:group {"className":"mdc-top-app-bar__section mdc-top-app-bar__section\u002d\u002dalign-start","layout":{"type":"flex","allowOrientation":false}} -->
88
<div class="wp-block-group mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
9-
<!-- wp:material/hamburger-menu {"isDrawerOpen":true} -->
9+
<!-- wp:material/hamburger-menu -->
1010
<div class="wp-block-material-hamburger-menu">
1111
<!-- wp:material/drawer -->
1212
<div class="wp-block-material-drawer">

‎theme/parts/subtitle.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
<!-- wp:group {"layout":{"type":"flex","allowOrientation":false}} -->
2-
<div class="wp-block-group">
3-
<!-- wp:site-tagline {"className":"site-tagline mdc-typography--subtitle1"} /-->
4-
</div>
5-
<!-- /wp:group -->
2+
<div class="wp-block-group"><!-- wp:site-tagline {"fontSize":"subtitle1"} /--></div>
3+
<!-- /wp:group -->

‎theme/parts/title.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div class="wp-block-group site-title__wrapper">
55
<!-- wp:group {"className":"site-title__row","layout":{"type":"flex","allowOrientation":false}} -->
66
<div class="wp-block-group site-title__row">
7-
<!-- wp:site-title {"className":"site-title mdc-typography mdc-typography--headline6"} /-->
7+
<!-- wp:site-title {"fontSize":"headline6"} /-->
88
</div>
99
<!-- /wp:group -->
1010

‎theme/templates/page.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- wp:template-part {"slug":"header"} /-->
22

33
<!-- wp:group {"style":{"spacing":{"padding":{"top":"7em","right":"0px","bottom":"0px","left":"0px"}}},"layout":{"wideSize":"100vw","contentSize":"840px"}} -->
4-
<div class="wp-block-group" style="padding-top:7em;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:post-title {"textAlign":"left","level":1,"className":"mdc-typography mdc-typography--headline2 entry-title"} /-->
4+
<div class="wp-block-group" style="padding-top:7em;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:post-title {"textAlign":"left","level":1,"fontSize":"headline2"} /-->
55

66
<!-- wp:post-featured-image /--></div>
77
<!-- /wp:group -->

‎theme/templates/single.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
<div class="wp-block-group"></div>
88
<!-- /wp:group -->
99

10-
<!-- wp:group {"className":"mdc-typography--overline","layout":{"type":"flex","flexWrap":"wrap"}} -->
11-
<div class="wp-block-group mdc-typography--overline"><!-- wp:post-date {"format":"F j, Y","isLink":true} /-->
10+
<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"},"fontSize":"overline"} -->
11+
<div class="wp-block-group has-overline-font-size"><!-- wp:post-date {"format":"F j, Y","isLink":true} /-->
1212

1313
<!-- wp:paragraph -->
1414
<p>⌙</p>
@@ -17,7 +17,7 @@
1717
<!-- wp:post-terms {"term":"category"} /--></div>
1818
<!-- /wp:group -->
1919

20-
<!-- wp:post-title {"textAlign":"left","level":1,"className":"mdc-typography mdc-typography--headline2 entry-title"} /-->
20+
<!-- wp:post-title {"textAlign":"left","level":1,"fontSize":"headline2"} /-->
2121

2222
<!-- wp:post-author {"showBio":false} /--></div>
2323
<!-- /wp:group -->
@@ -27,8 +27,8 @@
2727
<!-- /wp:group -->
2828

2929
<!-- wp:group {"tagName":"footer","style":{"spacing":{"padding":{"top":"3rem","right":"0rem","bottom":"1.5rem","left":"0rem"}}},"layout":{"contentSize":"840px","wideSize":"100vw"}} -->
30-
<footer class="wp-block-group" style="padding-top:3rem;padding-right:0rem;padding-bottom:1.5rem;padding-left:0rem"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0rem","right":"0rem","bottom":"0rem","left":"1rem"}}},"className":"mdc-typography\u002d\u002dcaption","layout":{"type":"flex","allowOrientation":false}} -->
31-
<div class="wp-block-group mdc-typography--caption" style="padding-top:0rem;padding-right:0rem;padding-bottom:0rem;padding-left:1rem"><!-- wp:post-terms {"term":"post_tag"} /--></div>
30+
<footer class="wp-block-group" style="padding-top:3rem;padding-right:0rem;padding-bottom:1.5rem;padding-left:0rem"><!-- wp:group {"style":{"spacing":{"padding":{"top":"0rem","right":"0rem","bottom":"0rem","left":"1rem"}}},"layout":{"type":"flex","allowOrientation":false},"fontSize":"caption"} -->
31+
<div class="wp-block-group has-caption-font-size" style="padding-top:0rem;padding-right:0rem;padding-bottom:0rem;padding-left:1rem"><!-- wp:post-terms {"term":"post_tag","fontSize":"subtitle1"} /--></div>
3232
<!-- /wp:group --></footer>
3333
<!-- /wp:group -->
3434

0 commit comments

Comments
 (0)