Show text labels in block toolbars when option is set.

WordPress · Oct 15, 2020 · 958944c · 958944c
1 parent 7493226
commit 958944c
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 8 deletions.
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
@@ -26,6 +26,7 @@ import { Component } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { stack } from '@wordpress/icons';
+import { withViewportMatch } from '@wordpress/viewport';
 
 /**
  * Internal dependencies
@@ -94,6 +95,7 @@ export class BlockSwitcher extends Component {
 			onTransform,
 			inserterItems,
 			hasBlockStyles,
+			isSmallScreen,
 		} = this.props;
 		const { hoveredClassName } = this.state;
 
@@ -128,22 +130,28 @@ export class BlockSwitcher extends Component {
 
 		const hasPossibleBlockTransformations = !! possibleBlockTransformations.length;
 
+		const blockTitle = getBlockType( hoveredBlock.name ).title;
+
 		if ( ! hasBlockStyles && ! hasPossibleBlockTransformations ) {
 			return (
 				<ToolbarGroup>
 					<ToolbarButton
 						disabled
 						className="block-editor-block-switcher__no-switcher-icon"
-						title={ __( 'Block icon' ) }
+						title={ blockTitle }
 						icon={ <BlockIcon icon={ icon } showColors /> }
 					/>
 				</ToolbarGroup>
 			);
 		}
 
+		const singleBlockLabel = isSmallScreen
+			? blockTitle
+			: `${ __( 'Change block type or style' ) }  ( ${ blockTitle } )`;
+
 		const blockSwitcherLabel =
 			1 === blocks.length
-				? __( 'Change block type or style' )
+				? singleBlockLabel
 				: sprintf(
 						/* translators: %s: number of blocks. */
 						_n(
@@ -258,5 +266,6 @@ export default compose(
 				switchToBlockType( blocks, name )
 			);
 		},
-	} ) )
+	} ) ),
+	withViewportMatch( { isSmallScreen: '< small' } )
 )( BlockSwitcher );
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -139,3 +139,88 @@
 	opacity: 0;
 	transition: opacity 300ms;
 }
+
+.show-icon-labels {
+	.block-editor-block-toolbar {
+		.components-button.has-icon {
+			width: auto;
+
+			// Hide the button icons when labels are set to display...
+			svg {
+				display: none;
+			}
+			// ... and display labels.
+			&::after {
+				content: attr(aria-label);
+			}
+		}
+	}
+
+	// Padding overrides.
+
+	.components-accessible-toolbar .components-toolbar-group > div:first-child:last-child > .components-button.has-icon {
+		padding-left: 6px;
+		padding-right: 6px;
+	}
+
+	// Switcher overrides.
+	.block-editor-block-switcher {
+		border-right: 1px solid $gray-900;
+
+		.components-dropdown-menu__toggle {
+			margin-left: 0;
+		}
+	}
+
+	.block-editor-block-switcher .components-dropdown-menu__toggle,
+	.block-editor-block-switcher__no-switcher-icon {
+		.block-editor-block-icon {
+			width: 0 !important;
+			height: 0 !important;
+		}
+
+		&:focus::before {
+			right: $grid-unit-05 !important;
+		}
+	}
+
+	// Parent selector overrides
+
+	.block-editor-block-parent-selector__button {
+		.block-editor-block-icon {
+			width: 0;
+		}
+	}
+
+	// Mover overrides.
+	.block-editor-block-toolbar__block-controls .block-editor-block-mover {
+		margin-left: 0;
+		white-space: nowrap;
+	}
+
+	.block-editor-block-mover__drag-handle.has-icon {
+		padding-left: 6px !important;
+		padding-right: 6px !important;
+		border-right: 1px solid $gray-900;
+	}
+
+	.is-up-button {
+		border-bottom: 1px solid $gray-900;
+	}
+
+	.block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
+		width: auto;
+	}
+
+	// Mobile adjustments
+	.components-toolbar,
+	.components-toolbar-group {
+		flex-shrink: 1;
+	}
+
+	.block-editor-format-toolbar {
+		.components-button + .components-button {
+			margin-left: 6px;
+		}
+	}
+}
diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.js
@@ -41,9 +41,8 @@ const FormatToolbar = () => {
 								{ ( toggleProps ) => (
 									<DropdownMenu
 										icon={ chevronDown }
-										label={ __(
-											'More rich text controls'
-										) }
+										/* translators: button label text should, if possible, be under 16 characters. */
+										label={ __( 'More formatting' ) }
 										toggleProps={ toggleProps }
 										controls={ orderBy(
 											fills.map(

diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
@@ -138,8 +138,6 @@
 	}
 	// Exception for drodpdown toggle buttons.
 	// Exception for the fullscreen mode button.
-	// Temporary exception for block toolbar (pending design).
-	.edit-post-header-toolbar__block-toolbar .components-button.has-icon,
 	.edit-post-fullscreen-mode-close.has-icon,
 	.components-button.has-icon.button-toggle {
 		svg {