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.

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

Allow themes to add inline styles for all blocks when using lazy styles loading #32275

Merged
merged 7 commits into from
Jun 8, 2021

Conversation

aristath
Copy link
Member

Description

Now that themes can opt-in to only load styles for rendered blocks, theme-authors can attach additional styles to specific blocks by using wp_add_inline_style( 'wp-block-group', '.wp-block-group{padding:2em;}' );. However, they are unable to do that for all blocks, so they can't conditionally load styles depending on what blocks exist on a page.
This PR fixes this issue by adding style and editorStyle in all block.json files where missing. Then, inside gutenberg_register_core_block_styles if a file doesn't exist for the registered style, a stylesheet will be registered using false as src. This way, if a theme adds inline styles to one of these blocks, they will be printed.

How has this been tested?

In a block them added the following inside the functions.php file:

add_filter( 'should_load_separate_core_block_assets', '__return_true' );
add_action( 'wp_enqueue_scripts', function() {
	wp_add_inline_style( 
		'wp-block-site-title',
		'.wp-block-site-title{transform:rotate(-30deg);}' // Because why not.
	);
} );

then went to the frontend and confirmed that the site-title block was rotated.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

@aristath aristath added the [Feature] Themes Questions or issues with incorporating or styling blocks in a theme. label May 27, 2021
@aristath aristath changed the title register empty styles for blocks that don't have any Allow themes to add inline styles for all blocks when using lazy styles loading May 27, 2021
lib/blocks.php Show resolved Hide resolved
lib/blocks.php Show resolved Hide resolved
@aristath aristath force-pushed the add/block-styles-register-no-file branch 2 times, most recently from 7e2d8cf to 3a39cea Compare June 7, 2021 13:26
@aristath aristath force-pushed the add/block-styles-register-no-file branch from 3a39cea to 67582a8 Compare June 8, 2021 09:51
Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

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

It all looks good. Let's get this in and ensure that the same logic gets included in WordPress core as part of the 5.8 release.

I left a minor note about the proposed location for the filter. Comment with a version when it can be removed is fine for now, too.

lib/blocks.php Outdated Show resolved Hide resolved
@aristath aristath merged commit fb481b7 into trunk Jun 8, 2021
@aristath aristath deleted the add/block-styles-register-no-file branch June 8, 2021 11:03
@github-actions github-actions bot added this to the Gutenberg 10.9 milestone Jun 8, 2021
youknowriad pushed a commit that referenced this pull request Jun 8, 2021
…es loading (#32275)

* register empty styles for blocks that don't have any

* add style & editorStyle in block.json where missing

* only do this if the file doesn't exist

* meh, missed the 2nd arg here

* Use a filter instead of modifying each block.json file.

* Use the register_block_type_args filter

* Move filter to compat files
@aristath aristath added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Jun 8, 2021
@youknowriad youknowriad removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Jun 8, 2021
aristath added a commit to aristath/wordpress-develop that referenced this pull request Jun 8, 2021
youknowriad pushed a commit that referenced this pull request Jun 8, 2021
…es loading (#32275)

* register empty styles for blocks that don't have any

* add style & editorStyle in block.json where missing

* only do this if the file doesn't exist

* meh, missed the 2nd arg here

* Use a filter instead of modifying each block.json file.

* Use the register_block_type_args filter

* Move filter to compat files
@aristath aristath mentioned this pull request Jun 9, 2021
3 tasks
aristath added a commit to aristath/wordpress-develop that referenced this pull request Jun 15, 2021
aristath added a commit to aristath/wordpress-develop that referenced this pull request Jun 23, 2021
aristath added a commit to aristath/wordpress-develop that referenced this pull request Jun 24, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Themes Questions or issues with incorporating or styling blocks in a theme.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants