Shared block form: add missing label. (WordPress#6206)

* Shared block form: add missing label. * Move label to the left and implement responsive view. * Min-width is more appropriat with flexbox. * Remove widths and use flex shorthand property. * Switch to responsive view earlier. * Update label and default shared block name.
nuzzio · Apr 25, 2018 · ffbff37 · ffbff37
1 parent 8d920d7
commit ffbff37
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 10 deletions.
diff --git a/blocks/library/block/edit-panel/index.js b/blocks/library/block/edit-panel/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import { Button, withInstanceId } from '@wordpress/components';
 import { Component, Fragment, createRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { keycodes } from '@wordpress/utils';
@@ -55,7 +55,7 @@ class SharedBlockEditPanel extends Component {
 	}
 
 	render() {
-		const { isEditing, title, isSaving, onEdit, onCancel } = this.props;
+		const { isEditing, title, isSaving, onEdit, onCancel, instanceId } = this.props;
 
 		return (
 			<Fragment>
@@ -76,6 +76,12 @@ class SharedBlockEditPanel extends Component {
 				) }
 				{ ( isEditing || isSaving ) && (
 					<form className="shared-block-edit-panel" onSubmit={ this.handleFormSubmit }>
+						<label
+							htmlFor={ `shared-block-edit-panel__title-${ instanceId }` }
+							className="shared-block-edit-panel__label"
+						>
+							{ __( 'Name:' ) }
+						</label>
 						<input
 							ref={ this.titleField }
 							type="text"
@@ -84,6 +90,7 @@ class SharedBlockEditPanel extends Component {
 							value={ title }
 							onChange={ this.handleTitleChange }
 							onKeyDown={ this.handleTitleKeyDown }
+							id={ `shared-block-edit-panel__title-${ instanceId }` }
 						/>
 						<Button
 							type="submit"
@@ -110,4 +117,4 @@ class SharedBlockEditPanel extends Component {
 	}
 }
 
-export default SharedBlockEditPanel;
+export default withInstanceId( SharedBlockEditPanel );
diff --git a/blocks/library/block/edit-panel/style.scss b/blocks/library/block/edit-panel/style.scss
@@ -3,9 +3,9 @@
 	background: $light-gray-100;
 	color: $dark-gray-500;
 	display: flex;
+	flex-wrap: wrap;
 	font-family: $default-font;
 	font-size: $default-font-size;
-	justify-content: flex-end;
 	margin: 0 (-$block-padding);
 	padding: 10px $block-padding;
 	position: relative;
@@ -19,16 +19,33 @@
 		margin-right: auto;
 	}
 
+	.shared-block-edit-panel__label {
+		margin-right: $item-spacing;
+		white-space: nowrap;
+		font-weight: 600;
+	}
+
 	.shared-block-edit-panel__title {
-		flex-grow: 1;
+		flex: 1 1 100%;
 		font-size: 14px;
 		height: 30px;
-		margin: 0 auto 0 0;
-		max-width: 230px;
+		margin: #{ $item-spacing / 2 } 0 $item-spacing;
 	}
 
 	// Needs specificity to override the margin-bottom set by .button
 	.wp-core-ui & .shared-block-edit-panel__button {
-		margin: 0 0 0 5px;
+		margin: 0 5px 0 0;
+	}
+
+	@include break-large() {
+		flex-wrap: nowrap;
+
+		.shared-block-edit-panel__title {
+			margin: 0;
+		}
+
+		.wp-core-ui & .shared-block-edit-panel__button {
+			margin: 0 0 0 5px;
+		}
 	}
 }
diff --git a/editor/store/effects.js b/editor/store/effects.js
@@ -546,7 +546,7 @@ export default {
 		const sharedBlock = {
 			id: uniqueId( 'shared' ),
 			uid: parsedBlock.uid,
-			title: __( 'Untitled block' ),
+			title: __( 'Untitled shared block' ),
 		};
 
 		dispatch( receiveSharedBlocks( [ {

diff --git a/editor/store/test/effects.js b/editor/store/test/effects.js
@@ -923,7 +923,7 @@ describe( 'effects', () => {
 						sharedBlock: {
 							id: expect.stringMatching( /^shared/ ),
 							uid: staticBlock.uid,
-							title: 'Untitled block',
+							title: 'Untitled shared block',
 						},
 						parsedBlock: staticBlock,
 					} ] )