Merge pull request #2001 from WordPress/polish/ui-docs-various

Polish block UI, inspector, add contributors, fix quote styles
WordPress · Jul 27, 2017 · 5321e8b · 5321e8b
2 parents b120083 + d9ef6d1
commit 5321e8b
Show file tree

Hide file tree

Showing 12 changed files with 146 additions and 59 deletions.
diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
@@ -70,3 +70,13 @@ This list is manually curated to include valuable contributions by volunteers th
 | @shaunandrews | |
 | @hugobaeta | |
 | @mizejewski | |
+| @buzztone | |
+| @mathetos | |
+| @GaryJones | |
+| @jasonagnew | |
+| @brickbones | |
+| @iamgabrielma | |
+| @swissspidy | |
+| @dixitadusara | |
+| @ameeker | |
+| @StaggerLeee | |
diff --git a/blocks/editable/style.scss b/blocks/editable/style.scss
@@ -10,6 +10,14 @@
 		min-height: $editor-font-size * $editor-line-height;
 	}
 
+	> p:first-child {
+		margin-top: 0;
+	}
+
+	&.mce-content-body > p {	// needs specificity
+		line-height: inherit;
+	}
+
 	&:focus {
 		outline: none;
 	}

diff --git a/blocks/library/gallery/style.scss b/blocks/library/gallery/style.scss
@@ -19,3 +19,7 @@
 .blocks-gallery__placeholder-instructions {
 	margin: 1.8em 0;
 }
+
+.editor-visual-editor__block[data-type="core/gallery"] .editor-visual-editor__block-edit {
+	overflow: hidden;
+}
diff --git a/editor/assets/stylesheets/_z-index.scss b/editor/assets/stylesheets/_z-index.scss
@@ -13,10 +13,10 @@ $z-layers: (
 	'.editor-inserter__tabs': 1,
 	'.editor-inserter__tab.is-active': 1,
 	'.components-panel__header': 1,
+	'.editor-block-mover': 10,
 	'.editor-header': 20,
 	'.editor-post-visibility__dialog': 30,
 	'.editor-post-schedule__dialog': 30,
-	'.editor-block-mover': 30,
 
 	// Show drop zone above most standard content, but below any overlays
 	'.components-drop-zone': 100,

diff --git a/editor/block-mover/style.scss b/editor/block-mover/style.scss
@@ -1,8 +1,9 @@
 .editor-block-mover {
 	position: absolute;
-	top: 10px;
+	top: 0;
 	left: 0;
-	padding: 0 14px 20px 0; // handles hover area
+	height: $text-editor-font-size * 4; // same height as an empty paragraph
+	padding: 6px 14px 6px 0; // handles hover area
 	z-index: z-index( '.editor-block-mover' );
 
 	// Mobile, to be revisited
@@ -34,4 +35,8 @@
 	.dashicon {
 		display: block;
 	}
+
+	&:first-child {
+		margin-bottom: 4px;
+	}
 }
diff --git a/editor/block-settings-menu/style.scss b/editor/block-settings-menu/style.scss
@@ -1,9 +1,11 @@
 .editor-block-settings-menu {
 	position: absolute;
-	top: 10px;
+	top: 0;
 	right: 0;
+	height: $text-editor-font-size * 4; // same height as an empty paragraph
+	padding: 6px 0 6px 14px; // handles hover area
 
-	// Mobile, to be revisited
+	// Mobile
 	display: none;
 
 	@include break-small {
@@ -22,7 +24,6 @@
 	width: 20px;
 	height: 20px;
 	border-radius: 50%;
-	margin-bottom: 8px;
 
 	&[aria-disabled="true"] {
 		cursor: default;
@@ -33,4 +34,8 @@
 	.dashicon {
 		display: block;
 	}
+
+	&:first-child {
+		margin-bottom: 4px;
+	}
 }
diff --git a/editor/modes/visual-editor/block-list.js b/editor/modes/visual-editor/block-list.js
@@ -249,15 +249,16 @@ class VisualEditorBlockList extends Component {
 					);
 				} ) }
 				{ ! blocks.length &&
-					<input
-						type="text"
-						readOnly
-						className="editor-visual-editor__placeholder"
-						value={ __( 'Write your story' ) }
-						onFocus={ this.appendDefaultBlock }
-						onClick={ noop }
-						onKeyDown={ noop }
-					/>
+					<div className="editor-visual-editor__placeholder">
+						<input
+							type="text"
+							readOnly
+							value={ __( 'Write your story' ) }
+							onFocus={ this.appendDefaultBlock }
+							onClick={ noop }
+							onKeyDown={ noop }
+						/>
+					</div>
 				}
 				<div
 					className={ continueWritingClassname }

diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
@@ -246,21 +246,41 @@
 			display: none;
 		}
 
-		.editor-block-settings-menu {
-			top: -24px;
-			right: 10px;
+		@include break-wide() {
+			.editor-block-mover {
+				display: block;
+			}
+
+			.editor-block-mover {
+				top: -30px;
+				left: 10px;
+				height: auto;
+			}
+
+			.editor-block-mover__control {
+				float: left;
+				margin-right: 8px;
+			}
 		}
 
 		.editor-block-settings-menu__control {
 			float: left;
 			margin-right: 8px;
 		}
+
+		.editor-block-settings-menu {
+			top: -30px;
+			right: 10px;
+			height: auto;
+		}
 	}
 
 	&[data-align="full"],
 	&[data-align="wide"] {
 		.editor-visual-editor__block-controls {
-			width: $visual-editor-max-width - $block-padding - $block-padding;
+			@include break-small() {
+				width: $visual-editor-max-width - $block-padding - $block-padding;
+			}
 			margin-left: auto;
 			margin-right: auto;
 		}
@@ -349,38 +369,60 @@ $sticky-bottom-offset: 20px;
 	}
 }
 
