Skip to content

Commit

Permalink
Merge pull request #45 from WordPress/try/gutenberg-starter-theme-blo…
Browse files Browse the repository at this point in the history 
…cks/global-styles

Gutenberg Starter Theme Blocks: Try adding new Global Styles Rules
  • Loading branch information
@kjellr
kjellr authored Jul 21, 2020
2 parents 8fe55c6 + 44dd749 commit 53ec337
Show file tree
Hide file tree
Showing 4 changed files with 234 additions and 347 deletions.
32 changes: 16 additions & 16 deletions gutenberg-starter-theme-blocks/css/blocks.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -340,34 +340,34 @@ ul.wp-block-latest-posts.is-grid.alignwide {
## Color Palette
--------------------------------------------------------------*/

.has-strong-blue-color {
color: #0073aa;
.has-primary-color {
color: var(--wp--preset--color--primary);
}

.has-strong-blue-background-color {
background-color: #0073aa;
.has-primary-background-color {
background-color: var(--wp--preset--color--primary);
}

.has-lighter-blue-color {
color: #229fd8;
.has-primary-light-color {
color: var(--wp--preset--color--primary-light);
}

.has-lighter-blue-background-color {
background-color: #229fd8;
.has-primary-light-background-color {
background-color: var(--wp--preset--color--primary-light);
}

.has-very-light-gray-color {
color: #eee;
.has-secondary-light-color {
color: var(--wp--preset--color--secondary-light);
}

.has-very-light-gray-background-color {
background-color: #eee;
.has-secondary-light-background-color {
background-color: var(--wp--preset--color--secondary-light);
}

.has-very-dark-gray-color {
color: #444;
.has-secondary-color {
color: var(--wp--preset--color--secondary);
}

.has-very-dark-gray-background-color {
background-color: #444;
.has-secondary-background-color {
background-color: var(--wp--preset--color--secondary);
}
194 changes: 194 additions & 0 deletions gutenberg-starter-theme-blocks/experimental-theme.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
{
"global": {
"presets": {
"color": [
{
"slug": "background",
"value": "#fff"
},
{
"slug": "background-dark",
"value": "#e6e6e6"
},
{
"slug": "foreground",
"value": "#191e23"
},
{
"slug": "foreground-light",
"value": "#666"
},
{
"slug": "border",
"value": "#ccc"
},
{
"slug": "primary",
"value": "#0073aa"
},
{
"slug": "primary-light",
"value": "#229fd8"
},
{
"slug": "secondary",
"value": "#444"
},
{
"slug": "secondary-light",
"value": "#eee"
}
],
"font-size": [
{
"slug": "small",
"value": "13px"
},
{
"slug": "normal",
"value": "16px"
},
{
"slug": "medium",
"value": "20px"
},
{
"slug": "large",
"value": "36px"
},
{
"slug": "huge",
"value": "48px"
}
],
"line-height": [
{
"slug": "small",
"value": "1.2"
},
{
"slug": "medium",
"value": "1.4"
},
{
"slug": "large",
"value": "1.8"
}
]
},
"styles": {
"color": {
"background": "var( --wp--preset--color--background )",
"text": "var( --wp--preset--color--foreground )"
}
}
},
"core/paragraph": {
"styles": {
"color": {
"link": "var( --wp--preset--color--primary )",
"text": "var( --wp--preset--color--foreground )"
},
"typography": {
"fontSize": "var( --wp--preset--font-size--normal )",
"lineHeight": "var( --wp--preset--line-height--large )"
}
}
},
"core/heading/h1": {
"styles": {
"color": {
"link": "var( --wp--preset--color--primary )",
"text": "var( --wp--preset--color--foreground )"
},
"typography": {
"fontSize": "var( --wp--preset--font-size--huge )",
"lineHeight": "var( --wp--preset--line-height--small )"
}
}
},
"core/heading/h2": {
"styles": {
"color": {
"link": "var( --wp--preset--color--primary )",
"text": "var( --wp--preset--color--foreground )"
},
"typography": {
"fontSize": "var( --wp--preset--font-size--large )",
"lineHeight": "var( --wp--preset--line-height--small )"
}
}
},
"core/heading/h3": {
"styles": {
"color": {
"link": "var( --wp--preset--color--primary )",
"text": "var( --wp--preset--color--foreground )"
},
"typography": {
"fontSize": "var( --wp--preset--font-size--medium )",
"lineHeight": "var( --wp--preset--line-height--medium )"
}
}
},
"core/heading/h4": {
"styles": {
"color": {
"link": "var( --wp--preset--color--primary )",
"text": "var( --wp--preset--color--foreground )"
},
"typography": {
"fontSize": "var( --wp--preset--font-size--normal )",
"lineHeight": "var( --wp--preset--line-height--medium )"
}
}
},
"core/heading/h5": {
"styles": {
"color": {
"link": "var( --wp--preset--color--primary )",
"text": "var( --wp--preset--color--foreground )"
},
"typography": {
"fontSize": "var( --wp--preset--font-size--small )",
"lineHeight": "var( --wp--preset--line-height--large )"
}
}
},
"core/heading/h6": {
"styles": {
"color": {
"link": "var( --wp--preset--color--primary )",
"text": "var( --wp--preset--color--foreground )"
},
"typography": {
"fontSize": "var( --wp--preset--font-size--small )",
"lineHeight": "var( --wp--preset--line-height--large )"
}
}
},
"core/columns": {
"styles": {
"color": {
"link": "var( --wp--preset--color--primary )",
"text": "var( --wp--preset--color--foreground )"
}
}
},
"core/group": {
"styles": {
"color": {
"link": "var( --wp--preset--color--primary )",
"text": "var( --wp--preset--color--foreground )"
}
}
},
"core/media-text": {
"styles": {
"color": {
"link": "var( --wp--preset--color--primary )",
"text": "var( --wp--preset--color--foreground )"
}
}
}
}
16 changes: 8 additions & 8 deletions gutenberg-starter-theme-blocks/functions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,24 +22,24 @@ function gutenberg_starter_theme_blocks_support() {
add_theme_support( 'editor-color-palette', array(
array(
'name' => __( 'Strong Blue', 'gutenberg-starter-theme-blocks' ),
'slug' => 'strong-blue',
'slug' => 'primary',
'color' => '#0073aa',
),
array(
'name' => __( 'Lighter Blue', 'gutenberg-starter-theme-blocks' ),
'slug' => 'lighter-blue',
'slug' => 'primary-light',
'color' => '#229fd8',
),
array(
'name' => __( 'Very Light Gray', 'gutenberg-starter-theme-blocks' ),
'slug' => 'very-light-gray',
'color' => '#eee',
),
array(
'name' => __( 'Very Dark Gray', 'gutenberg-starter-theme-blocks' ),
'slug' => 'very-dark-gray',
'slug' => 'secondary',
'color' => '#444',
),
array(
'name' => __( 'Very Light Gray', 'gutenberg-starter-theme-blocks' ),
'slug' => 'secondary-light',
'color' => '#eee',
)
) );

// Starter content
Expand Down
Loading

0 comments on commit 53ec337

Please sign in to comment.