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

Jump to bottom

Apply the custom global styles CSS variables on the server #21420

Closed
wants to merge 1 commit into from
Closed

Apply the custom global styles CSS variables on the server #21420

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
79 changes: 79 additions & 0 deletions lib/global-styles.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -339,3 +339,82 @@ function gutenberg_experimental_global_styles_register_cpt() {
add_action( 'wp_enqueue_scripts', 'gutenberg_experimental_global_styles_enqueue_assets' );
add_action( 'admin_enqueue_scripts', 'gutenberg_experimental_global_styles_enqueue_assets_editor' );
}

/**
* Flatten a nested Global styles config and generates the corresponding
* flattened CSS variables.
*
* @param array $config Styles configuration.
* @return array Flattened CSS variables declaration.
*/
function gutenberg_get_nested_css_variables( $config ) {
$result = [];
$token = '--';
foreach ( $config as $key => $value ) {
if ( ! is_array( $value ) ) {
$result[ sanitize_title_with_dashes( $key ) ] = $value;
} else {
$nested_css_variables = gutenberg_get_nested_css_variables( $value );
foreach ( $nested_css_variables as $subkey => $subvalue ) {
$result[ sanitize_title_with_dashes( $key ) . $token . $subkey ] = $subvalue;
}
}
}

return $result;
};

/**
* Flatten a nested Global styles config and generates the corresponding
* flattened CSS variables.
*
* @param array $styles Styles configuration.
* @return array Flattened CSS variables declaration.
*/
function gutenberg_get_css_variables( $styles = [] ) {
$prefix = '--wp';
$token = '--';

$result = [];
foreach ( gutenberg_get_nested_css_variables( $styles ) as $key => $value ) {
$result[] = $prefix . $token . $key . ':' . $value;
}
return $result;
}

/**
* Renders the CSS variables for blocks
*
* @param string $block_content Output of the current block.
* @param array $block Block Object.
* @return string New block output.
*/
function gutenberg_apply_style_attribute( $block_content, $block ) {
if ( isset( $block['attrs'] ) && isset( $block['attrs']['style'] ) ) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ideally this doesn't rely on the attributes presence but on the "support flag". We need server-side awareness of support flags. cc @gziolo did you work on that?

Copy link
Member

Choose a reason for hiding this comment

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

Not yet, the plan was to come up with something better than supports :)

Anyway, supports works on the server and can be exposed when registered there to the client. So we should be good in that context. You just need to say we want it and we can implement everything. @aduth has some custom code that shims classname or align flags on the server. We can add the same logic for everything else.

Let me know whether we should update https://github.com/WordPress/gutenberg/blob/master/docs/rfc/block-registration.md#backward-compatibility and the part that states that supports is client-side only and exists only for backward compatibility.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, I'm thinking more and more that supports is actually a good thing if done right. Don't know what you'll think.

Copy link
Member

Choose a reason for hiding this comment

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

It's probably fine to keep it as is but make it more configurable. We still need to use data that can be serialized but we shouldn't limit ourselves to boolean.

$extra_styles = implode(';',gutenberg_get_css_variables($block['attrs']['style']));

// Try replacing an existing style
$style_regex = '/((^\s*<[a-zA-Z]+\b[^><]*)style="([^"]*)")([^><]*>.*)/';
$updated_content = preg_replace_callback($style_regex, function($matches) use($extra_styles) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Should the preg_replace* calls use $limit = 1?

return (
$matches[2] .
'style="' . $matches[3] . ';' . $extra_styles .'"' .
$matches[4]
);
}, $block_content);

// If no changes, add a new style
if ( $updated_content === $block_content ) {
$no_style_regex = '/(^\s*<[a-zA-Z]+\b[^><]*)(>.*)/';
$updated_content = preg_replace_callback($no_style_regex, function($matches) use($extra_styles) {
return $matches[1] . ' style="'. $extra_styles .'"' . $matches[2];
}, $block_content);
}

return $updated_content;
}

return $block_content;
}

add_filter( 'render_block', 'gutenberg_apply_style_attribute', 10, 2 );
6 changes: 0 additions & 6 deletions packages/block-editor/src/hooks/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,12 +133,6 @@ addFilter(
addAttribute
);

addFilter(
'blocks.getSaveContent.extraProps',
'core/style/addSaveProps',
addSaveProps
);

addFilter(
'blocks.registerBlockType',
'core/style/addEditProps',
Expand Down