Remove: Alignment options from button nested inside buttons (#19824)

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 ) {

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 };

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';

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>
 	);
 }