Blocks: Use selectors to fetch details about for patterns and styles …

…from block types
WordPress · Nov 26, 2019 · 330abef · 330abef
1 parent 276dd9f
commit 330abef
Show file tree

Hide file tree

Showing 5 changed files with 229 additions and 82 deletions.
diff --git a/docs/designers-developers/developers/data/data-core-blocks.md b/docs/designers-developers/developers/data/data-core-blocks.md
@@ -9,11 +9,13 @@ Namespace: `core/blocks`.
 <a name="getBlockStyles" href="#getBlockStyles">#</a> **getBlockStyles**
 
 Returns block styles by block name.
+It combines styles registered with the block together with
+the block styles registered separately.
 
 _Parameters_
 
 -   _state_ `Object`: Data state.
--   _name_ `string`: Block type name.
+-   _blockName_ `string`: Block type name.
 
 _Returns_
 

diff --git a/packages/blocks/src/store/reducer.js b/packages/blocks/src/store/reducer.js
@@ -8,7 +8,6 @@ import {
 	isEmpty,
 	keyBy,
 	map,
-	mapValues,
 	omit,
 	uniqBy,
 } from 'lodash';
@@ -66,16 +65,6 @@ export function blockTypes( state = {}, action ) {
  */
 export function blockStyles( state = {}, action ) {
 	switch ( action.type ) {
-		case 'ADD_BLOCK_TYPES':
-			return {
-				...state,
-				...mapValues( keyBy( action.blockTypes, 'name' ), ( blockType ) => {
-					return uniqBy( [
-						...get( blockType, [ 'styles' ], [] ),
-						...get( state, [ blockType.name ], [] ),
-					], ( style ) => style.name );
-				} ),
-			};
 		case 'ADD_BLOCK_STYLES':
 			return {
 				...state,
@@ -107,16 +96,6 @@ export function blockStyles( state = {}, action ) {
  */
 export function blockPatterns( state = {}, action ) {
 	switch ( action.type ) {
-		case 'ADD_BLOCK_TYPES':
-			return {
-				...state,
-				...mapValues( keyBy( action.blockTypes, 'name' ), ( blockType ) => {
-					return uniqBy( [
-						...get( blockType, [ 'patterns' ], [] ),
-						...get( state, [ blockType.name ], [] ),
-					], ( style ) => style.name );
-				} ),
-			};
 		case 'ADD_BLOCK_PATTERNS':
 			return {
 				...state,

diff --git a/packages/blocks/src/store/selectors.js b/packages/blocks/src/store/selectors.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import createSelector from 'rememo';
-import { filter, get, includes, map, some, flow, deburr } from 'lodash';
+import { compact, concat, filter, get, includes, map, some, flow, deburr } from 'lodash';
 
 /**
  * Given a block name or block type object, returns the corresponding
@@ -47,27 +47,53 @@ export function getBlockType( state, name ) {
 
 /**
  * Returns block styles by block name.
+ * It combines styles registered with the block together with
+ * the block styles registered separately.
  *
  * @param {Object} state Data state.
- * @param {string} name  Block type name.
+ * @param {string} blockName  Block type name.
  *
  * @return {Array?} Block Styles.
  */
-export function getBlockStyles( state, name ) {
-	return state.blockStyles[ name ];
-}
+export const getBlockStyles = createSelector(
+	( state, blockName ) => {
+		const blockType = getBlockType( state, blockName );
+
+		if ( ! blockType ) {
+			return;
+		}
+
+		return compact(
+			concat( blockType.styles, state.blockStyles[ blockName ] )
+		);
+	},
+	( state ) => [ state.blockTypes, state.blockStyles ]
+);
 
 /**
  * Returns block patterns by block name.
+ * It combines patterns registered with the block together with
+ * the block patterns registered separately.
  *
  * @param {Object} state      Data state.
  * @param {string} blockName  Block type name.
  *
  * @return {(WPBlockPattern[]|void)} Block patterns.
  */
-export function __experimentalGetBlockPatterns( state, blockName ) {
-	return state.blockPatterns[ blockName ];
-}
+export const __experimentalGetBlockPatterns = createSelector(
+	( state, blockName ) => {
+		const blockType = getBlockType( state, blockName );
+
+		if ( ! blockType ) {
+			return;
+		}
+
+		return compact(
+			concat( blockType.patterns, state.blockPatterns[ blockName ] )
+		);
+	},
+	( state ) => [ state.blockTypes, state.blockPatterns ]
+);
 
 /**
  * Returns all the available categories.

diff --git a/packages/blocks/src/store/test/reducer.js b/packages/blocks/src/store/test/reducer.js
@@ -8,7 +8,6 @@ import deepFreeze from 'deep-freeze';
  */
 import {
 	__experimentalAddBlockPatterns,
-	addBlockTypes,
 	__experimentalRemoveBlockPatterns,
 } from '../actions';
 import {
@@ -95,31 +94,6 @@ describe( 'blockStyles', () => {
 		} );
 	} );
 
-	it( 'should add block styles when adding a block', () => {
-		const original = deepFreeze( {
-			'core/image': [
-				{ name: 'fancy' },
-			],
-		} );
-
-		const state = blockStyles( original, {
-			type: 'ADD_BLOCK_TYPES',
-			blockTypes: [ {
-				name: 'core/image',
-				styles: [
-					{ name: 'original' },
-				],
-			} ],
-		} );
-
-		expect( state ).toEqual( {
-			'core/image': [
-				{ name: 'original' },
-				{ name: 'fancy' },
-			],
-		} );
-	} );
-
 	it( 'should remove block styles', () => {
 		const original = deepFreeze( {
 			'core/image': [
@@ -163,7 +137,7 @@ describe( 'blockPatterns', () => {
 		expect( state ).toEqual( {} );
 	} );
 
-	it( 'should add a new block pattern when no pattern register', () => {
+	it( 'should add a new block pattern when no pattern registered', () => {
 		const initialState = deepFreeze( {} );
 
 		const state = blockPatterns(
@@ -198,31 +172,6 @@ describe( 'blockPatterns', () => {
 		} );
 	} );
 
-	it( 'should prepend block patterns added when adding a block', () => {
-		const initialState = deepFreeze( {
-			[ blockName ]: [
-				secondBlockPattern,
-			],
-		} );
-
-		const state = blockPatterns(
-			initialState,
-			addBlockTypes( {
-				name: blockName,
-				patterns: [
-					blockPattern,
-				],
-			} )
-		);
-
-		expect( state ).toEqual( {
-			[ blockName ]: [
-				blockPattern,
-				secondBlockPattern,
-			],
-		} );
-	} );
-
 	it( 'should remove a block pattern', () => {
 		const initialState = deepFreeze( {
 			[ blockName ]: [