From 8225d471f841d1cd65a4541331301037fc13c5e1 Mon Sep 17 00:00:00 2001
From: Dominik Porada <dominik@porada.co>
Date: Fri, 14 May 2021 19:12:14 +0200
Subject: [PATCH] Add support for `placeholder` in `AlignmentToolbar` component

---
 .../components/alignment-control/README.md    |  7 ++
 .../test/__snapshots__/index.js.snap          | 76 +++++++++++++++++++
 .../alignment-control/test/index.js           | 11 +++
 .../src/components/alignment-control/ui.js    |  8 ++
 4 files changed, 102 insertions(+)

diff --git a/packages/block-editor/src/components/alignment-control/README.md b/packages/block-editor/src/components/alignment-control/README.md
index 24aa31aef9dfa6..d521a23c23b2ba 100644
--- 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
index 4f549af0b2dc11..445f88c5552613 100644
--- 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
index c4962288053252..19c6d41fd2a0b0 100644
--- 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
index 9b6b52042d1156..50b5bfc3eca23f 100644
--- 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;
 	}