Document Settings: Make Post Format, Slug and Author fields fill the …

…sidebar (#42146) * Make Post Format, Slug and Author fields fill the sidebar width * Fix post slug onChange handler * Remove unnecessary withInstanceId
WordPress · Jul 6, 2022 · b452a86 · b452a86
1 parent 0933055
commit b452a86
Show file tree

Hide file tree

Showing 11 changed files with 46 additions and 71 deletions.
diff --git a/packages/edit-post/src/components/sidebar/post-author/style.scss b/packages/edit-post/src/components/sidebar/post-author/style.scss
@@ -1,11 +1,5 @@
-.editor-post-author__select {
-	margin: -5px 0;
-
-	// Set the width of the author select box in IE11 to prevent it overflowing
-	// outside of the container because of IE11 flexbox bugs.
-	// We reset it to `width: auto;` for non-IE11 browsers.
-	width: 100%;
-	@supports (position: sticky) {
-		width: auto;
-	}
+.edit-post-post-author {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
 }
diff --git a/packages/edit-post/src/components/sidebar/post-format/index.js b/packages/edit-post/src/components/sidebar/post-format/index.js
@@ -10,7 +10,7 @@ import {
 export function PostFormat() {
 	return (
 		<PostFormatCheck>
-			<PanelRow>
+			<PanelRow className="edit-post-post-format">
 				<PostFormatForm />
 			</PanelRow>
 		</PostFormatCheck>

diff --git a/packages/edit-post/src/components/sidebar/post-format/style.scss b/packages/edit-post/src/components/sidebar/post-format/style.scss
@@ -0,0 +1,5 @@
+.edit-post-post-format {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+}
diff --git a/packages/edit-post/src/components/sidebar/post-slug/index.js b/packages/edit-post/src/components/sidebar/post-slug/index.js
@@ -7,7 +7,7 @@ import { PostSlug as PostSlugForm, PostSlugCheck } from '@wordpress/editor';
 export function PostSlug() {
 	return (
 		<PostSlugCheck>
-			<PanelRow>
+			<PanelRow className="edit-post-post-slug">
 				<PostSlugForm />
 			</PanelRow>
 		</PostSlugCheck>

diff --git a/packages/edit-post/src/components/sidebar/post-slug/style.scss b/packages/edit-post/src/components/sidebar/post-slug/style.scss
@@ -1,4 +1,5 @@
-.editor-post-slug__input {
-	margin: -5px 0;
-	padding: 2px;
+.edit-post-post-slug {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
 }
diff --git a/packages/edit-post/src/components/sidebar/post-status/index.js b/packages/edit-post/src/components/sidebar/post-status/index.js
@@ -42,9 +42,9 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 						<PostSchedule />
 						<PostURL />
 						<PostTemplate />
-						<PostFormat />
 						<PostSticky />
 						<PostPendingStatus />
+						<PostFormat />
 						<PostSlug />
 						<PostAuthor />
 						{ fills }

diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
@@ -11,6 +11,7 @@
 @import "./components/sidebar/style.scss";
 @import "./components/sidebar/last-revision/style.scss";
 @import "./components/sidebar/post-author/style.scss";
+@import "./components/sidebar/post-format/style.scss";
 @import "./components/sidebar/post-schedule/style.scss";
 @import "./components/sidebar/post-slug/style.scss";
 @import "./components/sidebar/post-status/style.scss";

diff --git a/packages/editor/src/components/post-format/index.js b/packages/editor/src/components/post-format/index.js
@@ -81,24 +81,18 @@ export default function PostFormat() {
 	return (
 		<PostFormatCheck>
 			<div className="editor-post-format">
-				<div className="editor-post-format__content">
-					<label htmlFor={ postFormatSelectorId }>
-						{ __( 'Post Format' ) }
-					</label>
-					<SelectControl
-						value={ postFormat }
-						onChange={ ( format ) => onUpdatePostFormat( format ) }
-						id={ postFormatSelectorId }
-						options={ formats.map( ( format ) => ( {
-							label: format.caption,
-							value: format.id,
-						} ) ) }
-					/>
-				</div>
-
+				<SelectControl
+					label={ __( 'Post Format' ) }
+					value={ postFormat }
+					onChange={ ( format ) => onUpdatePostFormat( format ) }
+					id={ postFormatSelectorId }
+					options={ formats.map( ( format ) => ( {
+						label: format.caption,
+						value: format.id,
+					} ) ) }
+				/>
 				{ suggestion && suggestion.id !== postFormat && (
-					<div className="editor-post-format__suggestion">
-						{ __( 'Suggestion:' ) }{ ' ' }
+					<p className="editor-post-format__suggestion">
 						<Button
 							variant="link"
 							onClick={ () =>
@@ -107,11 +101,11 @@ export default function PostFormat() {
 						>
 							{ sprintf(
 								/* translators: %s: post format */
-								__( 'Apply format: %s' ),
+								__( 'Apply suggested format: %s' ),
 								suggestion.caption
 							) }
 						</Button>
-					</div>
+					</p>
 				) }
 			</div>
 		</PostFormatCheck>

diff --git a/packages/editor/src/components/post-format/style.scss b/packages/editor/src/components/post-format/style.scss
@@ -1,18 +1,3 @@
-.editor-post-format {
-	flex-direction: column;
-	align-items: stretch;
-	width: 100%;
-}
-
-.editor-post-format__content {
-	display: inline-flex;
-	justify-content: space-between;
-	align-items: center;
-	width: 100%;
-}
-
-.editor-post-format__suggestion {
-	padding: $grid-unit-15 * 0.5;
-	text-align: right;
-	font-size: $default-font-size;
+[class].editor-post-format__suggestion {
+	margin: $grid-unit-05 0 0 0;
 }
diff --git a/packages/editor/src/components/post-slug/index.js b/packages/editor/src/components/post-slug/index.js
@@ -4,8 +4,9 @@
 import { withDispatch, withSelect } from '@wordpress/data';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { withInstanceId, compose } from '@wordpress/compose';
+import { compose } from '@wordpress/compose';
 import { safeDecodeURIComponent, cleanForSlug } from '@wordpress/url';
+import { TextControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -41,25 +42,19 @@ export class PostSlug extends Component {
 	}
 
 	render() {
-		const { instanceId } = this.props;
 		const { editedSlug } = this.state;
-
-		const inputId = 'editor-post-slug-' + instanceId;
-
 		return (
 			<PostSlugCheck>
-				<label htmlFor={ inputId }>{ __( 'Slug' ) }</label>
-				<input
+				<TextControl
+					label={ __( 'Slug' ) }
 					autoComplete="off"
 					spellCheck="false"
-					type="text"
-					id={ inputId }
 					value={ editedSlug }
-					onChange={ ( event ) =>
-						this.setState( { editedSlug: event.target.value } )
+					onChange={ ( slug ) =>
+						this.setState( { editedSlug: slug } )
 					}
 					onBlur={ this.setSlug }
-					className="editor-post-slug__input"
+					className="editor-post-slug"
 				/>
 			</PostSlugCheck>
 		);
@@ -86,5 +81,4 @@ export default compose( [
 			},
 		};
 	} ),
-	withInstanceId,
 ] )( PostSlug );
diff --git a/packages/editor/src/components/post-slug/test/index.js b/packages/editor/src/components/post-slug/test/index.js
@@ -3,6 +3,11 @@
  */
 import { shallow } from 'enzyme';
 
+/**
+ * WordPress dependencies
+ */
+import { TextControl } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
@@ -13,11 +18,7 @@ describe( 'PostSlug', () => {
 		it( 'should update internal slug', () => {
 			const wrapper = shallow( <PostSlug postSlug="index" /> );
 
-			wrapper.find( 'input' ).simulate( 'change', {
-				target: {
-					value: 'single',
-				},
-			} );
+			wrapper.find( TextControl ).prop( 'onChange' )( 'single' );
 
 			expect( wrapper.state().editedSlug ).toEqual( 'single' );
 		} );
@@ -28,7 +29,7 @@ describe( 'PostSlug', () => {
 				<PostSlug postSlug="index" onUpdateSlug={ onUpdateSlug } />
 			);
 
-			wrapper.find( 'input' ).simulate( 'blur', {
+			wrapper.find( TextControl ).prop( 'onBlur' )( {
 				target: {
 					value: 'single',
 				},