@wordpress/block-editor 10.4.0 → 10.5.0

package/src/layouts/flex.js

@@ -10,7 +10,14 @@ import {
 	arrowRight,
 	arrowDown,
 } from '@wordpress/icons';
-import { Button, ToggleControl, Flex, FlexItem } from '@wordpress/components';
+import {
+	Button,
+	ToggleControl,
+	Flex,
+	FlexItem,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -289,22 +296,23 @@ function FlexLayoutJustifyContentControl( {
 	}
 
 	return (
-		<fieldset className="block-editor-hooks__flex-layout-justification-controls">
-			<legend>{ __( 'Justification' ) }</legend>
-			<div>
-				{ justificationOptions.map( ( { value, icon, label } ) => {
-					return (
-						<Button
-							key={ value }
-							label={ label }
-							icon={ icon }
-							isPressed={ justifyContent === value }
-							onClick={ () => onJustificationChange( value ) }
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
+		<ToggleGroupControl
+			label={ __( 'Justification' ) }
+			value={ justifyContent }
+			onChange={ onJustificationChange }
+			className="block-editor-hooks__flex-layout-justification-controls"
+		>
+			{ justificationOptions.map( ( { value, icon, label } ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ value }
+						value={ value }
+						icon={ icon }
+						label={ label }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }
 
@@ -327,30 +335,27 @@ function FlexWrapControl( { layout, onChange } ) {
 function OrientationControl( { layout, onChange } ) {
 	const { orientation = 'horizontal' } = layout;
 	return (
-		<fieldset className="block-editor-hooks__flex-layout-orientation-controls">
-			<legend>{ __( 'Orientation' ) }</legend>
-			<Button
-				label={ __( 'Horizontal' ) }
+		<ToggleGroupControl
+			className="block-editor-hooks__flex-layout-orientation-controls"
+			label={ __( 'Orientation' ) }
+			value={ orientation }
+			onChange={ ( value ) =>
+				onChange( {
+					...layout,
+					orientation: value,
+				} )
+			}
+		>
+			<ToggleGroupControlOptionIcon
 				icon={ arrowRight }
-				isPressed={ orientation === 'horizontal' }
-				onClick={ () =>
-					onChange( {
-						...layout,
-						orientation: 'horizontal',
-					} )
-				}
+				value={ 'horizontal' }
+				label={ __( 'Horizontal' ) }
 			/>
-			<Button
-				label={ __( 'Vertical' ) }
+			<ToggleGroupControlOptionIcon
 				icon={ arrowDown }
-				isPressed={ orientation === 'vertical' }
-				onClick={ () =>
-					onChange( {
-						...layout,
-						orientation: 'vertical',
-					} )
-				}
+				value={ 'vertical' }
+				label={ __( 'Vertical' ) }
 			/>
-		</fieldset>
+		</ToggleGroupControl>
 	);
 }

package/src/store/actions.js

@@ -1263,6 +1263,28 @@ export function toggleBlockMode( clientId ) {
 	};
 }
 
+/**
+ * Returns an action object used in signalling that the block interface, eg. toolbar, outline, etc. should be hidden.
+ *
+ * @return {Object} Action object.
+ */
+export function __experimentalHideBlockInterface() {
+	return {
+		type: 'HIDE_BLOCK_INTERFACE',
+	};
+}
+
+/**
+ * Returns an action object used in signalling that the block interface, eg. toolbar, outline, etc. should be shown.
+ *
+ * @return {Object} Action object.
+ */
+export function __experimentalShowBlockInterface() {
+	return {
+		type: 'SHOW_BLOCK_INTERFACE',
+	};
+}
+
 /**
  * Returns an action object used in signalling that the user has begun to type.
  *

package/src/store/reducer.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { reduce, omit, mapValues, isEqual, isEmpty } from 'lodash';
+import { omit, mapValues, isEqual, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -683,30 +683,22 @@ const withReplaceInnerBlocks = ( reducer ) => ( state, action ) => {
 		// will be deleted entirely from its entity.
 		stateAfterInsert.order = {
 			...stateAfterInsert.order,
-			...reduce(
-				nestedControllers,
-				( result, value, key ) => {
-					if ( state.order[ key ] ) {
-						result[ key ] = state.order[ key ];
-					}
-					return result;
-				},
-				{}
-			),
+			...Object.keys( nestedControllers ).reduce( ( result, key ) => {
+				if ( state.order[ key ] ) {
+					result[ key ] = state.order[ key ];
+				}
+				return result;
+			}, {} ),
 		};
 		stateAfterInsert.tree = {
 			...stateAfterInsert.tree,
-			...reduce(
-				nestedControllers,
-				( result, value, _key ) => {
-					const key = `controlled||${ _key }`;
-					if ( state.tree[ key ] ) {
-						result[ key ] = state.tree[ key ];
-					}
-					return result;
-				},
-				{}
-			),
+			...Object.keys( nestedControllers ).reduce( ( result, _key ) => {
+				const key = `controlled||${ _key }`;
+				if ( state.tree[ key ] ) {
+					result[ key ] = state.tree[ key ];
+				}
+				return result;
+			}, {} ),
 		};
 	}
 	return stateAfterInsert;
@@ -873,24 +865,22 @@ export const blocks = pipe(
 				const next = action.clientIds.reduce(
 					( accumulator, id ) => ( {
 						...accumulator,
-						[ id ]: reduce(
+						[ id ]: Object.entries(
 							action.uniqueByBlock
 								? action.attributes[ id ]
-								: action.attributes,
-							( result, value, key ) => {
-								// Consider as updates only changed values.
-								if ( value !== result[ key ] ) {
-									result = getMutateSafeObject(
-										state[ id ],
-										result
-									);
-									result[ key ] = value;
-								}
-
-								return result;
-							},
-							state[ id ]
-						),
+								: action.attributes ?? {}
+						).reduce( ( result, [ key, value ] ) => {
+							// Consider as updates only changed values.
+							if ( value !== result[ key ] ) {
+								result = getMutateSafeObject(
+									state[ id ],
+									result
+								);
+								result[ key ] = value;
+							}
+
+							return result;
+						}, state[ id ] ),
 					} ),
 					{}
 				);
@@ -1056,8 +1046,7 @@ export const blocks = pipe(
 					} ),
 					( nextState ) =>
 						mapValues( nextState, ( subState ) =>
-							reduce(
-								subState,
+							Object.values( subState ).reduce(
 								( result, clientId ) => {
 									if ( clientId === clientIds[ 0 ] ) {
 										return [
@@ -1160,6 +1149,26 @@ export const blocks = pipe(
 	},
 } );
 
+/**
+ * Reducer returning visibility status of block interface.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+export function isBlockInterfaceHidden( state = false, action ) {
+	switch ( action.type ) {
+		case 'HIDE_BLOCK_INTERFACE':
+			return true;
+
+		case 'SHOW_BLOCK_INTERFACE':
+			return false;
+	}
+
+	return state;
+}
+
 /**
  * Reducer returning typing state.
  *
@@ -1809,6 +1818,7 @@ export function temporarilyEditingAsBlocks( state = '', action ) {
 export default combineReducers( {
 	blocks,
 	isTyping,
+	isBlockInterfaceHidden,
 	draggedBlocks,
 	selection,
 	isMultiSelecting,

package/src/store/selectors.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { map, reduce, find, filter, orderBy } from 'lodash';
+import { map, find, filter, orderBy } from 'lodash';
 import createSelector from 'rememo';
 
 /**
@@ -273,14 +273,10 @@ export const getGlobalBlockCount = createSelector(
 		if ( ! blockName ) {
 			return clientIds.length;
 		}
-		return reduce(
-			clientIds,
-			( accumulator, clientId ) => {
-				const block = state.blocks.byClientId[ clientId ];
-				return block.name === blockName ? accumulator + 1 : accumulator;
-			},
-			0
-		);
+		return clientIds.reduce( ( accumulator, clientId ) => {
+			const block = state.blocks.byClientId[ clientId ];
+			return block.name === blockName ? accumulator + 1 : accumulator;
+		}, 0 );
 	},
 	( state ) => [ state.blocks.order, state.blocks.byClientId ]
 );
@@ -1274,6 +1270,17 @@ export function isTyping( state ) {
 	return state.isTyping;
 }
 
+/**
+ * Returns true if the the block interface should be hidden, or false otherwise.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether the block toolbar is hidden.
+ */
+export function __experimentalIsBlockInterfaceHidden( state ) {
+	return state.isBlockInterfaceHidden;
+}
+
 /**
  * Returns true if the user is dragging blocks, or false otherwise.
  *

package/src/store/test/actions.js

@@ -27,6 +27,7 @@ const noop = () => {};
 
 const {
 	clearSelectedBlock,
+	__experimentalHideBlockInterface: hideBlockInterface,
 	insertBlock,
 	insertBlocks,
 	mergeBlocks,
@@ -39,6 +40,7 @@ const {
 	replaceInnerBlocks,
 	resetBlocks,
 	selectBlock,
+	__experimentalShowBlockInterface: showBlockInterface,
 	showInsertionPoint,
 	startMultiSelect,
 	startTyping,
@@ -775,6 +777,22 @@ describe( 'actions', () => {
 		} );
 	} );
 
+	describe( 'hideBlockInterface', () => {
+		it( 'should return the HIDE_BLOCK_INTERFACE action', () => {
+			expect( hideBlockInterface() ).toEqual( {
+				type: 'HIDE_BLOCK_INTERFACE',
+			} );
+		} );
+	} );
+
+	describe( 'showBlockInterface', () => {
+		it( 'should return the SHOW_BLOCK_INTERFACE action', () => {
+			expect( showBlockInterface() ).toEqual( {
+				type: 'SHOW_BLOCK_INTERFACE',
+			} );
+		} );
+	} );
+
 	describe( 'startTyping', () => {
 		it( 'should return the START_TYPING action', () => {
 			expect( startTyping() ).toEqual( {

package/src/store/test/reducer.js

@@ -19,6 +19,7 @@ import {
 	hasSameKeys,
 	isUpdatingSameBlockAttribute,
 	blocks,
+	isBlockInterfaceHidden,
 	isTyping,
 	draggedBlocks,
 	selection,
@@ -1894,6 +1895,27 @@ describe( 'state', () => {
 
 					expect( state.attributes ).toBe( state.attributes );
 				} );
+
+				it( 'should handle undefined attributes', () => {
+					const original = deepFreeze(
+						blocks( undefined, {
+							type: 'RESET_BLOCKS',
+							blocks: [
+								{
+									clientId: 'kumquat',
+									attributes: {},
+									innerBlocks: [],
+								},
+							],
+						} )
+					);
+					const state = blocks( original, {
+						type: 'UPDATE_BLOCK_ATTRIBUTES',
+						clientIds: [ 'kumquat' ],
+					} );
+
+					expect( state.attributes.kumquat ).toEqual( {} );
+				} );
 			} );
 
 			describe( 'isPersistentChange', () => {
@@ -2253,6 +2275,24 @@ describe( 'state', () => {
 		} );
 	} );
 
+	describe( 'isBlockInterfaceHidden()', () => {
+		it( 'should set the hide block interface flag to true', () => {
+			const state = isBlockInterfaceHidden( false, {
+				type: 'HIDE_BLOCK_INTERFACE',
+			} );
+
+			expect( state ).toBe( true );
+		} );
+
+		it( 'should set the hide block interface flag to false', () => {
+			const state = isBlockInterfaceHidden( false, {
+				type: 'SHOW_BLOCK_INTERFACE',
+			} );
+
+			expect( state ).toBe( false );
+		} );
+	} );
+
 	describe( 'isTyping()', () => {
 		it( 'should set the typing flag to true', () => {
 			const state = isTyping( false, {

package/src/store/test/selectors.js

@@ -44,6 +44,7 @@ const {
 	isBlockMultiSelected,
 	isFirstMultiSelectedBlock,
 	getBlockMode,
+	__experimentalIsBlockInterfaceHidden: isBlockInterfaceHidden,
 	isTyping,
 	isDraggingBlocks,
 	getDraggedBlockClientIds,
@@ -1940,6 +1941,24 @@ describe( 'selectors', () => {
 		} );
 	} );
 
+	describe( 'isBlockInterfaceHidden', () => {
+		it( 'should return the true if toggled true in state', () => {
+			const state = {
+				isBlockInterfaceHidden: true,
+			};
+
+			expect( isBlockInterfaceHidden( state ) ).toBe( true );
+		} );
+
+		it( 'should return false if toggled false in state', () => {
+			const state = {
+				isBlockInterfaceHidden: false,
+			};
+
+			expect( isBlockInterfaceHidden( state ) ).toBe( false );
+		} );
+	} );
+
 	describe( 'isTyping', () => {
 		it( 'should return the isTyping flag if the block is selected', () => {
 			const state = {