Skip to content

Commit

Permalink
Take block data for Global Styles from block.json (#22698)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nosolosw
nosolosw authored Jun 3, 2020
1 parent ab878d5 commit df4bf4a
Show file tree
Hide file tree
Showing 4 changed files with 239 additions and 99 deletions.
172 changes: 126 additions & 46 deletions docs/designers-developers/developers/themes/theme-json.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
This is documentation for the current direction and work in progress about how themes can hook into the various sub-systems that the Block Editor provides.

* Rationale
* Specification
* Current Status
- Rationale
- Specification
- Current Status

## Rationale

Expand Down Expand Up @@ -153,8 +153,16 @@ Each block will declare which style properties it exposes. This has been coined

The list of properties that are currently exposed via this method are:

- Paragraph and Heading: line-height, font-size, color.
- Group, Columns, and MediaText: color.
| Context | Text's Color | Background's Color | Background's Gradient | Font Size | Line Height |
| --- | --- | --- | --- | --- | --- |
| Global | - | Yes | - | - | - |
| Paragraph | Yes | Yes | - | Yes | Yes |
| Heading [1] | Yes | Yes | - | Yes | Yes |
| Group | Yes | Yes | Yes | - | - |
| Columns | Yes | Yes | Yes | - | - |
| Media & text | Yes | Yes | Yes | - | - |

[1] The heading block represents 6 distinct HTML elements: H1-H6. It comes with selectors to target each individual element (ex: core/heading/h1 for H1, etc).

### Features

Expand All @@ -164,74 +172,146 @@ This is being implemented, so it's not currently available.

```
{
global: {
presets: {
color: [
"global": {
"presets": {
"color": [
{
slug: <preset slug>,
value: <preset value>,
"slug": <preset slug>,
"value": <preset value>
},
{ ... },
{ <more colors> }
],
font-size: [
"font-size": [
{
slug: <preset slug>,
value: <preset value>,
"slug": <preset slug>,
"value": <preset value>
},
{ ... },
{ <more font sizes> }
],
gradient: [
"gradient": [
{
slug: <preset slug>,
value: <preset value>,
"slug": <preset slug>,
"value": <preset value>
},
{ ... },
{ <more gradients> }
]
},
"styles: {
"color: {
"background": <value>
}
}
},
core/paragraph: {
styles: {
typography: {
lineHeight: <value>,
fontSize: <value>
"core/paragraph": {
"styles": {
"typography": {
"fontSize": <value>,
"lineHeight": <value>
},
color: {
text: <value>
"color": {
"background": <value>,
"text": <value>
}
}
},
/* core/heading/h1, core/heading/h2, etc */
core/heading/h*: {
styles: {
typography: {
lineHeight: <value>,
fontSize: <value>
"core/heading/h1": {
"styles": {
"typography": {
"fontSize": <value>,
"lineHeight": <value>
},
color: {
text: <value>
"color": {
"background": <value>,
"text": <value>
}
}
},
core/columns: {
styles: {
color: {
text: <value>
"core/heading/h2": {
"styles": {
"typography": {
"fontSize": <value>,
"lineHeight": <value>
},
"color": {
"background": <value>,
"text": <value>
}
}
},
core/group: {
styles: {
color: {
text: <value>
"core/heading/h3": {
"styles": {
"typography": {
"fontSize": <value>,
"lineHeight": <value>
},
"color": {
"background": <value>,
"text": <value>
}
}
},
"core/heading/h4": {
"styles": {
"typography": {
"fontSize": <value>,
"lineHeight": <value>
},
"color": {
"background": <value>,
"text": <value>
}
}
},
core/media-text: {
styles: {
color: {
text: <value>
"core/heading/h5": {
"styles": {
"typography": {
"fontSize": <value>,
"lineHeight": <value>
},
"color": {
"background": <value>,
"text": <value>
}
}
},
"core/heading/h6": {
"styles": {
"typography": {
"fontSize": <value>,
"lineHeight": <value>
},
"color": {
"background": <value>,
"text": <value>
}
}
},
"core/columns": {
"styles": {
"color": {
"background": <value>,
"gradient": <value>,
"text": <value>
}
}
},
"core/group": {
"styles": {
"color": {
"background": <value>,
"gradient": <value>,
"text": <value>
}
}
},
"core/media-text": {
"styles": {
"color": {
"background": <value>,
"gradient": <value>,
"text": <value>
}
}
}
}
```
145 changes: 98 additions & 47 deletions lib/global-styles.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,13 @@ function gutenberg_experimental_global_styles_get_from_file( $file_path ) {
file_get_contents( $file_path ),
true
);

$json_decoding_error = json_last_error();
if ( JSON_ERROR_NONE !== $json_decoding_error ) {
error_log( 'Error when decoding file schema: ' . json_last_error_msg() );
return $config;
}

if ( is_array( $decoded_file ) ) {
$config = $decoded_file;
}
Expand All @@ -97,6 +104,13 @@ function gutenberg_experimental_global_styles_get_user() {
$user_cpt = gutenberg_experimental_global_styles_get_user_cpt( array( 'publish' ) );
if ( array_key_exists( 'post_content', $user_cpt ) ) {
$decoded_data = json_decode( $user_cpt['post_content'], true );

$json_decoding_error = json_last_error();
if ( JSON_ERROR_NONE !== $json_decoding_error ) {
error_log( 'Error when decoding user schema: ' . json_last_error_msg() );
return $config;
}

if ( is_array( $decoded_data ) ) {
$config = $decoded_data;
}
Expand Down Expand Up @@ -253,64 +267,101 @@ function gutenberg_experimental_global_styles_get_theme() {
return $theme_config;
}

/**
* Returns the style features a particular block supports.
*
* @param array $supports The block supports array.
*
* @return array Style features supported by the block.
*/
function gutenberg_experimental_global_styles_get_supported_styles( $supports ) {
$style_features = array(
'color' => array( '__experimentalColor' ),
'background-color' => array( '__experimentalColor' ),
'background' => array( '__experimentalColor', 'gradients' ),
'line-height' => array( '__experimentalLineHeight' ),
'font-size' => array( '__experimentalFontSize' ),
);

$supported_features = array();
foreach ( $style_features as $style_feature => $path ) {
if ( gutenberg_experimental_get( $supports, $path ) ) {
$supported_features[] = $style_feature;
}
}

return $supported_features;
}

/**
* Retrieves the block data (selector/supports).
*
* @return array
*/
function gutenberg_experimental_global_styles_get_block_data() {
// TODO: this data should be taken from the block registry.
//
// At the moment this array replicates the current capabilities
// declared by blocks via __experimentalLineHeight,
// __experimentalColor, and __experimentalFontSize.
$block_data = array(
'global' => array(
'global' => array(
'selector' => ':root',
'supports' => array(), // By being blank, the 'global' section won't output any style yet.
),
'core/paragraph' => array(
'selector' => 'p',
'supports' => array( 'line-height', 'font-size', 'color' ),
),
'core/heading/h1' => array(
'selector' => 'h1',
'supports' => array( 'line-height', 'font-size', 'color' ),
),
'core/heading/h2' => array(
'selector' => 'h2',
'supports' => array( 'line-height', 'font-size', 'color' ),
),
'core/heading/h3' => array(
'selector' => 'h3',
'supports' => array( 'line-height', 'font-size', 'color' ),
),
'core/heading/h4' => array(
'selector' => 'h4',
'supports' => array( 'line-height', 'font-size', 'color' ),
),
'core/heading/h5' => array(
'selector' => 'h5',
'supports' => array( 'line-height', 'font-size', 'color' ),
),
'core/heading/h6' => array(
'selector' => 'h6',
'supports' => array( 'line-height', 'font-size', 'color' ),
),
'core/columns' => array(
'selector' => '.wp-block-columns',
'supports' => array( 'color' ),
),
'core/group' => array(
'selector' => '.wp-block-group',
'supports' => array( 'color' ),
),
'core/media-text' => array(
'selector' => '.wp-block-media-text',
'supports' => array( 'color' ),
'supports' => array( 'background-color' ),
),
);

$registry = WP_Block_Type_Registry::get_instance();
foreach ( $registry->get_all_registered() as $block_name => $block_type ) {
if ( ! is_array( $block_type->supports ) ) {
continue;
}

$supports = gutenberg_experimental_global_styles_get_supported_styles( $block_type->supports );
if ( empty( $supports ) ) {
continue;
}

/*
* Assign the selector for the block.
*
* Some blocks can declare multiple selectors:
*
* - core/heading represents the H1-H6 HTML elements
* - core/list represents the UL and OL HTML elements
* - core/group is meant to represent DIV and other HTML elements
*
* Some other blocks don't provide a selector,
* so we generate a class for them based on their name:
*
* - 'core/group' => '.wp-block-group'
* - 'my-custom-library/block-name' => '.wp-block-my-custom-library-block-name'
*
* Note that, for core blocks, we don't add the `core/` prefix to its class name.
* This is for historical reasons, as they come with a class without that infix.
*
*/
if (
isset( $block_type->supports['__experimentalSelector'] ) &&
is_string( $block_type->supports['__experimentalSelector'] )
) {
$block_data[ $block_name ] = array(
'selector' => $block_type->supports['__experimentalSelector'],
'supports' => $supports,
);
} elseif (
isset( $block_type->supports['__experimentalSelector'] ) &&
is_array( $block_type->supports['__experimentalSelector'] )
) {
foreach ( $block_type->supports['__experimentalSelector'] as $key => $selector ) {
$block_data[ $key ] = array(
'selector' => $selector,
'supports' => $supports,
);
}
} else {
$block_data[ $block_name ] = array(
'selector' => '.wp-block-' . str_replace( '/', '-', str_replace( 'core/', '', $block_name ) ),
'supports' => $supports,
);
}
}

return $block_data;
}

Expand Down
Loading

0 comments on commit df4bf4a

Please sign in to comment.