Skip to content

Commit 37163dc

Browse files
aristatharistath
authored
Split core blocks assets loading for FSE themes (WordPress#25220)
* Poorly split css files * Add style & editorStyle in block.json for all blocks * change prefix from "core" to "wp" * Enqueue core block styles * Only load styles for rendered blocks * remove is_feed() condition * Enqueue outside the is_registered() check * Use register_block_type_from_metadata function to register site-logo * Add separate style for no-blocks * PHPCS fixes * Try splitting block-styles compiling * bugfixes * these will now be taken care of in webpack * rename file * tweak paths & add editor styles * resolve merge conflict * Add styles that were recently added * Bugfix: styles now get properly loaded only when used * Add recently introduced stylesheet for the query loop * code block styles were recently moved from editor to styles * Add verse styles * "classic" is called "freeform" * add stylesTransform
1 parent 229beaa commit 37163dc

File tree

68 files changed

+365
-147
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+365
-147
lines changed

‎bin/packages/build.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,14 @@ if ( files.length ) {
193193
bar.tick( 0 );
194194

195195
stream = glob.stream(
196-
[ `${ PACKAGES_DIR }/*/src/**/*.js`, `${ PACKAGES_DIR }/*/src/*.scss` ],
196+
[
197+
`${ PACKAGES_DIR }/*/src/**/*.js`,
198+
`${ PACKAGES_DIR }/*/src/*.scss`,
199+
`${ PACKAGES_DIR }/block-library/src/**/*.js`,
200+
`${ PACKAGES_DIR }/block-library/src/*/style.scss`,
201+
`${ PACKAGES_DIR }/block-library/src/*/editor.scss`,
202+
`${ PACKAGES_DIR }/block-library/src/*.scss`,
203+
],
197204
{
198205
ignore: [
199206
`**/benchmark/**`,

‎lib/blocks.php

+44-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ function gutenberg_reregister_core_block_types() {
1717
'audio',
1818
'button',
1919
'buttons',
20-
'classic',
20+
'freeform',
2121
'code',
2222
'column',
2323
'columns',
@@ -120,6 +120,7 @@ function gutenberg_reregister_core_block_types() {
120120
$registry->unregister( $metadata['name'] );
121121
}
122122

123+
gutenberg_register_core_block_styles( $folder_name );
123124
register_block_type_from_metadata( $block_json_file );
124125
}
125126

@@ -132,11 +133,13 @@ function gutenberg_reregister_core_block_types() {
132133
if ( $registry->is_registered( $block_names ) ) {
133134
$registry->unregister( $block_names );
134135
}
136+
gutenberg_register_core_block_styles( $block_names );
135137
} elseif ( is_array( $block_names ) ) {
136138
foreach ( $block_names as $block_name ) {
137139
if ( $registry->is_registered( $block_name ) ) {
138140
$registry->unregister( $block_name );
139141
}
142+
gutenberg_register_core_block_styles( $block_name );
140143
}
141144
}
142145

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

148151
add_action( 'init', 'gutenberg_reregister_core_block_types' );
149152

153+
/**
154+
* Registers block styles for a core block.
155+
*
156+
* @param string $block_name The block-name.
157+
*
158+
* @return void
159+
*/
160+
function gutenberg_register_core_block_styles( $block_name ) {
161+
if ( ! gutenberg_should_load_separate_block_styles() ) {
162+
return;
163+
}
164+
165+
$block_name = str_replace( 'core/', '', $block_name );
166+
167+
$style_path = is_rtl()
168+
? "build/block-library/blocks/$block_name/style-rtl.css"
169+
: "build/block-library/blocks/$block_name/style.css";
170+
$editor_style_path = is_rtl()
171+
? "build/block-library/blocks/$block_name/style-editor-rtl.css"
172+
: "build/block-library/blocks/$block_name/style-editor.css";
173+
174+
if ( file_exists( gutenberg_dir_path() . $style_path ) ) {
175+
wp_register_style(
176+
'wp-block-' . $block_name,
177+
gutenberg_url( $style_path ),
178+
array(),
179+
filemtime( gutenberg_dir_path() . $style_path )
180+
);
181+
}
182+
183+
if ( file_exists( gutenberg_dir_path() . $editor_style_path ) ) {
184+
wp_register_style(
185+
'wp-block-' . $block_name . '-editor',
186+
gutenberg_url( $editor_style_path ),
187+
array(),
188+
filemtime( gutenberg_dir_path() . $editor_style_path )
189+
);
190+
}
191+
}
192+
150193
/**
151194
* Complements the implementation of block type `core/social-icon`, whether it
152195
* be provided by core or the plugin, with derived block types for each

‎lib/client-assets.php

+3-2
Original file line numberDiff line numberDiff line change
@@ -335,12 +335,13 @@ function gutenberg_register_packages_styles( $styles ) {
335335
);
336336
$styles->add_data( 'wp-components', 'rtl', 'replace' );
337337

338+
$block_library_filename = gutenberg_should_load_separate_block_styles() ? 'common' : 'style';
338339
gutenberg_override_style(
339340
$styles,
340341
'wp-block-library',
341-
gutenberg_url( 'build/block-library/style.css' ),
342+
gutenberg_url( 'build/block-library/' . $block_library_filename . '.css' ),
342343
array(),
343-
filemtime( gutenberg_dir_path() . 'build/block-library/style.css' )
344+
filemtime( gutenberg_dir_path() . 'build/block-library/' . $block_library_filename . '.css' )
344345
);
345346
$styles->add_data( 'wp-block-library', 'rtl', 'replace' );
346347

‎lib/compat.php

+42
Original file line numberDiff line numberDiff line change
@@ -412,6 +412,48 @@ function gutenberg_render_block_with_assigned_block_context( $pre_render, $parse
412412
}
413413
add_filter( 'pre_render_block', 'gutenberg_render_block_with_assigned_block_context', 9, 2 );
414414

415+
/**
416+
* Determine if the current theme needs to load separate block styles or not.
417+
*
418+
* @return bool
419+
*/
420+
function gutenberg_should_load_separate_block_styles() {
421+
$load_separate_styles = gutenberg_is_fse_theme();
422+
/**
423+
* Determine if separate styles will be loaded for blocks on-render or not.
424+
*
425+
* @param bool $load_separate_styles Whether separate styles will be loaded or not.
426+
*
427+
* @return bool
428+
*/
429+
return apply_filters( 'load_separate_block_styles', $load_separate_styles );
430+
}
431+
432+
/**
433+
* Remove the `wp_enqueue_registered_block_scripts_and_styles` hook if needed.
434+
*
435+
* @return void
436+
*/
437+
function gutenberg_remove_hook_wp_enqueue_registered_block_scripts_and_styles() {
438+
if ( gutenberg_should_load_separate_block_styles() ) {
439+
/**
440+
* Avoid enqueueing block assets of all registered blocks for all posts, instead
441+
* deferring to block render mechanics to enqueue scripts, thereby ensuring only
442+
* blocks of the content have their assets enqueued.
443+
*
444+
* This can be removed once minimum support for the plugin is outside the range
445+
* of the version associated with closure of the following ticket.
446+
*
447+
* @see https://core.trac.wordpress.org/ticket/50328
448+
*
449+
* @see WP_Block::render
450+
*/
451+
remove_action( 'enqueue_block_assets', 'wp_enqueue_registered_block_scripts_and_styles' );
452+
}
453+
}
454+
455+
add_action( 'init', 'gutenberg_remove_hook_wp_enqueue_registered_block_scripts_and_styles' );
456+
415457
/**
416458
* Callback hooked to the register_block_type_args filter.
417459
*

‎packages/block-library/src/archives/block.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,6 @@
1515
"supports": {
1616
"align": true,
1717
"html": false
18-
}
18+
},
19+
"editorStyle": "wp-block-archives-editor"
1920
}

‎packages/block-library/src/audio/block.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -39,5 +39,7 @@
3939
"supports": {
4040
"anchor": true,
4141
"align": true
42-
}
42+
},
43+
"editorStyle": "wp-block-audio-editor",
44+
"style": "wp-block-audio"
4345
}

‎packages/block-library/src/block/block.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,6 @@
1111
"customClassName": false,
1212
"html": false,
1313
"inserter": false
14-
}
14+
},
15+
"editorStyle": "wp-block-editor"
1516
}

‎packages/block-library/src/button/block.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -63,5 +63,7 @@
6363
"alignWide": false,
6464
"reusable": false,
6565
"__experimentalSelector": ".wp-block-button > a"
66-
}
66+
},
67+
"editorStyle": "wp-block-button-editor",
68+
"style": "wp-block-button"
6769
}

‎packages/block-library/src/buttons/block.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,7 @@
1414
"supports": {
1515
"anchor": true,
1616
"align": [ "wide", "full" ]
17-
}
17+
},
18+
"editorStyle": "wp-block-buttons-editor",
19+
"style": "wp-block-buttons"
1820
}

‎packages/block-library/src/calendar/block.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,6 @@
1212
},
1313
"supports": {
1414
"align": true
15-
}
15+
},
16+
"style": "wp-block-calendar"
1617
}

‎packages/block-library/src/categories/block.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -19,5 +19,7 @@
1919
"supports": {
2020
"align": true,
2121
"html": false
22-
}
22+
},
23+
"editorStyle": "wp-block-categories-editor",
24+
"style": "wp-block-categories"
2325
}

‎packages/block-library/src/code/block.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,6 @@
1212
"supports": {
1313
"anchor": true,
1414
"fontSize": true
15-
}
15+
},
16+
"style": "wp-block-code"
1617
}

‎packages/block-library/src/columns/block.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,7 @@
1818
"gradients": true,
1919
"link": true
2020
}
21-
}
21+
},
22+
"editorStyle": "wp-block-columns-editor",
23+
"style": "wp-block-columns"
2224
}

‎packages/block-library/src/common.scss

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
// The following selectors have increased specificity (using the :root prefix)
2+
// to assure colors take effect over another base class color, mainly to let
3+
// the colors override the added specificity by link states such as :hover.
4+
5+
:root {
6+
// Background colors.
7+
@include background-colors();
8+
9+
// Foreground colors.
10+
@include foreground-colors();
11+
12+
// Gradients
13+
@include gradient-colors();
14+
15+
.has-link-color a {
16+
color: var(--wp--style--color--link, #00e);
17+
}
18+
}
19+
20+
// Font sizes.
21+
.has-small-font-size {
22+
font-size: 0.8125em;
23+
}
24+
25+
.has-regular-font-size, // Not used now, kept because of backward compatibility.
26+
.has-normal-font-size {
27+
font-size: 1em;
28+
}
29+
30+
.has-medium-font-size {
31+
font-size: 1.25em;
32+
}
33+
34+
.has-large-font-size {
35+
font-size: 2.25em;
36+
}
37+
38+
.has-larger-font-size, // Not used now, kept because of backward compatibility.
39+
.has-huge-font-size {
40+
font-size: 2.625em;
41+
}
42+
43+
// Text alignments.
44+
.has-text-align-center {
45+
text-align: center;
46+
}
47+
48+
.has-text-align-left {
49+
/*rtl:ignore*/
50+
text-align: left;
51+
}
52+
53+
.has-text-align-right {
54+
/*rtl:ignore*/
55+
text-align: right;
56+
}
57+
58+
// This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
59+
#end-resizable-editor-section {
60+
display: none;
61+
}
62+
63+
// Block alignments.
64+
.aligncenter {
65+
clear: both;
66+
}

‎packages/block-library/src/cover/block.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -57,5 +57,7 @@
5757
"spacing": {
5858
"padding": true
5959
}
60-
}
60+
},
61+
"editorStyle": "wp-block-cover-editor",
62+
"style": "wp-block-cover"
6163
}

