Add element-selector to group block (#28576)

* Add element-selector * Inline in the main return * template-port: inline advanced controls in main return for consistency
WordPress · Feb 2, 2021 · 5259168 · 5259168
1 parent a4b7c9b
commit 5259168
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 29 deletions.
diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
@@ -5,12 +5,17 @@ import { useSelect } from '@wordpress/data';
 import {
 	InnerBlocks,
 	useBlockProps,
+	InspectorAdvancedControls,
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
 } from '@wordpress/block-editor';
-import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
+import {
+	SelectControl,
+	__experimentalBoxControl as BoxControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 const { __Visualizer: BoxControlVisualizer } = BoxControl;
 
-function GroupEdit( { attributes, clientId } ) {
+function GroupEdit( { attributes, setAttributes, clientId } ) {
 	const hasInnerBlocks = useSelect(
 		( select ) => {
 			const { getBlock } = select( 'core/block-editor' );
@@ -34,13 +39,33 @@ function GroupEdit( { attributes, clientId } ) {
 	);
 
 	return (
-		<TagName { ...blockProps }>
-			<BoxControlVisualizer
-				values={ attributes.style?.spacing?.padding }
-				showValues={ attributes.style?.visualizers?.padding }
-			/>
-			<div { ...innerBlocksProps } />
-		</TagName>
+		<>
+			<InspectorAdvancedControls>
+				<SelectControl
+					label={ __( 'HTML element' ) }
+					options={ [
+						{ label: __( 'Default (<div>)' ), value: 'div' },
+						{ label: '<header>', value: 'header' },
+						{ label: '<main>', value: 'main' },
+						{ label: '<section>', value: 'section' },
+						{ label: '<article>', value: 'article' },
+						{ label: '<aside>', value: 'aside' },
+						{ label: '<footer>', value: 'footer' },
+					] }
+					value={ TagName }
+					onChange={ ( value ) =>
+						setAttributes( { tagName: value } )
+					}
+				/>
+			</InspectorAdvancedControls>
+			<TagName { ...blockProps }>
+				<BoxControlVisualizer
+					values={ attributes.style?.spacing?.padding }
+					showValues={ attributes.style?.visualizers?.padding }
+				/>
+				<div { ...innerBlocksProps } />
+			</TagName>
+		</>
 	);
 }
 

diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
@@ -78,28 +78,26 @@ export default function TemplatePartEdit( {
 		);
 	}
 
-	const inspectorAdvancedControls = (
-		<InspectorAdvancedControls>
-			<SelectControl
-				label={ __( 'HTML element' ) }
-				options={ [
-					{ label: __( 'Default (<div>)' ), value: 'div' },
-					{ label: '<header>', value: 'header' },
-					{ label: '<main>', value: 'main' },
-					{ label: '<section>', value: 'section' },
-					{ label: '<article>', value: 'article' },
-					{ label: '<aside>', value: 'aside' },
-					{ label: '<footer>', value: 'footer' },
-				] }
-				value={ TagName }
-				onChange={ ( value ) => setAttributes( { tagName: value } ) }
-			/>
-		</InspectorAdvancedControls>
-	);
-
 	return (
 		<>
-			{ inspectorAdvancedControls }
+			<InspectorAdvancedControls>
+				<SelectControl
+					label={ __( 'HTML element' ) }
+					options={ [
+						{ label: __( 'Default (<div>)' ), value: 'div' },
+						{ label: '<header>', value: 'header' },
+						{ label: '<main>', value: 'main' },
+						{ label: '<section>', value: 'section' },
+						{ label: '<article>', value: 'article' },
+						{ label: '<aside>', value: 'aside' },
+						{ label: '<footer>', value: 'footer' },
+					] }
+					value={ TagName }
+					onChange={ ( value ) =>
+						setAttributes( { tagName: value } )
+					}
+				/>
+			</InspectorAdvancedControls>
 			<TagName { ...blockProps }>
 				{ isPlaceholder && (
 					<TemplatePartPlaceholder