<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[44157] trunk: Styles: Add helper functions for loading block styles.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/44157">44157</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/44157","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>desrosj</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2018-12-14 03:35:55 +0000 (Fri, 14 Dec 2018)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Styles: Add helper functions for loading block styles.
Blocks are able to register styles that used in the editor and the frontend, or only in the editor. These functions ensure the correct styles are loaded in the correct place.
Props pento.
Merges <a href="https://core.trac.wordpress.org/changeset/43812">[43812]</a> to trunk.
See <a href="https://core.trac.wordpress.org/ticket/45065">#45065</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpincludesdefaultfiltersphp">trunk/src/wp-includes/default-filters.php</a></li>
<li><a href="#trunksrcwpincludesscriptloaderphp">trunk/src/wp-includes/script-loader.php</a></li>
<li><a href="#trunktestsphpunittestsdependenciesstylesphp">trunk/tests/phpunit/tests/dependencies/styles.php</a></li>
</ul>
<h3>Property Changed</h3>
<ul>
<li><a href="#trunk">trunk/</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<span class="cx" style="display: block; padding: 0 10px">Index: trunk
</span><span class="cx" style="display: block; padding: 0 10px">===================================================================
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">--- trunk 2018-12-14 03:27:55 UTC (rev 44156)
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+++ trunk 2018-12-14 03:35:55 UTC (rev 44157)
</ins><a id="trunk"></a>
<div class="propset"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Property changes: trunk</h4>
<pre class="diff"><span>
</span></pre></div>
<a id="svnmergeinfo"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: svn:mergeinfo</h4></div>
<span class="cx" style="display: block; padding: 0 10px"> /branches/3.3:20543
</span><span class="cx" style="display: block; padding: 0 10px"> /branches/3.4:21757
</span><span class="cx" style="display: block; padding: 0 10px"> /branches/4.9:43557,43622
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/branches/5.0:43681-43682,43684-43688,43719-43720,43723,43726-43727,43729-43731,43734-43744,43751-43754,43758,43761-43765,43767-43770,43772,43774-43781,43783,43790-43800,43802,43804-43806,43808-43811,43813,43821,43842,43860,43869-43876,43892,43904,43909,43926-43929,43954,43956,43961-43963
</del><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/branches/5.0:43681-43682,43684-43688,43719-43720,43723,43726-43727,43729-43731,43734-43744,43751-43754,43758,43761-43765,43767-43770,43772,43774-43781,43783,43790-43800,43802,43804-43806,43808-43813,43821,43842,43860,43869-43876,43892,43904,43909,43926-43929,43954,43956,43961-43963
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><a id="trunksrcwpincludesdefaultfiltersphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/default-filters.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/default-filters.php 2018-12-14 03:27:55 UTC (rev 44156)
+++ trunk/src/wp-includes/default-filters.php 2018-12-14 03:35:55 UTC (rev 44157)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -507,6 +507,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_enqueue_scripts', 'wp_localize_jquery_ui_datepicker', 1000 );
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'admin_enqueue_scripts', 'wp_localize_jquery_ui_datepicker', 1000 );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+add_action( 'wp_enqueue_scripts', 'wp_common_block_scripts_and_styles' );
+add_action( 'admin_enqueue_scripts', 'wp_common_block_scripts_and_styles' );
+add_action( 'enqueue_block_assets', 'wp_enqueue_registered_block_scripts_and_styles' );
+add_action( 'enqueue_block_editor_assets', 'wp_enqueue_registered_block_scripts_and_styles' );
</ins><span class="cx" style="display: block; padding: 0 10px"> add_action( 'admin_print_scripts-index.php', 'wp_localize_community_events' );
</span><span class="cx" style="display: block; padding: 0 10px"> add_filter( 'wp_print_scripts', 'wp_just_in_time_script_localization' );
</span><span class="cx" style="display: block; padding: 0 10px"> add_filter( 'print_scripts_array', 'wp_prototype_before_jquery' );
</span></span></pre></div>
<a id="trunksrcwpincludesscriptloaderphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/script-loader.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/script-loader.php 2018-12-14 03:27:55 UTC (rev 44156)
+++ trunk/src/wp-includes/script-loader.php 2018-12-14 03:35:55 UTC (rev 44157)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2415,3 +2415,74 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+/**
+ * Handles the enqueueing of block scripts and styles that are common to both
+ * the editor and the front-end.
+ *
+ * @since 5.0.0
+ *
+ * @global WP_Screen $current_screen
+ */
+function wp_common_block_scripts_and_styles() {
+ global $current_screen;
+
+ if ( is_admin() && ! $current_screen->is_block_editor() ) {
+ return;
+ }
+
+ wp_enqueue_style( 'wp-block-library' );
+
+ if ( current_theme_supports( 'wp-block-styles' ) ) {
+ wp_enqueue_style( 'wp-block-library-theme' );
+ }
+
+ /**
+ * Fires after enqueuing block assets for both editor and front-end.
+ *
+ * Call `add_action` on any hook before 'wp_enqueue_scripts'.
+ *
+ * In the function call you supply, simply use `wp_enqueue_script` and
+ * `wp_enqueue_style` to add your functionality to the Gutenberg editor.
+ *
+ * @since 5.0.0
+ */
+ do_action( 'enqueue_block_assets' );
+}
+
+/**
+ * Enqueues registered block scripts and styles, depending on current rendered
+ * context (only enqueuing editor scripts while in context of the editor).
+ *
+ * @since 5.0.0
+ *
+ * @global WP_Screen $current_screen
+ */
+function wp_enqueue_registered_block_scripts_and_styles() {
+ global $current_screen;
+
+ $is_editor = ( is_admin() && $current_screen->is_block_editor() );
+
+ $block_registry = WP_Block_Type_Registry::get_instance();
+ foreach ( $block_registry->get_all_registered() as $block_name => $block_type ) {
+ // Front-end styles.
+ if ( ! empty( $block_type->style ) ) {
+ wp_enqueue_style( $block_type->style );
+ }
+
+ // Front-end script.
+ if ( ! empty( $block_type->script ) ) {
+ wp_enqueue_script( $block_type->script );
+ }
+
+ // Editor styles.
+ if ( $is_editor && ! empty( $block_type->editor_style ) ) {
+ wp_enqueue_style( $block_type->editor_style );
+ }
+
+ // Editor script.
+ if ( $is_editor && ! empty( $block_type->editor_script ) ) {
+ wp_enqueue_script( $block_type->editor_script );
+ }
+ }
+}
</ins></span></pre></div>
<a id="trunktestsphpunittestsdependenciesstylesphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/tests/dependencies/styles.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/dependencies/styles.php 2018-12-14 03:27:55 UTC (rev 44156)
+++ trunk/tests/phpunit/tests/dependencies/styles.php 2018-12-14 03:35:55 UTC (rev 44157)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4,24 +4,45 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @group scripts
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> class Tests_Dependencies_Styles extends WP_UnitTestCase {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var $old_wp_styles;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ private $old_wp_styles;
+ private $old_wp_scripts;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> function setUp() {
</span><span class="cx" style="display: block; padding: 0 10px"> parent::setUp();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( empty( $GLOBALS['wp_styles'] ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $GLOBALS['wp_styles'] = null;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->old_wp_styles = $GLOBALS['wp_styles'];
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ if ( empty( $GLOBALS['wp_scripts'] ) ) {
+ $GLOBALS['wp_scripts'] = null;
+ }
+
+ $this->old_wp_styles = $GLOBALS['wp_scripts'];
+
</ins><span class="cx" style="display: block; padding: 0 10px"> remove_action( 'wp_default_styles', 'wp_default_styles' );
</span><span class="cx" style="display: block; padding: 0 10px"> remove_action( 'wp_print_styles', 'print_emoji_styles' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> $GLOBALS['wp_styles'] = new WP_Styles();
</span><span class="cx" style="display: block; padding: 0 10px"> $GLOBALS['wp_styles']->default_version = get_bloginfo( 'version' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ $GLOBALS['wp_scripts'] = new WP_Scripts();
+ $GLOBALS['wp_scripts']->default_version = get_bloginfo( 'version' );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> function tearDown() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $GLOBALS['wp_styles'] = $this->old_wp_styles;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $GLOBALS['wp_styles'] = $this->old_wp_styles;
+ $GLOBALS['wp_scripts'] = $this->old_wp_scripts;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_default_styles', 'wp_default_styles' );
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_print_styles', 'print_emoji_styles' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ if ( current_theme_supports( 'wp-block-styles' ) ) {
+ remove_theme_support( 'wp-block-styles' );
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> parent::tearDown();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -305,4 +326,67 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ /**
+ * Tests that visual block styles are enqueued in the editor even when there is not theme support for 'wp-block-styles'.
+ *
+ * Visual block styles should always be enqueued when editing to avoid the appearance of a broken editor.
+ */
+ function test_block_styles_for_editing_without_theme_support() {
+ // Confirm we are without theme support by default.
+ $this->assertFalse( current_theme_supports( 'wp-block-styles' ) );
+
+ wp_default_styles( $GLOBALS['wp_styles'] );
+
+ $this->assertFalse( wp_style_is( 'wp-block-library-theme' ) );
+ wp_enqueue_style( 'wp-edit-blocks' );
+ $this->assertTrue( wp_style_is( 'wp-block-library-theme' ) );
+ }
+
+ /**
+ * Tests that visual block styles are enqueued when there is theme support for 'wp-block-styles'.
+ *
+ * Visual block styles should always be enqueued when editing to avoid the appearance of a broken editor.
+ */
+ function test_block_styles_for_editing_with_theme_support() {
+ add_theme_support( 'wp-block-styles' );
+
+ wp_default_styles( $GLOBALS['wp_styles'] );
+
+ $this->assertFalse( wp_style_is( 'wp-block-library-theme' ) );
+ wp_common_block_scripts_and_styles();
+ $this->assertTrue( wp_style_is( 'wp-block-library-theme' ) );
+ }
+
+ /**
+ * Tests that visual block styles are not enqueued for viewing when there is no theme support for 'wp-block-styles'.
+ *
+ * Visual block styles should not be enqueued unless a theme opts in.
+ * This way we avoid style conflicts with existing themes.
+ */
+ function test_no_block_styles_for_viewing_without_theme_support() {
+ // Confirm we are without theme support by default.
+ $this->assertFalse( current_theme_supports( 'wp-block-styles' ) );
+
+ wp_default_styles( $GLOBALS['wp_styles'] );
+
+ $this->assertFalse( wp_style_is( 'wp-block-library-theme' ) );
+ wp_enqueue_style( 'wp-block-library' );
+ $this->assertFalse( wp_style_is( 'wp-block-library-theme' ) );
+ }
+
+ /**
+ * Tests that visual block styles are enqueued for viewing when there is theme support for 'wp-block-styles'.
+ *
+ * Visual block styles should be enqueued when a theme opts in.
+ */
+ function test_block_styles_for_viewing_with_theme_support() {
+ add_theme_support( 'wp-block-styles' );
+
+ wp_default_styles( $GLOBALS['wp_styles'] );
+
+ $this->assertFalse( wp_style_is( 'wp-block-library-theme' ) );
+ wp_common_block_scripts_and_styles();
+ $this->assertTrue( wp_style_is( 'wp-block-library-theme' ) );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre>
</div>
</div>
</body>
</html>