From a8f6bdabddc35c00294400be4ee4e0593c3b6e2a Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@automattic.com>
Date: Fri, 7 Feb 2020 13:36:35 +0000
Subject: [PATCH] Remove: Alignment options from button nested inside buttons
 (#19824)

---
 packages/block-editor/src/hooks/align.js   | 19 +++++++++++++----
 packages/block-editor/src/hooks/index.js   |  4 +++-
 packages/block-editor/src/index.js         |  3 ++-
 packages/block-library/src/buttons/edit.js | 24 +++++++++++++++-------
 4 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js
index cfded941725ecc..8ff4b5232c9f65 100644
--- a/packages/block-editor/src/hooks/align.js
+++ b/packages/block-editor/src/hooks/align.js
@@ -7,6 +7,7 @@ import { assign, get, has, includes, without } from 'lodash';
 /**
  * WordPress dependencies
  */
+import { createContext, useContext } from '@wordpress/element';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import {
@@ -99,6 +100,13 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
+const AlignmentHookSettings = createContext( {} );
+
+/**
+ * Allows to pass additional settings to the alignment hook.
+ */
+export const AlignmentHookSettingsProvider = AlignmentHookSettings.Provider;
+
 /**
  * Override the default edit UI to include new toolbar controls for block
  * alignment, if block defines support.
@@ -108,14 +116,17 @@ export function addAttribute( settings ) {
  */
 export const withToolbarControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
+		const { isEmbedButton } = useContext( AlignmentHookSettings );
 		const { name: blockName } = props;
 		// Compute valid alignments without taking into account,
 		// if the theme supports wide alignments or not.
 		// BlockAlignmentToolbar takes into account the theme support.
-		const validAlignments = getValidAlignments(
-			getBlockSupport( blockName, 'align' ),
-			hasBlockSupport( blockName, 'alignWide', true )
-		);
+		const validAlignments = isEmbedButton
+			? []
+			: getValidAlignments(
+					getBlockSupport( blockName, 'align' ),
+					hasBlockSupport( blockName, 'alignWide', true )
+			  );
 
 		const updateAlignment = ( nextAlign ) => {
 			if ( ! nextAlign ) {
diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js
index 7bd9f390390c4d..ab3ae2756ce70c 100644
--- a/packages/block-editor/src/hooks/index.js
+++ b/packages/block-editor/src/hooks/index.js
@@ -1,7 +1,9 @@
 /**
  * Internal dependencies
  */
-import './align';
+import { AlignmentHookSettingsProvider } from './align';
 import './anchor';
 import './custom-class-name';
 import './generated-class-name';
+
+export { AlignmentHookSettingsProvider };
diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js
index 85bf3895156723..9e9e2a3c7a15b7 100644
--- a/packages/block-editor/src/index.js
+++ b/packages/block-editor/src/index.js
@@ -9,7 +9,8 @@ import '@wordpress/keyboard-shortcuts';
 /**
  * Internal dependencies
  */
-import './hooks';
+import { AlignmentHookSettingsProvider as __experimentalAlignmentHookSettingsProvider } from './hooks';
+export { __experimentalAlignmentHookSettingsProvider };
 export * from './components';
 export * from './utils';
 export { storeConfig } from './store';
diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
index 390bd687b09e88..15590ca49e713b 100644
--- a/packages/block-library/src/buttons/edit.js
+++ b/packages/block-library/src/buttons/edit.js
@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
+import {
+	__experimentalAlignmentHookSettingsProvider as AlignmentHookSettingsProvider,
+	InnerBlocks,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -14,15 +17,22 @@ const UI_PARTS = {
 	hasSelectedUI: false,
 };
 
+// Inside buttons block alignment options are not supported.
+const alignmentHooksSetting = {
+	isEmbedButton: true,
+};
+
 function ButtonsEdit( { className } ) {
 	return (
 		<div className={ className }>
-			<InnerBlocks
-				allowedBlocks={ ALLOWED_BLOCKS }
-				template={ BUTTONS_TEMPLATE }
-				__experimentalUIParts={ UI_PARTS }
-				__experimentalMoverDirection="horizontal"
-			/>
+			<AlignmentHookSettingsProvider value={ alignmentHooksSetting }>
+				<InnerBlocks
+					allowedBlocks={ ALLOWED_BLOCKS }
+					template={ BUTTONS_TEMPLATE }
+					__experimentalUIParts={ UI_PARTS }
+					__experimentalMoverDirection="horizontal"
+				/>
+			</AlignmentHookSettingsProvider>
 		</div>
 	);
 }