‎packages/block-library/src/editor.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
@import "./cover/editor.scss";
1414
@import "./embed/editor.scss";
1515
@import "./file/editor.scss";
16-
@import "./classic/editor.scss";
16+
@import "./freeform/editor.scss";
1717
@import "./gallery/editor.scss";
1818
@import "./group/editor.scss";
1919
@import "./heading/editor.scss";

‎packages/block-library/src/embed/block.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -34,5 +34,7 @@
3434
"align": true,
3535
"reusable": false,
3636
"html": false
37-
}
37+
},
38+
"editorStyle": "wp-block-embed-editor",
39+
"style": "wp-block-embed"
3840
}

‎packages/block-library/src/file/block.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -39,5 +39,7 @@
3939
"supports": {
4040
"anchor": true,
4141
"align": true
42-
}
42+
},
43+
"editorStyle": "wp-block-file-editor",
44+
"style": "wp-block-file"
4345
}

‎packages/block-library/src/classic/block.json renamed to ‎packages/block-library/src/freeform/block.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,6 @@
1212
"className": false,
1313
"customClassName": false,
1414
"reusable": false
15-
}
15+
},
16+
"editorStyle": "wp-block-freeform-editor"
1617
}

‎packages/block-library/src/classic/convert-to-blocks-button.js renamed to ‎packages/block-library/src/freeform/convert-to-blocks-button.js

