Merge pull request #3801 from WordPress/try/edit-heading

Try editor heading
WordPress · Dec 11, 2017 · 67f6402 · 67f6402
2 parents 8210aa9 + ec88dc9
commit 67f6402
Show file tree

Hide file tree

Showing 13 changed files with 22 additions and 16 deletions.
diff --git a/blocks/library/cover-image/index.js b/blocks/library/cover-image/index.js
@@ -104,7 +104,7 @@ registerBlockType( 'core/cover-image', {
 				<BlockDescription>
 					<p>{ __( 'Cover Image is a bold image block with an optional title.' ) }</p>
 				</BlockDescription>
-				<h3>{ __( 'Cover Image Settings' ) }</h3>
+				<h2>{ __( 'Cover Image Settings' ) }</h2>
 				<ToggleControl
 					label={ __( 'Fixed Background' ) }
 					checked={ !! hasParallax }

diff --git a/blocks/library/gallery/block.js b/blocks/library/gallery/block.js
@@ -222,7 +222,7 @@ class GalleryBlock extends Component {
 			focus && (
 				<InspectorControls key="inspector">
 					{blockDescription}
-					<h3>{ __( 'Gallery Settings' ) }</h3>
+					<h2>{ __( 'Gallery Settings' ) }</h2>
 					{ images.length > 1 && <RangeControl
 						label={ __( 'Columns' ) }
 						value={ columns }

diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js
@@ -121,7 +121,7 @@ registerBlockType( 'core/heading', {
 					<BlockDescription>
 						<p>{ __( 'Search engines use the headings to index the structure and content of your web pages.' ) }</p>
 					</BlockDescription>
-					<h3>{ __( 'Heading Settings' ) }</h3>
+					<h2>{ __( 'Heading Settings' ) }</h2>
 					<p>{ __( 'Size' ) }</p>
 					<Toolbar
 						controls={

diff --git a/blocks/library/image/block.js b/blocks/library/image/block.js
@@ -206,7 +206,7 @@ class ImageBlock extends Component {
 			focus && (
 				<InspectorControls key="inspector">
 					{ blockDescription }
-					<h3>{ __( 'Image Settings' ) }</h3>
+					<h2>{ __( 'Image Settings' ) }</h2>
 					<TextControl label={ __( 'Textual Alternative' ) } value={ alt } onChange={ this.updateAlt } help={ __( 'Describe the purpose of the image. Leave empty if the image is not a key part of the content.' ) } />
 					{ ! isEmpty( availableSizes ) && (
 						<SelectControl

diff --git a/components/panel/body.js b/components/panel/body.js
@@ -45,7 +45,7 @@ class PanelBody extends Component {
 		return (
 			<div className={ classes }>
 				{ !! title && (
-					<h3 className="components-panel__body-title">
+					<h2 className="components-panel__body-title">
 						<Button
 							className="components-panel__body-toggle"
 							onClick={ this.toggle }
@@ -54,7 +54,7 @@ class PanelBody extends Component {
 							<Dashicon icon={ icon } />
 							{ title }
 						</Button>
-					</h3>
+					</h2>
 				) }
 				{ isOpened && children }
 			</div>

diff --git a/components/panel/style.scss b/components/panel/style.scss
@@ -58,6 +58,7 @@
 	display: block;
 	padding: 0;
 	font-size: inherit;
+	margin-top: 0;
 	margin-bottom: 0;
 }
 .components-panel__body.is-opened > .components-panel__body-title {

diff --git a/editor/components/post-taxonomies/flat-term-selector.js b/editor/components/post-taxonomies/flat-term-selector.js
@@ -156,7 +156,7 @@ class FlatTermSelector extends Component {
 
 		return (
 			<div className="editor-post-taxonomies__flat-terms-selector">
-				<h4 className="editor-post-taxonomies__flat-terms-selector-title">{ label }</h4>
+				<h3 className="editor-post-taxonomies__flat-terms-selector-title">{ label }</h3>
 				<FormTokenField
 					value={ selectedTerms }
 					displayTransform={ unescapeString }
@@ -191,4 +191,3 @@ export default connect(
 		};
 	}
 )( FlatTermSelector );
-
diff --git a/editor/components/post-taxonomies/hierarchical-term-selector.js b/editor/components/post-taxonomies/hierarchical-term-selector.js
@@ -215,7 +215,7 @@ class HierarchicalTermSelector extends Component {
 		/* eslint-disable jsx-a11y/no-onchange */
 		return (
 			<div className="editor-post-taxonomies__hierarchical-terms-selector">
-				<h4 className="editor-post-taxonomies__hierarchical-terms-selector-title">{ label }</h4>
+				<h3 className="editor-post-taxonomies__hierarchical-terms-selector-title">{ label }</h3>
 				{ this.renderTerms( availableTermsTree ) }
 				{ ! loading &&
 					<button

diff --git a/editor/components/post-taxonomies/style.scss b/editor/components/post-taxonomies/style.scss
@@ -3,8 +3,8 @@
 	margin-top: $panel-padding;
 }
 
-.editor-post-taxonomies__flat-terms-selector-title,
-.editor-post-taxonomies__hierarchical-terms-selector-title {
+.editor-sidebar .editor-post-taxonomies__flat-terms-selector-title,
+.editor-sidebar .editor-post-taxonomies__hierarchical-terms-selector-title {
 	display: block;
 	margin-bottom: 10px;
 }

diff --git a/editor/components/post-title/index.js b/editor/components/post-title/index.js
@@ -110,7 +110,7 @@ class PostTitle extends Component {
 				tabIndex={ -1 /* Necessary for Firefox to include relatedTarget in blur event */ }
 			>
 				{ isSelected && <PostPermalink /> }
-				<h1>
+				<div>
 					<Textarea
 						ref={ this.bindTextarea }
 						className="editor-post-title__input"
@@ -121,7 +121,7 @@ class PostTitle extends Component {
 						onKeyDown={ this.onKeyDown }
 						onKeyPress={ this.onUnselect }
 					/>
-				</h1>
+				</div>
 			</div>
 		);
 	}

diff --git a/editor/components/post-title/style.scss b/editor/components/post-title/style.scss
@@ -2,7 +2,7 @@
 	position: relative;
 	padding: 5px 0;
 
-	h1 {
+	div {
 		border: 1px solid transparent;
 		font-size: $editor-font-size;
 		transition: 0.2s outline;
@@ -11,12 +11,12 @@
 		padding: $block-padding;
 	}
 
-	&:hover h1 {
+	&:hover div {
 		border: 1px solid $light-gray-500;
 		transition: 0.2s outline;
 	}
 
-	&.is-selected h1 {
+	&.is-selected div {
 		border: 1px solid $light-gray-500;
 		transition: 0.2s outline;
 	}
@@ -34,13 +34,17 @@ textarea.editor-post-title__input {
 	padding: 5px 0;
 	margin: 0;
 
+	// inherited from h1
+	font-weight: 600;
+
 	&:focus {
 		outline: none;
 		box-shadow: none;
 	}
 }
 
 .editor-post-title .editor-post-permalink {
+	font-size: $default-font-size;
 	position: absolute;
 	top: -34px;
 	left: 0;

diff --git a/editor/edit-post/sidebar/style.scss b/editor/edit-post/sidebar/style.scss
@@ -60,6 +60,7 @@
 		margin-top: 0;
 	}
 
+	h2,
 	h3 {
 		font-size: $default-font-size;
 		color: $dark-gray-500;

diff --git a/gutenberg.php b/gutenberg.php
@@ -30,6 +30,7 @@ function the_gutenberg_project() {
 	?>
 	<div class="nvda-temp-fix screen-reader-text">&nbsp;</div>
 	<div class="gutenberg">
+		<h1 class="screen-reader-text">Edit Post</h1>
 		<div id="editor" class="gutenberg__editor"></div>
 		<div id="metaboxes" style="display: none;">
 			<?php the_gutenberg_metaboxes(); ?>
-Original file line number
+Diff line change
@@ Expand Up / @@ -60,6 +60,7 @@ @@
     		margin-top: 0;
     	}
+    	h2,
     	h3 {
     		font-size: $default-font-size;
     		color: $dark-gray-500;
@@ Expand Down @@