-.editor-visual-editor__placeholder[type=text] {
+.editor-visual-editor__placeholder {
+	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
+	padding: 0;
 	clear: left;
-	margin: 2px auto;
-	max-width: $visual-editor-max-width;
+	margin: 0 auto;
 	position: relative;
-	padding: $block-padding;
-	outline: 1px solid transparent;
-	border: none;
-	background: none;
-	box-shadow: none;
-	display: block;
-	transition: 0.2s outline;
-	text-align: left;
-	width: 100%;
-	color: $dark-gray-300;
-	font-size: $editor-font-size;
-	line-height: $editor-line-height;
-	cursor: text;
-	left: -1px;
-
-	&:hover {
-		outline: 1px solid $light-gray-500;
+
+	@include break-small() {
+		padding: 0 ( $block-padding + $block-mover-padding-visible );
+	}
+
+	input[type=text] {
+		height: $text-editor-font-size * 4; // same height as an empty paragraph
+		margin-top: 0px;
+		margin-bottom: 5px;
+		outline: 1px solid transparent;
+		border: none;
+		background: none;
+		box-shadow: none;
+		display: block;
+		transition: 0.2s outline;
+		text-align: left;
+		width: 100%;
+		color: $dark-gray-300;
+		font-size: $editor-font-size;
+		line-height: $editor-line-height;
+		cursor: text;
+		left: -1px;
+
+		&:hover {
+			outline: 1px solid $light-gray-500;
+		}
+
+		padding: ( $block-padding - 2px ) $block-padding;
+
+		@include break-small() {
+			margin-left: -$block-padding;
+			margin-right: -$block-padding;
+		}
 	}
 }
 
 .editor-visual-editor__continue-writing {
 	display: flex;
 	align-items: baseline;
-	max-width: $visual-editor-max-width;
+	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
 	margin: 0 auto;
 	clear: both;
 
+	padding: 0;
+	@include break-small() {
+		padding: 0 ( $block-mover-padding-visible );
+	}
+
 	> .editor-inserter__block {
 		opacity: 0;
 		transition: opacity 150ms;
@@ -389,6 +431,10 @@ $sticky-bottom-offset: 20px;
 		font-family: $default-font;
 		font-size: $default-font-size;
 		box-shadow: none;
+
+		&:active {
+			background: none;
+		}
 	}
 
 	&:hover > .editor-inserter__block,

diff --git a/editor/post-permalink/style.scss b/editor/post-permalink/style.scss
@@ -2,15 +2,20 @@
 	display: inline-flex;
 	align-items: center;
 	position: absolute;
-	top: -36px;
-	left: $block-padding;
-	right: $block-padding;
+	top: -34px;
 	box-shadow: $shadow-popover;
 	border: 1px solid $light-gray-500;
 	background: $white;
 	padding: 5px;
 	font-family: $default-font;
 	font-size: $default-font-size;
+	left: 0;
+	right: 0;
+
+	@include break-small() {
+		left: $block-padding + $block-mover-padding-visible - 2px;
+		right: $block-padding + $block-mover-padding-visible - 2px;
+	}
 }
 
 .editor-post-permalink__label {

diff --git a/editor/post-title/style.scss b/editor/post-title/style.scss
@@ -3,19 +3,25 @@
 	margin-left: auto;
 	margin-right: auto;
 	position: relative;
-	margin-bottom: 10px;
-	max-width: $visual-editor-max-width - ( 2 * $block-mover-margin );
+	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
+	padding: 5px 0;
 
-	@include break-small {
-		max-width: $visual-editor-max-width;
+	@include break-small() {
+		padding: 5px ( $block-padding + $block-mover-padding-visible );
 	}
 
 	h1 {
 		outline: 1px solid transparent;
-		margin: 0;
-		padding: #{ $block-padding / 2 } #{ $block-padding - 2px };
 		font-size: $editor-font-size;
 		transition: 0.2s outline;
+		margin-top: 0;
+		margin-bottom: 0;
+		padding: $block-padding;
+
+		@include break-small() {
+			margin-left: -$block-padding;
+			margin-right: -$block-padding;
+		}
 	}
 
 	&:hover h1 {
@@ -38,7 +44,6 @@
 		}
 
 		@include break-large() {
-			max-width: $text-editor-max-width;
 			margin: 0 auto;
 			padding: 0;
 		}

diff --git a/editor/sidebar/block-inspector/style.scss b/editor/sidebar/block-inspector/style.scss
@@ -11,6 +11,8 @@
 .editor-block-inspector__no-blocks {
 	display: block;
 	font-size: $default-font-size;
-	margin: 32px 16px;
+	background: $white;
+	padding: ( $panel-padding * 2 ) $panel-padding;
+	border-bottom: 1px solid $light-gray-500;
 	text-align: center;
 }
diff --git a/editor/sidebar/style.scss b/editor/sidebar/style.scss
@@ -28,20 +28,14 @@
 		overflow: auto;
 		height: 100%;
 		padding-top: $sidebar-panel-header-height;
+		margin-top: -1px;
+		margin-bottom: -1px;
 
 		@include break-small() {
 			overflow: inherit;
 			height: auto;
 			padding-top: 0;
 		}
-
-		&:first-child {
-			margin-top: -1px;
-		}
-
-		&:last-child {
-			margin-bottom: -1px;
-		}
 	}
 
 	> .components-panel .components-panel__header {
@@ -111,6 +105,8 @@
 .components-panel__header.editor-sidebar__panel-tabs {
 	justify-content: flex-start;
 	padding-left: 0;
+	padding-right: $panel-padding / 2;
+	border-top: 0;
 
 	.components-icon-button {
 		margin-left: auto;