File renamed without changes.

‎packages/block-library/src/classic/edit.js renamed to ‎packages/block-library/src/freeform/edit.js

File renamed without changes.

‎packages/block-library/src/classic/edit.native.js renamed to ‎packages/block-library/src/freeform/edit.native.js

File renamed without changes.

‎packages/block-library/src/classic/editor.scss renamed to ‎packages/block-library/src/freeform/editor.scss

File renamed without changes.

‎packages/block-library/src/classic/index.js renamed to ‎packages/block-library/src/freeform/index.js

File renamed without changes.

‎packages/block-library/src/classic/save.js renamed to ‎packages/block-library/src/freeform/save.js

File renamed without changes.

‎packages/block-library/src/gallery/block.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -79,5 +79,7 @@
7979
"supports": {
8080
"anchor": true,
8181
"align": true
82-
}
82+
},
83+
"editorStyle": "wp-block-gallery-editor",
84+
"style": "wp-block-gallery"
8385
}

‎packages/block-library/src/group/block.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -25,5 +25,7 @@
2525
"spacing": {
2626
"padding": true
2727
}
28-
}
28+
},
29+
"editorStyle": "wp-block-group-editor",
30+
"style": "wp-block-group"
2931
}

‎packages/block-library/src/heading/block.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -74,5 +74,7 @@
7474
}
7575
},
7676
"__unstablePasteTextInline": true
77-
}
77+
},
78+
"editorStyle": "wp-block-heading-editor",
79+
"style": "wp-block-heading"
7880
}

‎packages/block-library/src/html/block.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,6 @@
1212
"customClassName": false,
1313
"className": false,
1414
"html": false
15-
}
15+
},
16+
"editorStyle": "wp-block-html-editor"
1617
}

‎packages/block-library/src/image/block.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -72,5 +72,7 @@
7272
},
7373
"supports": {
7474
"anchor": true
75-
}
75+
},
76+
"editorStyle": "wp-block-image-editor",
77+
"style": "wp-block-image"
7678
}

‎packages/block-library/src/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ import * as textColumns from './text-columns';
5757
import * as verse from './verse';
5858
import * as video from './video';
5959
import * as tagCloud from './tag-cloud';
60-
import * as classic from './classic';
60+
import * as classic from './freeform';
6161
import * as socialLinks from './social-links';
6262
import * as socialLink from './social-link';
6363

0 commit comments

Comments
 (0)