Add global style for Active Filters block (#5465)

* Enable global style for active filters block * show blacklisted blocks in full site editing side * fix test * --amend * fix check
woocommerce · Jan 3, 2022 · ea9e852 · ea9e852
1 parent 7a8daa3
commit ea9e852
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/assets/js/blocks/active-filters/edit.js b/assets/js/blocks/active-filters/edit.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import { Disabled, PanelBody, withSpokenMessages } from '@wordpress/components';
 import HeadingToolbar from '@woocommerce/editor-components/heading-toolbar';
 import BlockTitle from '@woocommerce/editor-components/block-title';
@@ -16,6 +16,10 @@ import Block from './block.js';
 const Edit = ( { attributes, setAttributes } ) => {
 	const { className, displayStyle, heading, headingLevel } = attributes;
 
+	const blockProps = useBlockProps( {
+		className,
+	} );
+
 	const getInspectorControls = () => {
 		return (
 			<InspectorControls key="inspector">
@@ -75,7 +79,7 @@ const Edit = ( { attributes, setAttributes } ) => {
 	};
 
 	return (
-		<div className={ className }>
+		<div { ...blockProps }>
 			{ getInspectorControls() }
 			<BlockTitle
 				className="wc-block-active-filters__title"

diff --git a/assets/js/blocks/active-filters/index.js b/assets/js/blocks/active-filters/index.js
@@ -5,13 +5,15 @@ import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
 import { Icon, toggle } from '@woocommerce/icons';
 import classNames from 'classnames';
+import { useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import edit from './edit.js';
 
 registerBlockType( 'woocommerce/active-filters', {
+	apiVersion: 2,
 	title: __( 'Active Product Filters', 'woo-gutenberg-products-block' ),
 	icon: {
 		src: (
@@ -30,6 +32,10 @@ registerBlockType( 'woocommerce/active-filters', {
 	supports: {
 		html: false,
 		multiple: false,
+		color: {
+			text: true,
+			background: false,
+		},
 	},
 	example: {
 		attributes: {},
@@ -57,9 +63,12 @@ registerBlockType( 'woocommerce/active-filters', {
 			'data-heading': heading,
 			'data-heading-level': headingLevel,
 		};
+
 		return (
 			<div
-				className={ classNames( 'is-loading', className ) }
+				{ ...useBlockProps.save( {
+					className: classNames( 'is-loading', className ),
+				} ) }
 				{ ...data }
 			>
 				<span

diff --git a/src/BlockTypesController.php b/src/BlockTypesController.php
@@ -191,7 +191,7 @@ protected function get_block_types() {
 		/**
 		 * This disables specific blocks in Widget Areas by not registering them.
 		 */
-		if ( in_array( $pagenow, [ 'widgets.php', 'themes.php', 'customize.php' ], true ) ) {
+		if ( in_array( $pagenow, [ 'widgets.php', 'themes.php', 'customize.php' ], true ) && ( empty( $_GET['page'] ) || 'gutenberg-edit-site' !== $_GET['page'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification
 			$block_types = array_diff(
 				$block_types,
 				[