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

Split core blocks assets loading #25220

Merged
merged 45 commits into from
Dec 11, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
45 commits
Select commit Hold shift + click to select a range
332a5be
Poorly split css files
aristath Sep 10, 2020
c349cae
Add style & editorStyle in block.json for all blocks
aristath Sep 10, 2020
59f83ac
change prefix from "core" to "wp"
aristath Sep 10, 2020
abd7a4d
Enqueue core block styles
aristath Sep 10, 2020
48de591
Only load styles for rendered blocks
aristath Sep 10, 2020
7e5866c
Merge branch 'master' into try/split-block-assets-loading
aristath Sep 14, 2020
78e25ab
remove is_feed() condition
aristath Sep 14, 2020
08f5583
Enqueue outside the is_registered() check
aristath Sep 14, 2020
923bbd9
Use register_block_type_from_metadata function to register site-logo
aristath Sep 14, 2020
5698860
Merge branch 'fix/site-logo-registration' into try/split-block-assets…
aristath Sep 14, 2020
2ed1a62
Add separate style for no-blocks
aristath Sep 14, 2020
ae9e26e
PHPCS fixes
aristath Sep 14, 2020
ff7b96b
Try splitting block-styles compiling
aristath Oct 1, 2020
4865c10
bugfixes
aristath Oct 2, 2020
0da1afc
Merge branch 'master' into try/split-block-assets-loading
aristath Oct 2, 2020
e98910a
Merge branch 'sustainability/split-block-styles' into try/split-block…
aristath Oct 2, 2020
d2cd042
these will now be taken care of in webpack
aristath Oct 2, 2020
d692c38
rename file
aristath Oct 2, 2020
9d8271c
tweak paths & add editor styles
aristath Oct 2, 2020
3a9ed36
Merge branch 'master'
aristath Oct 9, 2020
994a95b
Merge branch 'master' into try/split-block-assets-loading
aristath Nov 17, 2020
6aef0de
resolve merge conflict
aristath Nov 17, 2020
e551a83
Merge branch 'master' into try/split-block-assets-loading
aristath Nov 18, 2020
973da54
Add styles that were recently added
aristath Nov 18, 2020
9689d53
Bugfix: styles now get properly loaded only when used
aristath Nov 18, 2020
d185c07
Merge branch 'master' into try/split-block-assets-loading
aristath Nov 18, 2020
7e57414
Merge branch 'master' into try/split-block-assets-loading
aristath Nov 19, 2020
38133f2
Merge branch 'master' into try/split-block-assets-loading
aristath Nov 26, 2020
9913ba7
Merge branch 'master' into try/split-block-assets-loading
aristath Nov 27, 2020
476d9bf
Merge branch 'master' into try/split-block-assets-loading
aristath Nov 30, 2020
11d7d0c
Merge branch 'master' into try/split-block-assets-loading
aristath Dec 2, 2020
ee529a2
Add recently introduced stylesheet for the query loop
aristath Dec 2, 2020
58f83df
Merge branch 'master' into try/split-block-assets-loading
aristath Dec 3, 2020
309a4e6
code block styles were recently moved from editor to styles
aristath Dec 3, 2020
a87fd68
Add verse styles
aristath Dec 3, 2020
26c94f4
Merge branch 'master' into try/split-block-assets-loading
aristath Dec 7, 2020
9db606f
Merge branch 'master' into try/split-block-assets-loading
aristath Dec 9, 2020
423d76b
Merge branch 'master' into try/split-block-assets-loading
aristath Dec 10, 2020
2601d4e
"classic" is called "freeform"
aristath Dec 10, 2020
831e38a
add stylesTransform
aristath Dec 10, 2020
8a18dc8
Add gutenberg_should_load_separate_block_styles()
aristath Dec 10, 2020
ba8e3bf
rename classic block folder
aristath Dec 10, 2020
a27d3c3
Remove theme-support check
aristath Dec 10, 2020
16a7df3
Merge branch 'master' into try/split-block-assets-loading
aristath Dec 10, 2020
f5c745e
block folder was renamed to freeform
aristath Dec 10, 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
9 changes: 8 additions & 1 deletion bin/packages/build.js
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,14 @@ if ( files.length ) {
bar.tick( 0 );

stream = glob.stream(
[ `${ PACKAGES_DIR }/*/src/**/*.js`, `${ PACKAGES_DIR }/*/src/*.scss` ],
[
`${ PACKAGES_DIR }/*/src/**/*.js`,
`${ PACKAGES_DIR }/*/src/*.scss`,
`${ PACKAGES_DIR }/block-library/src/**/*.js`,
`${ PACKAGES_DIR }/block-library/src/*/style.scss`,
`${ PACKAGES_DIR }/block-library/src/*/editor.scss`,
`${ PACKAGES_DIR }/block-library/src/*.scss`,
gziolo marked this conversation as resolved.
Show resolved Hide resolved
],
{
ignore: [
`**/benchmark/**`,
Expand Down
45 changes: 44 additions & 1 deletion lib/blocks.php
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ function gutenberg_reregister_core_block_types() {
'audio',
'button',
'buttons',
'classic',
'freeform',
'code',
'column',
'columns',
Expand Down Expand Up @@ -120,6 +120,7 @@ function gutenberg_reregister_core_block_types() {
$registry->unregister( $metadata['name'] );
}

gutenberg_register_core_block_styles( $folder_name );
register_block_type_from_metadata( $block_json_file );
aristath marked this conversation as resolved.
Show resolved Hide resolved
}

Expand All @@ -132,11 +133,13 @@ function gutenberg_reregister_core_block_types() {
if ( $registry->is_registered( $block_names ) ) {
$registry->unregister( $block_names );
}
gutenberg_register_core_block_styles( $block_names );
} elseif ( is_array( $block_names ) ) {
foreach ( $block_names as $block_name ) {
if ( $registry->is_registered( $block_name ) ) {
$registry->unregister( $block_name );
}
gutenberg_register_core_block_styles( $block_name );
}
}

Expand All @@ -147,6 +150,46 @@ function gutenberg_reregister_core_block_types() {

add_action( 'init', 'gutenberg_reregister_core_block_types' );

/**
* Registers block styles for a core block.
*
* @param string $block_name The block-name.
*
* @return void
*/
function gutenberg_register_core_block_styles( $block_name ) {
if ( ! gutenberg_should_load_separate_block_styles() ) {
return;
}

$block_name = str_replace( 'core/', '', $block_name );
gziolo marked this conversation as resolved.
Show resolved Hide resolved
aristath marked this conversation as resolved.
Show resolved Hide resolved

$style_path = is_rtl()
? "build/block-library/blocks/$block_name/style-rtl.css"
: "build/block-library/blocks/$block_name/style.css";
$editor_style_path = is_rtl()
? "build/block-library/blocks/$block_name/style-editor-rtl.css"
: "build/block-library/blocks/$block_name/style-editor.css";
aristath marked this conversation as resolved.
Show resolved Hide resolved

if ( file_exists( gutenberg_dir_path() . $style_path ) ) {
wp_register_style(
'wp-block-' . $block_name,
gziolo marked this conversation as resolved.
Show resolved Hide resolved
gutenberg_url( $style_path ),
array(),
filemtime( gutenberg_dir_path() . $style_path )
);
}

if ( file_exists( gutenberg_dir_path() . $editor_style_path ) ) {
wp_register_style(
'wp-block-' . $block_name . '-editor',
gutenberg_url( $editor_style_path ),
array(),
filemtime( gutenberg_dir_path() . $editor_style_path )
);
}
}

/**
* Complements the implementation of block type `core/social-icon`, whether it
* be provided by core or the plugin, with derived block types for each
Expand Down
5 changes: 3 additions & 2 deletions lib/client-assets.php
Original file line number Diff line number Diff line change
Expand Up @@ -335,12 +335,13 @@ function gutenberg_register_packages_styles( $styles ) {
);
$styles->add_data( 'wp-components', 'rtl', 'replace' );

$block_library_filename = gutenberg_should_load_separate_block_styles() ? 'common' : 'style';
gutenberg_override_style(
$styles,
'wp-block-library',
gutenberg_url( 'build/block-library/style.css' ),
gutenberg_url( 'build/block-library/' . $block_library_filename . '.css' ),
array(),
filemtime( gutenberg_dir_path() . 'build/block-library/style.css' )
filemtime( gutenberg_dir_path() . 'build/block-library/' . $block_library_filename . '.css' )
);
$styles->add_data( 'wp-block-library', 'rtl', 'replace' );

Expand Down
42 changes: 42 additions & 0 deletions lib/compat.php
Original file line number Diff line number Diff line change
Expand Up @@ -412,6 +412,48 @@ function gutenberg_render_block_with_assigned_block_context( $pre_render, $parse
}
add_filter( 'pre_render_block', 'gutenberg_render_block_with_assigned_block_context', 9, 2 );

/**
* Determine if the current theme needs to load separate block styles or not.
*
* @return bool
*/
function gutenberg_should_load_separate_block_styles() {
$load_separate_styles = gutenberg_is_fse_theme();
/**
* Determine if separate styles will be loaded for blocks on-render or not.
*
* @param bool $load_separate_styles Whether separate styles will be loaded or not.
*
* @return bool
*/
return apply_filters( 'load_separate_block_styles', $load_separate_styles );
}

/**
* Remove the `wp_enqueue_registered_block_scripts_and_styles` hook if needed.
*
* @return void
*/
function gutenberg_remove_hook_wp_enqueue_registered_block_scripts_and_styles() {
if ( gutenberg_should_load_separate_block_styles() ) {
/**
* Avoid enqueueing block assets of all registered blocks for all posts, instead
* deferring to block render mechanics to enqueue scripts, thereby ensuring only
* blocks of the content have their assets enqueued.
*
* This can be removed once minimum support for the plugin is outside the range
* of the version associated with closure of the following ticket.
*
* @see https://core.trac.wordpress.org/ticket/50328
*
* @see WP_Block::render
*/
remove_action( 'enqueue_block_assets', 'wp_enqueue_registered_block_scripts_and_styles' );
}
}

add_action( 'init', 'gutenberg_remove_hook_wp_enqueue_registered_block_scripts_and_styles' );
Copy link
Member

Choose a reason for hiding this comment

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

The same action is assigned twice for the front-end and admin screens:

https://github.com/WordPress/wordpress-develop/blob/9fc20595b651ebd543e742b1056b38d5c670a9e6/src/wp-includes/default-filters.php#L520-L521

It's a reminder to myself as it's easy to forget how it all works.


/**
* Callback hooked to the register_block_type_args filter.
*
Expand Down
3 changes: 2 additions & 1 deletion packages/block-library/src/archives/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,6 @@
"supports": {
"align": true,
"html": false
}
},
"editorStyle": "wp-block-archives-editor"
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't like that this refers to handle, for me it should be the opposite. the block.json links to files and handlers are auto-registered based on the block.json file making block.json the source of truth for block configs. Is this possible?

Copy link
Member Author

Choose a reason for hiding this comment

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

Hmmm these are basically just passed-on to register_block_type via register_block_type_from_metadata.
Ideally, style and ediorStyle would be the URLs of the stylesheets, but I don't know at this point if we can actually change it, there are lots of plugins out there that are already using them in register_block_type, so any changes would have to basically cascade in all functions, check if it's a URL or a handle and act accordingly 🤔
If we want to only change it for the block.json files and not make any changes to register_block_type, things will probably get more complicated since we have no way of dynamically defining a URL inside the static json file

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 supported in this method https://github.com/WordPress/wordpress-develop/blob/2a46c3987f806ea4aae642320101440260b1aba9/src/wp-includes/blocks.php#L144 that is used inside register_block_type_from_metadata. You can provide the local path prefixed with file: (similar to npm paths for local dependencies) as style or editorStyle. The rest will be handled behind the scenes.

However, it doesn't support RTL version for CSS yet. Besides it isn't guarded with the feature flag proposed here. We discussed it in one of the comments above.

We should improve what WordPress Core has and in my opinion it would work with paths provided in block.json. In general, whenever adding APIs to Core we should introduce hooks more often to allow ourselves to apply such modifications inside the plugin 😅

Copy link
Member Author

@aristath aristath Dec 10, 2020

Choose a reason for hiding this comment

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

oooh nice, I didn't know about that ❤️ Do you think we should do that in this PR? Or should we do that refactor later in a separate PR?

}
4 changes: 3 additions & 1 deletion packages/block-library/src/audio/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,5 +39,7 @@
"supports": {
"anchor": true,
"align": true
}
},
"editorStyle": "wp-block-audio-editor",
"style": "wp-block-audio"
}
3 changes: 2 additions & 1 deletion packages/block-library/src/block/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,6 @@
"customClassName": false,
"html": false,
"inserter": false
}
},
"editorStyle": "wp-block-editor"
}
4 changes: 3 additions & 1 deletion packages/block-library/src/button/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -63,5 +63,7 @@
"alignWide": false,
"reusable": false,
"__experimentalSelector": ".wp-block-button > a"
}
},
"editorStyle": "wp-block-button-editor",
"style": "wp-block-button"
}
4 changes: 3 additions & 1 deletion packages/block-library/src/buttons/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,7 @@
"supports": {
"anchor": true,
"align": [ "wide", "full" ]
}
},
"editorStyle": "wp-block-buttons-editor",
"style": "wp-block-buttons"
}
3 changes: 2 additions & 1 deletion packages/block-library/src/calendar/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,6 @@
},
"supports": {
"align": true
}
},
"style": "wp-block-calendar"
}
4 changes: 3 additions & 1 deletion packages/block-library/src/categories/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,7 @@
"supports": {
"align": true,
"html": false
}
},
"editorStyle": "wp-block-categories-editor",
"style": "wp-block-categories"
}
3 changes: 2 additions & 1 deletion packages/block-library/src/code/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,6 @@
"supports": {
"anchor": true,
"fontSize": true
}
},
"style": "wp-block-code"
}
4 changes: 3 additions & 1 deletion packages/block-library/src/columns/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,7 @@
"gradients": true,
"link": true
}
}
},
"editorStyle": "wp-block-columns-editor",
"style": "wp-block-columns"
}
66 changes: 66 additions & 0 deletions packages/block-library/src/common.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
// The following selectors have increased specificity (using the :root prefix)
// to assure colors take effect over another base class color, mainly to let
// the colors override the added specificity by link states such as :hover.

:root {
// Background colors.
@include background-colors();

// Foreground colors.
@include foreground-colors();

// Gradients
@include gradient-colors();

.has-link-color a {
color: var(--wp--style--color--link, #00e);
}
}

// Font sizes.
.has-small-font-size {
font-size: 0.8125em;
}

.has-regular-font-size, // Not used now, kept because of backward compatibility.
.has-normal-font-size {
font-size: 1em;
}

.has-medium-font-size {
font-size: 1.25em;
}

.has-large-font-size {
font-size: 2.25em;
}

.has-larger-font-size, // Not used now, kept because of backward compatibility.
.has-huge-font-size {
font-size: 2.625em;
}

// Text alignments.
.has-text-align-center {
text-align: center;
}

.has-text-align-left {
/*rtl:ignore*/
text-align: left;
}

.has-text-align-right {
/*rtl:ignore*/
text-align: right;
}

// This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
#end-resizable-editor-section {
display: none;
}

// Block alignments.
.aligncenter {
clear: both;
}
4 changes: 3 additions & 1 deletion packages/block-library/src/cover/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -57,5 +57,7 @@
"spacing": {
"padding": true
}
}
},
"editorStyle": "wp-block-cover-editor",
"style": "wp-block-cover"
}
2 changes: 1 addition & 1 deletion packages/block-library/src/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
@import "./cover/editor.scss";
@import "./embed/editor.scss";
@import "./file/editor.scss";
@import "./classic/editor.scss";
@import "./freeform/editor.scss";
@import "./gallery/editor.scss";
@import "./group/editor.scss";
@import "./heading/editor.scss";
Expand Down
4 changes: 3 additions & 1 deletion packages/block-library/src/embed/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,5 +34,7 @@
"align": true,
"reusable": false,
"html": false
}
},
"editorStyle": "wp-block-embed-editor",
"style": "wp-block-embed"
}
4 changes: 3 additions & 1 deletion packages/block-library/src/file/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -39,5 +39,7 @@
"supports": {
"anchor": true,
"align": true
}
},
"editorStyle": "wp-block-file-editor",
"style": "wp-block-file"
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,6 @@
"className": false,
"customClassName": false,
"reusable": false
}
},
"editorStyle": "wp-block-freeform-editor"
}
4 changes: 3 additions & 1 deletion packages/block-library/src/gallery/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -79,5 +79,7 @@
"supports": {
"anchor": true,
"align": true
}
},
"editorStyle": "wp-block-gallery-editor",
"style": "wp-block-gallery"
}
4 changes: 3 additions & 1 deletion packages/block-library/src/group/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -25,5 +25,7 @@
"spacing": {
"padding": true
}
}
},
"editorStyle": "wp-block-group-editor",
"style": "wp-block-group"
}
4 changes: 3 additions & 1 deletion packages/block-library/src/heading/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -74,5 +74,7 @@
}
},
"__unstablePasteTextInline": true
}
},
"editorStyle": "wp-block-heading-editor",
"style": "wp-block-heading"
}
3 changes: 2 additions & 1 deletion packages/block-library/src/html/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,6 @@
"customClassName": false,
"className": false,
"html": false
}
},
"editorStyle": "wp-block-html-editor"
}
4 changes: 3 additions & 1 deletion packages/block-library/src/image/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -72,5 +72,7 @@
},
"supports": {
"anchor": true
}
},
"editorStyle": "wp-block-image-editor",
"style": "wp-block-image"
}
2 changes: 1 addition & 1 deletion packages/block-library/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ import * as textColumns from './text-columns';
import * as verse from './verse';
import * as video from './video';
import * as tagCloud from './tag-cloud';
import * as classic from './classic';
import * as classic from './freeform';
import * as socialLinks from './social-links';
import * as socialLink from './social-link';

Expand Down
Loading