Include Add menu item text on off canvas editor inserter.

WordPress · Jan 6, 2023 · aac377c · aac377c
1 parent 0b6a6be
commit aac377c
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 11 deletions.
diff --git a/packages/block-editor/src/components/off-canvas-editor/appender.js b/packages/block-editor/src/components/off-canvas-editor/appender.js
@@ -3,6 +3,10 @@
  */
 import { useSelect } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';
+import { plus } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
@@ -41,6 +45,43 @@ export const Appender = forwardRef( ( props, ref ) => {
 				selectBlockOnInsert={ false }
 				shouldDirectInsert={ false }
 				__experimentalIsQuick
+				renderToggle={ ( {
+					onToggle,
+					disabled,
+					isOpen,
+					hasSingleBlockType,
+					toggleProps = {},
+				} ) => {
+					const { onClick, ...rest } = toggleProps;
+					// Handle both onClick functions from the toggle and the parent component.
+					function handleClick( event ) {
+						if ( onToggle ) {
+							onToggle( event );
+						}
+						if ( onClick ) {
+							onClick( event );
+						}
+					}
+					return (
+						<Button
+							icon={ plus }
+							label={ __( 'Add menu item' ) }
+							tooltipPosition="bottom"
+							onClick={ handleClick }
+							className="block-editor-inserter__toggle"
+							aria-haspopup={
+								! hasSingleBlockType ? 'true' : false
+							}
+							aria-expanded={
+								! hasSingleBlockType ? isOpen : false
+							}
+							disabled={ disabled }
+							{ ...rest }
+						>
+							{ __( 'Add menu item' ) }
+						</Button>
+					);
+				} }
 				{ ...props }
 			/>
 		</div>

diff --git a/packages/block-editor/src/components/off-canvas-editor/style.scss b/packages/block-editor/src/components/off-canvas-editor/style.scss
@@ -1,17 +1,7 @@
 .offcanvas-editor__appender .block-editor-inserter__toggle {
-	background-color: #1e1e1e;
-	color: #fff;
 	margin: $grid-unit-10 0 0 24px;
-	border-radius: 2px;
-	height: 24px;
 	min-width: 24px;
-	padding: 0;
-
-	&:hover,
-	&:focus {
-		background: var(--wp-admin-theme-color);
-		color: #fff;
-	}
+	padding: 6px 6px 6px 0;
 }
 
 .offcanvas-editor-list-view-tree-wrapper {