adds default text for appender (#22293)

* adds default text for appender * adds a classname to label also refactores out useless component
WordPress · Jun 3, 2020 · c71126d · c71126d
1 parent 9a6e19b
commit c71126d
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 26 deletions.
diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js
@@ -52,31 +52,40 @@ function ButtonBlockAppender(
 					);
 				}
 				const isToggleButton = ! hasSingleBlockType;
-				return (
-					<Tooltip text={ label }>
-						<Button
-							ref={ ref }
-							onFocus={ onFocus }
-							tabIndex={ tabIndex }
-							className={ classnames(
-								className,
-								'block-editor-button-block-appender'
-							) }
-							onClick={ onToggle }
-							aria-haspopup={
-								isToggleButton ? 'true' : undefined
-							}
-							aria-expanded={
-								isToggleButton ? isOpen : undefined
-							}
-							disabled={ disabled }
-							label={ label }
-						>
+
+				let inserterButton = (
+					<Button
+						ref={ ref }
+						onFocus={ onFocus }
+						tabIndex={ tabIndex }
+						className={ classnames(
+							className,
+							'block-editor-button-block-appender'
+						) }
+						onClick={ onToggle }
+						aria-haspopup={ isToggleButton ? 'true' : undefined }
+						aria-expanded={ isToggleButton ? isOpen : undefined }
+						disabled={ disabled }
+						label={ label }
+					>
+						{ ! hasSingleBlockType && (
 							<VisuallyHidden as="span">{ label }</VisuallyHidden>
-							<Icon icon={ create } />
-						</Button>
-					</Tooltip>
+						) }
+						<Icon icon={ create } />
+						{ hasSingleBlockType && (
+							<span className="block-editor-button-block-appender__label">
+								{ label }{ ' ' }
+							</span>
+						) }
+					</Button>
 				);
+
+				if ( isToggleButton ) {
+					inserterButton = (
+						<Tooltip text={ label }> { inserterButton } </Tooltip>
+					);
+				}
+				return inserterButton;
 			} }
 			isAppender
 		/>

diff --git a/packages/block-editor/src/components/button-block-appender/style.scss b/packages/block-editor/src/components/button-block-appender/style.scss
@@ -23,16 +23,27 @@
 
 	// This variant is used in inline situations, like Buttons, Social Links, Navigation Menu.
 	&.block-list-appender__toggle {
-		background: $dark-gray-primary;
-		color: $white;
+		display: flex;
+		flex-direction: row;
+		color: $dark-gray-primary;
 		box-shadow: none;
-		width: 24px;
 		height: 24px;
 		padding: 0;
 		margin-left: $grid-unit-10;
 
 		&:active {
 			color: $white;
 		}
+
+		& > svg {
+			width: 24px;
+			background-color: $dark-gray-primary;
+			color: $white;
+		}
+
+		.block-editor-button-block-appender__label {
+			display: block;
+			margin-left: $grid-unit-10;
+		}
 	}
 }