Add support for placeholder in AlignmentToolbar component

WordPress · May 19, 2021 · 8225d47 · 8225d47
1 parent dcd1dbb
commit 8225d47
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 0 deletions.
diff --git a/packages/block-editor/src/components/alignment-control/README.md b/packages/block-editor/src/components/alignment-control/README.md
@@ -44,6 +44,13 @@ _Note:_ In this example that we render `AlignmentControl` as a child of the `Blo
 
 The current value of the alignment setting. You may only choose from the `Options` listed above.
 
+### `placeholder`
+-   **Type:** `String`
+-   **Default:** `left` for left-to-right languages, `right` for right-to-left languages
+-   **Options:**: `left`, `center`, `right`
+
+The placeholder alignment value that will be reflected by the toolbar icon when the value is `undefined`. If the content inside your block is aligned to center when no specific `value` is defined, you should set `placeholder` to `center`.
+
 ### `onChange`
 
 -   **Type:** `Function`

diff --git a/packages/block-editor/src/components/alignment-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/alignment-control/test/__snapshots__/index.js.snap
@@ -1,5 +1,81 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`AlignmentUI should allow a custom placeholder to be specified 1`] = `
+<ToolbarDropdownMenu
+  controls={
+    Array [
+      Object {
+        "align": "left",
+        "icon": <SVG
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <Path
+            d="M4 19.8h8.9v-1.5H4v1.5zm8.9-15.6H4v1.5h8.9V4.2zm-8.9 7v1.5h16v-1.5H4z"
+          />
+        </SVG>,
+        "isActive": false,
+        "onClick": [Function],
+        "role": "menuitemradio",
+        "title": "Align text left",
+      },
+      Object {
+        "align": "center",
+        "icon": <SVG
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <Path
+            d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
+          />
+        </SVG>,
+        "isActive": false,
+        "onClick": [Function],
+        "role": "menuitemradio",
+        "title": "Align text center",
+      },
+      Object {
+        "align": "right",
+        "icon": <SVG
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <Path
+            d="M11.1 19.8H20v-1.5h-8.9v1.5zm0-15.6v1.5H20V4.2h-8.9zM4 12.8h16v-1.5H4v1.5z"
+          />
+        </SVG>,
+        "isActive": false,
+        "onClick": [Function],
+        "role": "menuitemradio",
+        "title": "Align text right",
+      },
+    ]
+  }
+  icon={
+    <SVG
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <Path
+        d="M16.4 4.2H7.6v1.5h8.9V4.2zM4 11.2v1.5h16v-1.5H4zm3.6 8.6h8.9v-1.5H7.6v1.5z"
+      />
+    </SVG>
+  }
+  label="Align"
+  popoverProps={
+    Object {
+      "isAlternate": true,
+      "position": "bottom right",
+    }
+  }
+  toggleProps={
+    Object {
+      "describedBy": "Change text alignment",
+    }
+  }
+/>
+`;
+
 exports[`AlignmentUI should allow custom alignment controls to be specified 1`] = `
 <ToolbarGroup
   controls={

diff --git a/packages/block-editor/src/components/alignment-control/test/index.js b/packages/block-editor/src/components/alignment-control/test/index.js
@@ -51,6 +51,17 @@ describe( 'AlignmentUI', () => {
 		expect( onChangeSpy ).toHaveBeenCalledWith( 'center' );
 	} );
 
+	test( 'should allow a custom placeholder to be specified', () => {
+		const wrapperPlaceholder = shallow(
+			<AlignmentUI placeholder="center" />
+		);
+		expect( wrapperPlaceholder ).toMatchSnapshot();
+
+		const wrapperIllegalPlaceholder = () =>
+			shallow( <AlignmentUI placeholder="illegal-value" /> );
+		expect( wrapperIllegalPlaceholder ).not.toThrowError();
+	} );
+
 	test( 'should allow custom alignment controls to be specified', () => {
 		const wrapperCustomControls = shallow(
 			<AlignmentUI

diff --git a/packages/block-editor/src/components/alignment-control/ui.js b/packages/block-editor/src/components/alignment-control/ui.js
@@ -35,6 +35,7 @@ const POPOVER_PROPS = {
 
 function AlignmentUI( {
 	value,
+	placeholder,
 	onChange,
 	alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
 	label = __( 'Align' ),
@@ -51,8 +52,15 @@ function AlignmentUI( {
 		( control ) => control.align === value
 	);
 
+	const placeholderAlignment = find(
+		alignmentControls,
+		( control ) => control.align === placeholder
+	);
+
 	function setIcon() {
 		if ( activeAlignment ) return activeAlignment.icon;
+		if ( placeholderAlignment ) return placeholderAlignment.icon;
+
 		return isRTL() ? alignRight : alignLeft;
 	}