Add allowedControls prop to allow limiting controls shown

WordPress · Jan 28, 2021 · 37ae8ad · 37ae8ad
1 parent 4f9afb7
commit 37ae8ad
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 32 deletions.
diff --git a/packages/block-editor/src/components/justify-toolbar/README.md b/packages/block-editor/src/components/justify-toolbar/README.md
@@ -28,11 +28,20 @@ _Note:_ In this example that we render `JustifyToolbar` as a child of the `Block
 
 ### Props
 
+#### `allowedControls`
+* **Type:** `string[]`
+* **Default:** `[ 'left', 'center', 'right', 'space-between' ]`
+
+An array of strings for what controls to show, by default it shows all.
+
+
 #### `isCollapsed`
 * **Type:** `boolean`
+* **Default:** `true`
 
 Whether to display toolbar options in the dropdown menu.
 
+
 #### `onChange`
 * **Type:** `Function`
 

diff --git a/packages/block-editor/src/components/justify-toolbar/index.js b/packages/block-editor/src/components/justify-toolbar/index.js
@@ -21,46 +21,56 @@ const icons = {
 	'space-between': justifySpaceBetween,
 };
 
-export function JustifyToolbar( {
-	isCollapsed,
-	onChange,
-	value,
-	popoverProps,
-} ) {
+export function JustifyToolbar( props ) {
+	const {
+		allowedControls = [ 'left', 'center', 'right', 'space-between' ],
+		isCollapsed = true,
+		onChange,
+		value,
+		popoverProps,
+	} = props;
+
 	const icon = value ? icons[ value ] : icons.left;
+	const allControls = [
+		{
+			name: 'left',
+			icon: justifyLeft,
+			title: __( 'Justify items left' ),
+			isActive: 'left' === value,
+			onClick: onChange( 'left' ),
+		},
+		{
+			name: 'center',
+			icon: justifyCenter,
+			title: __( 'Justify items center' ),
+			isActive: 'center' === value,
+			onClick: onChange( 'center' ),
+		},
+		{
+			name: 'right',
+			icon: justifyRight,
+			title: __( 'Justify items right' ),
+			isActive: 'right' === value,
+			onClick: onChange( 'right' ),
+		},
+		{
+			name: 'space-between',
+			icon: justifySpaceBetween,
+			title: __( 'Space between items' ),
+			isActive: 'space-between' === value,
+			onClick: onChange( 'space-between' ),
+		},
+	];
 
 	return (
 		<ToolbarGroup
 			icon={ icon }
 			popoverProps={ popoverProps }
 			label={ __( 'Change items justification' ) }
 			isCollapsed={ isCollapsed }
-			controls={ [
-				{
-					icon: justifyLeft,
-					title: __( 'Justify items left' ),
-					isActive: 'left' === value,
-					onClick: onChange( 'left' ),
-				},
-				{
-					icon: justifyCenter,
-					title: __( 'Justify items center' ),
-					isActive: 'center' === value,
-					onClick: onChange( 'center' ),
-				},
-				{
-					icon: justifyRight,
-					title: __( 'Justify items right' ),
-					isActive: 'right' === value,
-					onClick: onChange( 'right' ),
-				},
-				{
-					icon: justifySpaceBetween,
-					title: __( 'Space between items' ),
-					isActive: 'space-between' === value,
-					onClick: onChange( 'space-between' ),
-				},
-			] }
+			controls={ allControls.filter( ( elem ) =>
+				allowedControls.includes( elem.name )
+			) }
 		/>
 	);
 }