Filter the blocks passed into layout block preview (#1735)

* Filter the blocks passed into LayoutPreview

* Jest: setup coblocksLayoutSelector global

* Add enzyme as dependency for testing

* Export LayoutPreview component for testing

* Test that LayoutPreview block list filter works

* Convert block array to object structure

* Add inline docs

.dev/tests/jest/setup-globals.js

@@ -1,3 +1,7 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure( { adapter: new Adapter() } );
 
 // TODO: Utilize the REST API without the global.
 // Backbone REST API client
@@ -10,3 +14,5 @@ console = {
 	info: () => { },
 	error: () => { },
 };
+
+global.coblocksLayoutSelector = { layouts: [], categories: [] };

package.json

@@ -85,6 +85,7 @@
 		"cypress": "^5.3.0",
 		"cypress-file-upload": "^3.5.3",
 		"email-validator": "^2.0.4",
+		"enzyme": "^3.11.0",
 		"eslint-plugin-chai-friendly": "^0.5.0",
 		"eslint-plugin-cypress": "^2.10.3",
 		"flickity": "^2.2.1",

src/extensions/layout-selector/index.js

@@ -18,6 +18,7 @@ import { isBlobURL } from '@wordpress/blob';
 import { Button, Modal, Icon, SVG, Path, DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { BlockPreview } from '@wordpress/block-editor';
 import { createBlock, rawHandler } from '@wordpress/blocks';
+import { applyFilters } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
@@ -51,10 +52,22 @@ const getTemplateFromBlocks = ( name, attributes, innerBlocks = [] ) => {
  */
 const isExternalImage = ( id, url ) => url && ! id && ! isBlobURL( url ) && ! url.includes( window.location.host );
 
-const LayoutPreview = ( { layout, isSelected, registeredBlocks, onClick } ) => {
+export const LayoutPreview = ( { layout, isSelected, registeredBlocks, onClick } ) => {
 	const [ overlay, setOverlay ] = useState( false );
 
-	const layoutBlocks = layout.blocks || rawHandler( { HTML: layout.postContent } ).map(
+	/**
+	 * Filters the list of blocks within the layout preview.
+	 *
+	 * @param {Array} blocks The block objects of the layout.
+	 */
+	const filterdLayoutBlocks = applyFilters(
+		'coblocks.layoutPreviewBlocks',
+		layout.blocks
+			? layout.blocks.map( ( block ) => Array.isArray( block ) ? getBlocksFromTemplate( block[ 0 ], block[ 1 ], block[ 2 ] ) : block )
+			: rawHandler( { HTML: layout.postContent } )
+	);
+
+	const layoutBlocks = filterdLayoutBlocks.map(
 		( blockObject ) => getTemplateFromBlocks( blockObject.name, blockObject.attributes, blockObject.innerBlocks )
 	);
 

src/extensions/layout-selector/test/layout-preview.spec.js

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+import '@testing-library/jest-dom/extend-expect';
+import '@wordpress/hooks';
+import { BlockPreview } from '@wordpress/block-editor';
+import { addFilter } from '@wordpress/hooks';
+
+import { registerCoreBlocks } from '@wordpress/block-library';
+registerCoreBlocks();
+
+/**
+ * Internal dependencies.
+ */
+import { LayoutPreview } from '../index';
+
+describe( name, () => {
+
+	it( 'should render blocks preview', () => {
+		const componentProps = {
+			layout: { postContent: '<!-- wp:paragraph -->\r\n<p>Paragraph Block</p>\r\n<!-- /wp:paragraph -->' },
+			registeredBlocks: [ 'core/paragraph' ],
+		};
+
+		const renderOne = shallow( <LayoutPreview { ...componentProps } /> );
+		expect( renderOne.find( BlockPreview ).prop( 'blocks' ) ).toHaveLength( 1 );
+
+		addFilter(
+			'coblocks.layoutPreviewBlocks',
+			'tests/coblocks/layoutPreviewBlocks',
+			() => ( [] ) // remove all blocks.
+		);
+
+		const renderTwo = shallow( <LayoutPreview { ...componentProps } /> );
+		expect( renderTwo.find( BlockPreview ).prop( 'blocks' ) ).toHaveLength( 0 );
+	} );
+
+} );

yarn.lock

@@ -5546,7 +5546,7 @@ enzyme-to-json@^3.3.5:
     lodash "^4.17.15"
     react-is "^16.12.0"
 
-enzyme@^3.9.0:
+enzyme@^3.11.0, enzyme@^3.9.0:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.11.0.tgz#71d680c580fe9349f6f5ac6c775bc3e6b7a79c28"
   integrity sha512-Dw8/Gs4vRjxY6/6i9wU0V+utmQO9kvh9XLnz3LIudviOnVYDEe2ec+0k+NQoMamn1VrjKgCUOWj5jG/5M5M0Qw==
@@ -10809,16 +10809,7 @@ postcss@^6.0.14, postcss@^6.0.23:
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.13, postcss@^7.0.14, postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6, postcss@^7.0.7:
-  version "7.0.35"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
-  integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
-  dependencies:
-    chalk "^2.4.2"
-    source-map "^0.6.1"
-    supports-color "^6.1.0"
-
-postcss@^7.0.17, postcss@^7.0.31:
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.13, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.26, postcss@^7.0.31, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6, postcss@^7.0.7:
   version "7.0.35"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
   integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==