Polish font size in inserter, and latest posts

This PR does two things 1. It normalizes the font sizes to _two_ sizes instead of 3, and assigns them variables. Notably this makes the font size in the inserter larger. 2. It polishes the Latest Posts block a bit. To elaborate on #1, there's a separate PR, #1757, which bumps the font sizes. But this actually makes the sizes larger than they are in most of WordPress. As such, I think that one needs more discussion. In the mean time, this brings the variable cleanup and inserter font size improvements to master before that discussion can conclude.
WordPress · Jul 7, 2017 · e975e95 · e975e95
1 parent 6b8c93c
commit e975e95
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 13 deletions.
diff --git a/blocks/editable/style.scss b/blocks/editable/style.scss
@@ -116,7 +116,7 @@ figcaption.blocks-editable__tinymce {
 
 input.editable-format-toolbar__link-input {
 	padding: 10px;
-	font-size: 13px;
+	font-size: $default-font-size;
 	width: 100%;
 	border: none;
 	outline: none;

diff --git a/blocks/library/embed/index.js b/blocks/library/embed/index.js
@@ -19,6 +19,7 @@ import { registerBlockType, query } from '../../api';
 import Editable from '../../editable';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
+import BlockDescription from '../../block-description';
 
 const { attr, children } = query;
 

diff --git a/blocks/library/freeform/format-list.scss b/blocks/library/freeform/format-list.scss
@@ -51,7 +51,7 @@
 	z-index: z-index( '.editor-format-list__menu' );
 
 	input {
-		font-size: 13px;
+		font-size: $default-font-size;
 	}
 }
 
@@ -83,4 +83,4 @@
 		color: $white;
 		background-color: $dark-gray-500;
 	}
-}
+}
diff --git a/blocks/library/latest-posts/index.js b/blocks/library/latest-posts/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { Component } from 'element';
-import { Placeholder } from 'components';
+import { Placeholder, Spinner } from 'components';
 import { __ } from 'i18n';
 import moment from 'moment';
 
@@ -15,6 +15,7 @@ import { getLatestPosts } from './data.js';
 import InspectorControls from '../../inspector-controls';
 import TextControl from '../../inspector-controls/text-control';
 import ToggleControl from '../../inspector-controls/toggle-control';
+import BlockDescription from '../../block-description';
 
 const MIN_POSTS = 1;
 const MAX_POSTS = 100;
@@ -88,9 +89,10 @@ registerBlockType( 'core/latest-posts', {
 			if ( ! latestPosts.length ) {
 				return (
 					<Placeholder
-						icon="update"
-						label={ __( 'Loading latest posts, please wait' ) }
+						icon="admin-post"
+						label={ __( 'Latest Posts' ) }
 					>
+					<Spinner />
 					</Placeholder>
 				);
 			}
@@ -101,6 +103,10 @@ registerBlockType( 'core/latest-posts', {
 			return [
 				focus && (
 					<InspectorControls key="inspector">
+						<BlockDescription>
+							<p>{ __( 'Shows a list of your site\'s most recent posts.' ) }</p>
+						</BlockDescription>
+						<h3>{ __( 'Latest Posts Settings' ) }</h3>
 						<ToggleControl
 							label={ __( 'Display post date' ) }
 							checked={ displayPostDate }

diff --git a/components/form-token-field/style.scss b/components/form-token-field/style.scss
@@ -176,7 +176,7 @@ input[type="text"].components-form-token-field__input {
 .components-form-token-field__suggestion {
 	color: $dark-gray-500;
 	display: block;
-	font-size: 13px;
+	font-size: $default-font-size;
 	padding: 4px 8px;
 	cursor: pointer;
 

diff --git a/editor/assets/stylesheets/main.scss b/editor/assets/stylesheets/main.scss
@@ -39,7 +39,7 @@ body.gutenberg_page_gutenberg-demo {
 	}
 
 	select {
-		font-size: 13px;
+		font-size: $default-font-size;
 		color: $dark-gray-500;
 	}
 }

diff --git a/editor/block-switcher/style.scss b/editor/block-switcher/style.scss
@@ -36,7 +36,7 @@
 	padding: 3px 3px 0 3px;
 
 	input {
-		font-size: 13px;
+		font-size: $default-font-size;
 	}
 }
 

diff --git a/editor/header/mode-switcher/style.scss b/editor/header/mode-switcher/style.scss
@@ -20,7 +20,7 @@
 		cursor: pointer;
 		box-shadow: none;
 		padding-right: 0;
-		font-size: 13px;
+		font-size: $default-font-size;
 		height: auto;
 
 		@include break-small {

diff --git a/editor/inserter/style.scss b/editor/inserter/style.scss
@@ -55,7 +55,7 @@ input[type="search"].editor-inserter__search {
 	border: 1px solid transparent;
 	border-bottom: 1px solid $light-gray-500;
 	padding: 8px 11px;
-	font-size: 13px;
+	font-size: $default-font-size;
 	position: relative;
 	z-index: 1;
 
@@ -78,7 +78,7 @@ input[type="search"].editor-inserter__search {
 .editor-inserter__block {
 	display: flex;
 	width: 50%;
-	font-size: 12px;
+	font-size: $default-font-size;
 	color: $dark-gray-500;
 	margin: 0;
 	padding: 12px 6px;

diff --git a/editor/post-permalink/style.scss b/editor/post-permalink/style.scss
@@ -10,7 +10,7 @@
 	background: $white;
 	padding: 5px;
 	font-family: $default-font;
-	font-size: 13px;
+	font-size: $default-font-size;
 }
 
 .editor-post-permalink__label {
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,7 +36,7 @@ @@
     	padding: 3px 3px 0 3px;
     	input {
-    		font-size: 13px;
+    		font-size: $default-font-size;
     	}
     }
@@ Expand Down @@