Load extension styles with relevant core blocks (#2591)

* ensure extension styles are loaded with relevant core blocks

* include new unit tests to verify expected enqueues

* should build spec list on block-styles as well, and add test

* fix typo in workflow

---------

Co-authored-by: aledesma-godaddy <[email protected]>

.dev/tests/phpunit/includes/test-coblocks-block-assets.php

@@ -419,4 +419,181 @@ public function test_typography_styles_loaded_with_core_quote_block() {
 		$this->assertContains( 'coblocks-animation', $wp_styles->queue );
 		$this->assertContains( 'coblocks-extensions', $wp_styles->queue );
 	}
+
+	/**
+	 * Test extension styles loaded with core image block.
+	 */
+	public function test_extension_styles_loaded_with_core_image_block() {
+		global $post, $wp_styles;
+		unset( $GLOBALS['current_screen'] );
+
+		// core/image
+		$post_id = wp_insert_post(
+			array(
+				'post_author'  => 1,
+				'post_content' => '<!-- wp:core/image /-->',
+				'post_title'   => 'Core Image Block',
+				'post_status'  => 'publish',
+			)
+		);
+
+		$this->go_to( "/?p={$post_id}" );
+		$post = get_post( $post_id );
+
+		$this->coblocks_block_assets->block_assets();
+		do_action( 'enqueue_block_assets' );
+
+		// Core blocks should also have coblocks-animation.
+		$this->assertContains( 'coblocks-extensions', $wp_styles->queue );
+	}
+
+	/**
+	 * Test extension styles loaded with core buttons block.
+	 */
+	public function test_extension_styles_loaded_with_core_buttons_button_block() {
+		global $post, $wp_styles;
+		unset( $GLOBALS['current_screen'] );
+
+		// core/buttons
+		$post_id = wp_insert_post(
+			array(
+				'post_author'  => 1,
+				'post_content' => '<!-- wp:core/buttons /-->',
+				'post_title'   => 'Core Buttons Block',
+				'post_status'  => 'publish',
+			)
+		);
+
+		$this->go_to( "/?p={$post_id}" );
+		$post = get_post( $post_id );
+
+		$this->coblocks_block_assets->block_assets();
+		do_action( 'enqueue_block_assets' );
+
+		// Does not contain for buttons but does contain for inner button block.
+		$this->assertNotContains( 'coblocks-extensions', $wp_styles->queue );
+
+		// Now test against inner block core/button.
+		$post_id = wp_insert_post(
+			array(
+				'post_author'  => 1,
+				'post_content' => '<!-- wp:core/buttons --><div class="wp-block-buttons"><!-- wp:core/button /--></div><!-- /wp:core/buttons -->',
+				'post_title'   => 'Core Buttons Block with Button',
+				'post_status'  => 'publish',
+			)
+		);
+
+		$this->go_to( "/?p={$post_id}" );
+		$post = get_post( $post_id );
+
+		$this->coblocks_block_assets->block_assets();
+		do_action( 'enqueue_block_assets' );
+
+		// Core blocks should also have coblocks-animation.
+		$this->assertContains( 'coblocks-extensions', $wp_styles->queue );
+	}
+
+	/**
+	 * Test extension styles loaded with core cover block.
+	 */
+	public function test_extension_styles_loaded_with_core_cover_block() {
+		global $post, $wp_styles;
+		unset( $GLOBALS['current_screen'] );
+
+		// core/cover
+		$post_id = wp_insert_post(
+			array(
+				'post_author'  => 1,
+				'post_content' => '<!-- wp:core/cover /-->',
+				'post_title'   => 'Core Cover Block',
+				'post_status'  => 'publish',
+			)
+		);
+
+		$this->go_to( "/?p={$post_id}" );
+		$post = get_post( $post_id );
+
+		$this->coblocks_block_assets->block_assets();
+		do_action( 'enqueue_block_assets' );
+
+		$this->assertContains( 'coblocks-extensions', $wp_styles->queue );
+	}
+
+	/**
+	 * Test extension styles loaded with core list block.
+	 */
+	public function test_extension_styles_loaded_with_core_list_block() {
+		global $post, $wp_styles;
+		unset( $GLOBALS['current_screen'] );
+
+		// core/list
+		$post_id = wp_insert_post(
+			array(
+				'post_author'  => 1,
+				'post_content' => '<!-- wp:core/list /-->',
+				'post_title'   => 'Core List Block',
+				'post_status'  => 'publish',
+			)
+		);
+
+		$this->go_to( "/?p={$post_id}" );
+		$post = get_post( $post_id );
+
+		$this->coblocks_block_assets->block_assets();
+		do_action( 'enqueue_block_assets' );
+
+		$this->assertContains( 'coblocks-extensions', $wp_styles->queue );
+	}
+
+	/**
+	 * Test extension styles loaded with core media text block.
+	 */
+	public function test_extension_styles_loaded_with_core_media_text_block() {
+		global $post, $wp_styles;
+		unset( $GLOBALS['current_screen'] );
+
+		// core/media-text
+		$post_id = wp_insert_post(
+			array(
+				'post_author'  => 1,
+				'post_content' => '<!-- wp:core/media-text /-->',
+				'post_title'   => 'Core Media Text Block',
+				'post_status'  => 'publish',
+			)
+		);
+
+		$this->go_to( "/?p={$post_id}" );
+		$post = get_post( $post_id );
+
+		$this->coblocks_block_assets->block_assets();
+		do_action( 'enqueue_block_assets' );
+
+		$this->assertContains( 'coblocks-extensions', $wp_styles->queue );
+	}
+
+	/**
+	 * Test extension styles are not loaded when unsupported core block is only block.
+	 */
+	public function test_extension_styles_not_loaded_with_unsupported_core_block() {
+		global $post, $wp_styles;
+		unset( $GLOBALS['current_screen'] );
+
+		// core/unsupported
+		$post_id = wp_insert_post(
+			array(
+				'post_author'  => 1,
+				'post_content' => '<!-- wp:core/rss /-->',
+				'post_title'   => 'Core Unsupported Block',
+				'post_status'  => 'publish',
+			)
+		);
+
+		$this->go_to( "/?p={$post_id}" );
+		$post = get_post( $post_id );
+
+		$this->coblocks_block_assets->block_assets();
+		do_action( 'enqueue_block_assets' );
+
+		$this->assertNotContains( 'coblocks-extensions', $wp_styles->queue );
+	}
 }

