Add polish (#6138)

* Polish link dialog. This uses variables for colors and shadows, and also fixes a regression with the link dialog when linking an image. However there's still a bug here, where as soon as you start typing in the image link dialog, the entire thing disappears and you can't type. This is possibly due to isEditing mode being invoked there. Can you take a look, @noisysocks @karmatosed? * Unify markup between More block and Pagination block This adds a white background, and some things, to the Pagination block. This will only be visible if a user loads a stylesheet into the editor. Fixes #1467 (comment), cc @swissspidy. * Unify button sizes, and slim down "Media Library". This makes the placeholders fit better in small breakpoints. * Change left arrow on breadcrumbs. This makes the left arrow consistent with the one used when creating links on images.
WordPress · Apr 12, 2018 · a481c2c · a481c2c
1 parent 6187723
commit a481c2c
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 42 deletions.
diff --git a/blocks/image-placeholder/index.js b/blocks/image-placeholder/index.js
@@ -60,7 +60,7 @@ export default function ImagePlaceholder( { className, icon, label, onSelectImag
 				type="image"
 				render={ ( { open } ) => (
 					<Button isLarge onClick={ open }>
-						{ __( 'Add from Media Library' ) }
+						{ __( 'Media Library' ) }
 					</Button>
 				) }
 			/>

diff --git a/blocks/library/audio/index.js b/blocks/library/audio/index.js
@@ -129,7 +129,7 @@ export const settings = {
 							value={ id }
 							render={ ( { open } ) => (
 								<Button isLarge onClick={ open }>
-									{ __( 'Add from Media Library' ) }
+									{ __( 'Media Library' ) }
 								</Button>
 							) }
 						/>

diff --git a/blocks/library/image/editor.scss b/blocks/library/image/editor.scss
@@ -59,6 +59,9 @@
 	.blocks-format-toolbar__link-modal {
 		top: 0;
 		left: 0;
+		position: absolute;
+		border: none;
+		width: 100%;
 	}
 }
 

diff --git a/blocks/library/more/editor.scss b/blocks/library/more/editor.scss
@@ -3,32 +3,40 @@
 	text-align: center;
 }
 
-.gutenberg .wp-block-more {
+.gutenberg .wp-block-more { // needs specificity
+	display: block;
+	text-align: center;
+	white-space: nowrap;
+
+	// Label
 	input {
 		font-size: 12px;
 		text-transform: uppercase;
 		font-weight: 600;
 		font-family: $default-font;
 		color: $dark-gray-300;
-		padding-left: 8px;
-		padding-right: 8px;
-		background: $white;
 		border: none;
 		box-shadow: none;
 		white-space: nowrap;
 		text-align: center;
+		margin: 0;
+		border-radius: 4px;
+		background: $white;
+		padding: 6px 8px;
+		height: $icon-button-size-small;
 
 		&:focus {
 			box-shadow: none;
 		}
 	}
 
+	// Dashed line
 	&:before {
 		content: '';
 		position: absolute;
 		top: calc( 50% );
-		left: $block-side-ui-padding + $block-padding;
-		right: $block-side-ui-padding + $block-padding;
+		left: 0;
+		right: 0;
 		border-top: 3px dashed $light-gray-700;
 		z-index: z-index( '.editor-block-list__block .wp-block-more:before' );
 	}

diff --git a/blocks/library/nextpage/editor.scss b/blocks/library/nextpage/editor.scss
@@ -5,36 +5,31 @@
 .wp-block-nextpage {
 	display: block;
 	text-align: center;
-	overflow: hidden;
 	white-space: nowrap;
-}
-
-.wp-block-nextpage > span {
-	position: relative;
-	display: inline-block;
-	font-size: 12px;
-	text-transform: uppercase;
-	font-weight: 600;
-	font-family: $default-font;
-	color: $dark-gray-300;
-}
 
-.wp-block-nextpage > span:before,
-.wp-block-nextpage > span:after {
-	content: '';
-	position: absolute;
-	top: 50%;
-	width: 100vw;
-	border-top: 3px dashed $light-gray-700;
-	margin-top: -2px;
-}
-
-.wp-block-nextpage > span:before {
-	right: 100%;
-	margin-right: 20px;
-}
+	// Label
+	> span {
+		position: relative;
+		display: inline-block;
+		font-size: 12px;
+		text-transform: uppercase;
+		font-weight: 600;
+		font-family: $default-font;
+		color: $dark-gray-300;
+		border-radius: 4px;
+		background: $white;
+		padding: 6px 8px;
+		height: $icon-button-size-small;
+	}
 
-.wp-block-nextpage > span:after {
-	left: 100%;
-	margin-left: 20px;
+	// Dashed line
+	&:before {
+		content: '';
+		position: absolute;
+		top: calc( 50% );
+		left: 0;
+		right: 0;
+		border-top: 3px dashed $light-gray-700;
+		z-index: z-index( '.editor-block-list__block .wp-block-more:before' );
+	}
 }
diff --git a/blocks/library/video/index.js b/blocks/library/video/index.js
@@ -157,7 +157,7 @@ export const settings = {
 							id={ id }
 							render={ ( { open } ) => (
 								<Button isLarge onClick={ open } >
-									{ __( 'Add from Media Library' ) }
+									{ __( 'Media Library' ) }
 								</Button>
 							) }
 						/>

diff --git a/blocks/rich-text/format-toolbar/style.scss b/blocks/rich-text/format-toolbar/style.scss
@@ -5,9 +5,9 @@
 .blocks-format-toolbar__link-modal {
 	position: relative;
 	left: -50%;
-	box-shadow: 0 3px 20px rgba( 18, 24, 30, .1 ), 0 1px 3px rgba( 18, 24, 30, .1 );
-	border: 1px solid #e0e5e9;
-	background: #fff;
+	box-shadow: $shadow-popover;
+	border: 1px solid $light-gray-500;
+	background: $white;
 	display: flex;
 	flex-direction: column;
 	font-family: $default-font;
@@ -39,6 +39,7 @@
 
 		input {
 			padding: $input-padding;
+			margin: 0;
 		}
 	}
 

diff --git a/components/button/style.scss b/components/button/style.scss
@@ -37,6 +37,10 @@
 		background-image: linear-gradient( -45deg, $blue-medium-500 28%, $blue-dark-900 28%, $blue-dark-900 72%, $blue-medium-500 72%) !important;
 		border-color: $blue-dark-900 !important;
 	}
+
+	.wp-core-ui.gutenberg-editor-page & {
+		font-size: $default-font-size;
+	}
 }
 
 @keyframes components-button__busy-animation {

diff --git a/editor/components/block-list/breadcrumb.js b/editor/components/block-list/breadcrumb.js
@@ -69,7 +69,7 @@ export class BlockBreadcrumb extends Component {
 								onFocus={ this.onFocus }
 								onBlur={ this.onBlur }
 							>
-								<Dashicon icon="arrow-left" uid={ uid } />
+								<Dashicon icon="arrow-left-alt" uid={ uid } />
 							</Button>
 						</Tooltip>
 					) }