Include Add menu item text on off canvas editor inserter.

WordPress · Feb 1, 2023 · 8a1a2ea · 8a1a2ea
1 parent 76f8b5f
commit 8a1a2ea
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 12 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
@@ -6,6 +6,8 @@ import { speak } from '@wordpress/a11y';
 import { useSelect } from '@wordpress/data';
 import { forwardRef, useState, useEffect } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { plus } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -84,6 +86,41 @@ export const Appender = forwardRef(
 					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 }
+								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 }
 					toggleProps={ { 'aria-describedby': descriptionId } }
 					onSelectOrClose={ ( maybeInsertedBlock ) => {

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,6 @@
 .offcanvas-editor-appender .block-editor-inserter__toggle {
-	background-color: #1e1e1e;
-	color: #fff;
-	margin: $grid-unit-10 0 0 24px;
-	border-radius: 2px;
-	height: 24px;
+	margin: 0 0 0 $grid-unit-40;
 	min-width: 24px;
-	padding: 0;
-
-	&:hover,
-	&:focus {
-		background: var(--wp-admin-theme-color);
-		color: #fff;
-	}
 }
 
 .offcanvas-editor-appender__description {