Add element selector to template-part block (#27101)

* Add element selector * move to "Advanced" section * default to div * Improve wording
WordPress · Dec 7, 2020 · 8ccfc73 · 8ccfc73
1 parent a834386
commit 8ccfc73
Showing 1 changed file with 77 additions and 48 deletions.
diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
@@ -3,8 +3,13 @@
  */
 import { useRef, useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { BlockControls, useBlockProps } from '@wordpress/block-editor';
 import {
+	BlockControls,
+	InspectorAdvancedControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import {
+	SelectControl,
 	Dropdown,
 	ToolbarGroup,
 	ToolbarButton,
@@ -96,53 +101,77 @@ export default function TemplatePartEdit( {
 	// Part of a template file, post ID not resolved yet.
 	const isUnresolvedTemplateFile = ! isPlaceholder && ! postId;
 
+	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 (
-		<TagName { ...blockProps }>
-			{ isPlaceholder && (
-				<TemplatePartPlaceholder
-					setAttributes={ setAttributes }
-					innerBlocks={ innerBlocks }
-				/>
-			) }
-			{ isTemplateFile && (
-				<BlockControls>
-					<ToolbarGroup className="wp-block-template-part__block-control-group">
-						<TemplatePartNamePanel
-							postId={ postId }
-							setAttributes={ setAttributes }
-						/>
-						<Dropdown
-							className="wp-block-template-part__preview-dropdown-button"
-							contentClassName="wp-block-template-part__preview-dropdown-content"
-							position="bottom right left"
-							renderToggle={ ( { isOpen, onToggle } ) => (
-								<ToolbarButton
-									aria-expanded={ isOpen }
-									icon={ isOpen ? chevronUp : chevronDown }
-									label={ __( 'Choose another' ) }
-									onClick={ onToggle }
-									// Disable when open to prevent odd FireFox bug causing reopening.
-									// As noted in https://github.com/WordPress/gutenberg/pull/24990#issuecomment-689094119 .
-									disabled={ isOpen }
-								/>
-							) }
-							renderContent={ ( { onClose } ) => (
-								<TemplatePartSelection
-									setAttributes={ setAttributes }
-									onClose={ onClose }
-								/>
-							) }
-						/>
-					</ToolbarGroup>
-				</BlockControls>
-			) }
-			{ isTemplateFile && (
-				<TemplatePartInnerBlocks
-					postId={ postId }
-					hasInnerBlocks={ innerBlocks.length > 0 }
-				/>
-			) }
-			{ isUnresolvedTemplateFile && <Spinner /> }
-		</TagName>
+		<>
+			{ inspectorAdvancedControls }
+			<TagName { ...blockProps }>
+				{ isPlaceholder && (
+					<TemplatePartPlaceholder
+						setAttributes={ setAttributes }
+						innerBlocks={ innerBlocks }
+					/>
+				) }
+				{ isTemplateFile && (
+					<BlockControls>
+						<ToolbarGroup className="wp-block-template-part__block-control-group">
+							<TemplatePartNamePanel
+								postId={ postId }
+								setAttributes={ setAttributes }
+							/>
+							<Dropdown
+								className="wp-block-template-part__preview-dropdown-button"
+								contentClassName="wp-block-template-part__preview-dropdown-content"
+								position="bottom right left"
+								renderToggle={ ( { isOpen, onToggle } ) => (
+									<ToolbarButton
+										aria-expanded={ isOpen }
+										icon={
+											isOpen ? chevronUp : chevronDown
+										}
+										label={ __( 'Choose another' ) }
+										onClick={ onToggle }
+										// Disable when open to prevent odd FireFox bug causing reopening.
+										// As noted in https://github.com/WordPress/gutenberg/pull/24990#issuecomment-689094119 .
+										disabled={ isOpen }
+									/>
+								) }
+								renderContent={ ( { onClose } ) => (
+									<TemplatePartSelection
+										setAttributes={ setAttributes }
+										onClose={ onClose }
+									/>
+								) }
+							/>
+						</ToolbarGroup>
+					</BlockControls>
+				) }
+				{ isTemplateFile && (
+					<TemplatePartInnerBlocks
+						postId={ postId }
+						hasInnerBlocks={ innerBlocks.length > 0 }
+					/>
+				) }
+				{ isUnresolvedTemplateFile && <Spinner /> }
+			</TagName>
+		</>
 	);
 }