.github/workflows/test-e2e-cypress.yml

@@ -45,12 +45,12 @@ jobs:
           spec_list=()
 
           for line in $changed_files; do
-            if [[ "$line" =~ src/(blocks|extensions|componets).* ]]; then # If changed file is within our tested paths.
+            if [[ "$line" =~ src/(blocks|extensions|components|block-styles).* ]]; then # If changed file is within our tested paths.
 
               changed_path=$(echo $line | cut -d'/' -f3) # Get the main path of the changed file, e.g. author, food-and-drinks, lightbox.
 
               found_specs=$(find . -type f -name "*.cypress.js") # Find real spec files.
-              pattern="/src/(blocks|extensions|components)/${changed_path}/" # Changed files pattern to match against.
+              pattern="/src/(blocks|extensions|components|block-styles)/${changed_path}/" # Changed files pattern to match against.
 
               for spec in $found_specs; do
                 if [[ $spec  =~ $pattern ]]; then

includes/class-coblocks-block-assets.php

@@ -641,6 +641,7 @@ public function has_coblocks_block( WP_Post $post_object ) {
 			array_filter(
 				array(
 					false !== strpos( $post_object->post_content, '<!-- wp:coblocks/' ),
+					// Having core blocks here, ensures that enqueues from block_assets are loaded.
 					has_block( 'core/block', $post_object ),
 					has_block( 'core/button', $post_object ),
 					has_block( 'core/cover', $post_object ),
@@ -651,6 +652,7 @@ public function has_coblocks_block( WP_Post $post_object ) {
 					has_block( 'core/paragraph', $post_object ),
 					has_block( 'core/pullquote', $post_object ),
 					has_block( 'core/quote', $post_object ),
+					has_block( 'core/media-text', $post_object ),
 				)
 			)
 		);

src/extensions/button-styles/index.js → src/block-styles/core/buttons/index.js

@@ -4,6 +4,8 @@
 import { __ } from '@wordpress/i18n';
 import { registerBlockStyle } from '@wordpress/blocks';
 
+import './style.scss';
+
 // Register custom styles for the core list block.
 registerBlockStyle( 'core/button', {
 	name: 'circular',

src/extensions/cover-styles/index.js → src/block-styles/core/cover/index.js

@@ -4,6 +4,8 @@
 import { __ } from '@wordpress/i18n';
 import { registerBlockStyle } from '@wordpress/blocks';
 
+import './style.scss';
+
 // Add default for reset, until WordPress 5.3 is released.
 registerBlockStyle( 'core/cover', {
 	name: 'default',

src/extensions/image-styles/index.js → src/block-styles/core/image/index.js

@@ -4,6 +4,8 @@
 import { __ } from '@wordpress/i18n';
 import { registerBlockStyle } from '@wordpress/blocks';
 
+import './style.scss';
+
 // Add default for reset, until WordPress 5.3 is released.
 registerBlockStyle( 'core/image', {
 	name: 'default',

src/extensions/list-styles/index.js → src/block-styles/core/list/index.js

@@ -4,6 +4,8 @@
 import { __ } from '@wordpress/i18n';
 import { registerBlockStyle } from '@wordpress/blocks';
 
+import './style.scss';
+
 // Default list style for reset.
 registerBlockStyle( 'core/list', {
 	name: 'default',

src/extensions/list-styles/styles/style.scss → src/block-styles/core/list/style.scss

@@ -1,3 +1,5 @@
+@import "../../../styles/common.scss";
+
 .is-style-checkbox {
 
 	li {

src/extensions/media-text-styles/index.js → src/block-styles/core/media-text/index.js

@@ -4,6 +4,8 @@
 import { __ } from '@wordpress/i18n';
 import { registerBlockStyle } from '@wordpress/blocks';
 
+import './style.scss';
+
 registerBlockStyle( 'core/media-text', {
 	name: 'default',
 	/* translators: block style */

src/extensions/media-text-styles/styles/style.scss → src/block-styles/core/media-text/style.scss

@@ -1,3 +1,5 @@
+@import "../../../styles/common.scss";
+
 .wp-block-media-text.is-style-card {
 
 	.wp-block-media-text__content {

src/extensions/media-text-styles/test/media-text-styles.cypress.js → src/block-styles/core/media-text/test/media-text-styles.cypress.js

@@ -1,7 +1,7 @@
 /*
  * Include our constants
  */
-import * as helpers from '../../../../.dev/tests/cypress/helpers';
+import * as helpers from '../../../../../.dev/tests/cypress/helpers';
 
 describe( 'Test CoBlocks Media Text styles extension', function() {
 	/**

src/extensions.js

@@ -7,13 +7,8 @@ import './js/coblocks-color-fix';
 // Extensions
 import './extensions/apply-extensions';
 import './extensions/block-patterns';
-import './extensions/button-styles';
 import './extensions/coblocks-settings';
 import './extensions/coblocks-labs';
-import './extensions/cover-styles';
-import './extensions/image-styles';
-import './extensions/list-styles';
-import './extensions/media-text-styles';
 
 // The following three imports are intentionally ordered for CoBlocks Labs controls.
 import './extensions/site-content';
@@ -23,8 +18,14 @@ import './extensions/layout-selector';
 // Formats
 import './formats';
 
-// Block Styles
+// Block Styles - Each block style imports its own styles.
+// Styles are located in `style-coblocks-extensions.css`.
 import './block-styles/core/paragraph';
+import './block-styles/core/image';
+import './block-styles/core/cover';
+import './block-styles/core/media-text';
+import './block-styles/core/list';
+import './block-styles/core/buttons';
 
 // Block Variations
 import './block-variations/core/paragraph';

src/styles/style.scss

@@ -23,13 +23,8 @@
 @import "../extensions/advanced-controls/styles/style.scss";
 @import "../extensions/block-patterns/styles/style.scss";
 @import "../extensions/button-controls/styles/style.scss";
-@import "../extensions/button-styles/styles/style.scss";
 @import "../extensions/coblocks-settings/styles/style.scss";
-@import "../extensions/cover-styles/styles/style.scss";
-@import "../extensions/image-styles/styles/style.scss";
 @import "../extensions/lightbox-controls/styles/style.scss";
-@import "../extensions/list-styles/styles/style.scss";
-@import "../extensions/media-text-styles/styles/style.scss";
 @import "../extensions/typography/styles/style.scss";
 
 // @import "../blocks/**/style.scss";