Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Twenty Twenty Blocks: Try adding new Global Styles Rules #44

Merged
merged 18 commits into from
Jul 21, 2020
Merged

Twenty Twenty Blocks: Try adding new Global Styles Rules #44

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
18 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
a261eec
Update experimental-theme.json.
kjellr Jun 23, 2020
523f12d
Merge branch 'master' into add/twenty-twenty-global-styles
kjellr Jun 23, 2020
a15c1b3
Make sure styles are loaded into the full-site editor.
kjellr Jun 23, 2020
ab5cdc4
Switch to using the Query Loop block in index.html
kjellr Jul 14, 2020
fe1e88e
Fix typography variables.
kjellr Jul 14, 2020
5cd00a6
Remove unnecessary styles.
kjellr Jul 14, 2020
69b03a1
Fix alignment of entry content.
kjellr Jul 14, 2020
a442c52
Tidy up editor styles.
kjellr Jul 14, 2020
cfeb4dc
Remove unused variables.
kjellr Jul 14, 2020
79ae323
Rename text color to foreground color.
kjellr Jul 21, 2020
5fce20a
Rewrite custom color styles so they work for buttons.
kjellr Jul 21, 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--preset--color--text);
border-color: var(--wp--preset--color--text);
border-radius: 0.4rem;
font-size: 1.7rem;
opacity: 0;
Expand Down
6 changes: 5 additions & 1 deletion twentytwenty-blocks/block-templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@
<!-- /wp:group -->

<!-- wp:group {"align":"full","className":"site-content"} -->
<div class="wp-block-group alignfull site-content"><div class="wp-block-group__inner-container"><!-- wp:post-title /--><!-- wp:post-content /--></div></div>
<div class="wp-block-group alignfull site-content"><div class="wp-block-group__inner-container"><!-- wp:query-loop -->
<!-- wp:post-title /-->

<!-- wp:post-content /-->
<!-- /wp:query-loop --></div></div>
<!-- /wp:group -->

<!-- wp:group {"align":"full","className":"site-footer"} -->
Expand Down
58 changes: 58 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,58 @@
{
"global": {
"presets": {
"color": [
{
"slug": "background",
"value": "#f5efe0"
},
{
"slug": "text",
"value": "#000"
},
{
"slug": "primary",
"value": "#cd2653"
}
],
"font-size": [
{
"slug": "small",
"value": "20px"
},
{
"slug": "normal",
"value": "22px"
},
{
"slug": "large",
"value": "37px"
},
{
"slug": "huge",
"value": "50px"
}
],
"line-height": [
{
"slug": "normal",
"value": "1.8"
},
{
"slug": "heading",
"value": "1.4"
}
],
"font-weight": [
{
"slug": "normal",
"value": "normal"
},
{
"slug": "heading",
"value": "700"
}
]
}
}
}
40 changes: 20 additions & 20 deletions twentytwenty-blocks/functions.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,29 +52,19 @@ function twentytwentyblocks_theme_support() {
'editor-color-palette',
array(
array(
'name' => __( 'Primary', 'twentytwenty-blocks' ),
'slug' => 'primary',
'color' => '#0073AA',
),
array(
'name' => __( 'Secondary', 'twentytwenty-blocks' ),
'slug' => 'secondary',
'color' => '#005177',
'name' => __( 'Background', 'twentytwenty-blocks' ),
kjellr marked this conversation as resolved.
Show resolved Hide resolved
'slug' => 'background',
'color' => '#f5efe0',
),
array(
'name' => __( 'Dark Gray', 'twentytwenty-blocks' ),
'slug' => 'dark-gray',
'color' => '#111',
'name' => __( 'Text', 'twentytwenty-blocks' ),
'slug' => 'text',
'color' => '#000',
),
array(
'name' => __( 'Light Gray', 'twentytwenty-blocks' ),
'slug' => 'light-gray',
'color' => '#767676',
),
array(
'name' => __( 'White', 'twentytwenty-blocks' ),
'slug' => 'white',
'color' => '#FFF',
'name' => __( 'Primary', 'twentytwenty-blocks' ),
'slug' => 'primary',
'color' => '#cd2653',
),
)
);
Expand Down Expand Up @@ -308,6 +298,16 @@ function twentytwentyblocks_register_styles() {
}
add_action( 'wp_enqueue_scripts', 'twentytwentyblocks_register_styles' );

/**
* Load styles into Edit Site
* (This shouldn't be necessary but it seems to be for now.)
*/
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' );

/**
* Register Block Patterns.
Expand All @@ -321,4 +321,4 @@ function twentytwentyblocks_register_styles() {
'content' => "<!-- wp:columns {\"align\":\"wide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image {\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://2020.wordpress.net/wp-content/uploads/2019/10/2020-three-quarters-1.png\" alt=\"\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>Works and Days</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"fontSize\":\"larger\"} -->\n<p class=\"has-larger-font-size\">August 1 – December 1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link\">Read More</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image {\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://2020.wordpress.net/wp-content/uploads/2019/10/2020-three-quarters-2.png\" alt=\"\"/></figure>\n<!-- /wp:image -->\n\n<!-- wp:heading -->\n<h2>The Life I Deserve</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"fontSize\":\"larger\"} -->\n<p class=\"has-larger-font-size\">August 1 – December 1</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link\">Read More</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->",
)
);
}
}
26 changes: 12 additions & 14 deletions twentytwenty-blocks/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,13 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
*/
@import url('twentytwenty-styles/style.css');

/*
* Set the default link color.
*/
:root {
--wp--style--color--link: var(--wp--preset--color--primary);
}

/*
** Header
*/
Expand Down Expand Up @@ -48,22 +55,13 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
background-color: #fff;
}


/*
** Entry Header
** Site Content
** (Extra specificity here is necessary to override default theme styles for content within Group block inner containers.)
*/

.site-content > h1:first-child {
width: 100%;
padding: 4rem 2rem;
margin: 0 0 4rem;
text-align: center;
background: #FFF;
}

@media screen and (min-width: 700px) {
.site-content > h1:first-child {
padding: 8rem 2rem;
}
.site-content > .wp-block-group__inner-container > .entry-content:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
max-width: inherit;
}

/*
Expand Down
Loading