Skip to content
This repository was archived by the owner on Jun 20, 2025. It is now read-only.

[Twenty Twenty Blocks] Try adding early Global Styles Support #26

Closed
kjellr wants to merge 7 commits into from
Closed

[Twenty Twenty Blocks] Try adding early Global Styles Support #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
05d54fa
Add experimental-theme.json
kjellr Feb 27, 2020
ab2163e
Update color values to match experimental-theme.json
kjellr Feb 27, 2020
257ffbd
Add additional styles
kjellr Feb 28, 2020
9e957e5
Load block styles into FSE
kjellr Feb 28, 2020
9f0b942
Replace values with new CSS variables.
kjellr Feb 28, 2020
c02ee20
Remove computed variables
jffng Mar 3, 2020
e375cc6
Override h1 editor font size
jffng Mar 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions twentytwenty-blocks/block-styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@
}

.is-style-header-nav .wp-block-navigation-link > ul {
background: #000;
border-color: #000;
background: var(--wp--color--text);
border-color: var(--wp--color--text);
border-radius: 0.4rem;
font-size: 1.7rem;
opacity: 0;
Expand Down
13 changes: 13 additions & 0 deletions twentytwenty-blocks/experimental-theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"color": {
"primary": "#cd2653",

@oandregal oandregal Mar 30, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As per the current changes at WordPress/gutenberg#20530 primary should be removed.

"background": "#f5efe0",
"text": "#000"
},
"typography": {
Comment thread
kjellr marked this conversation as resolved.

@oandregal oandregal Mar 30, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As per feedback, the variable generation mechanism is not going to make it into WordPress/gutenberg#20530 so I have to change the typography variables to something like:

	"typography": {
		"font-base": 16,
		"font-scale": 1.2,
		"font-weight-base": 400,
		"font-weight-heading": 400,
		"line-height-base": 1.5,
		"line-height-heading": 1.5
	}

@oandregal oandregal Mar 30, 2020 •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note how we declare base and heading alternatives for weight & line-height.

I reckon this is in flux and so it takes a bit of following up to keep up with the changes. I'm happy to submit these as they happen in the Gutenberg PR if that's helpful.

@oandregal oandregal Mar 30, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note for font-sizes: the current UI proposal by @karmatosed WordPress/gutenberg#21030 only exposes base and scale in the UI.

Hopefully, in a subsequent iteration, we're able to use calc or something along those lines in the theme.json itself. However, for this PR we're just pushing computation to CSS-land, based on font-base and font-scale values. See example.

@oandregal oandregal Mar 30, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm pushing at https://github.com/nosolosw/theme-experiments/tree/add/twentytwenty-globalstyles what I have to make this work with the latest version of the Gutenberg PR.

"font-scale": 1.3,
"font-size": "18px",
"font-weight": 400,
"line-height": 1.5
}
}
10 changes: 10 additions & 0 deletions twentytwenty-blocks/functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -307,3 +307,13 @@ function twentytwentyblocks_register_styles() {
wp_enqueue_style( 'twentytwentyblocks-style', get_stylesheet_uri(), array(), $theme_version );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyblocks_register_styles' );

// Load styles in edit-site,
// which doesn't use the add_editor_styles registration mechanism
// so styles aren't wrapped by .editor-styles-wrapper.
function twentytwentyblocks_register_FSE_styles() {
$theme_version = wp_get_theme()->get( 'Version' );
wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/twentytwenty-styles/editor-style-block.css', false, $theme_version );
wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'twentytwentyblocks_register_FSE_styles' );
Loading