diff --git a/packages/edit-post/src/components/sidebar/post-author/style.scss b/packages/edit-post/src/components/sidebar/post-author/style.scss index 6f8d2e323e9f4d..bfc80bdd2cf702 100644 --- 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 index 67f8f690f74037..5127fa0930f3fc 100644 --- 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 ( - + diff --git a/packages/edit-post/src/components/sidebar/post-format/style.scss b/packages/edit-post/src/components/sidebar/post-format/style.scss new file mode 100644 index 00000000000000..53d68ea219743d --- /dev/null +++ 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 index fe539a38decce6..8b52f94bd33f5d 100644 --- 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 ( - + diff --git a/packages/edit-post/src/components/sidebar/post-slug/style.scss b/packages/edit-post/src/components/sidebar/post-slug/style.scss index b031424164dcec..067dfcb08d6f06 100644 --- 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 index 7eb4e074ff48d4..7470cf76ce7ddf 100644 --- 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 } ) { - + { fills } diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index 0e42397b6f85b9..1c9e1d182eef21 100644 --- 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 index 713bc2a2ae67d4..db74a91c9d38b3 100644 --- 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 ( - - - { __( 'Post Format' ) } - - onUpdatePostFormat( format ) } - id={ postFormatSelectorId } - options={ formats.map( ( format ) => ( { - label: format.caption, - value: format.id, - } ) ) } - /> - - + onUpdatePostFormat( format ) } + id={ postFormatSelectorId } + options={ formats.map( ( format ) => ( { + label: format.caption, + value: format.id, + } ) ) } + /> { suggestion && suggestion.id !== postFormat && ( - - { __( 'Suggestion:' ) }{ ' ' } + @@ -107,11 +101,11 @@ export default function PostFormat() { > { sprintf( /* translators: %s: post format */ - __( 'Apply format: %s' ), + __( 'Apply suggested format: %s' ), suggestion.caption ) } - + ) } diff --git a/packages/editor/src/components/post-format/style.scss b/packages/editor/src/components/post-format/style.scss index c87f57cbed391a..09fb0f11b9f949 100644 --- 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 index 4c7e70af4445d5..fd897df5bbfbde 100644 --- 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 ( - { __( 'Slug' ) } - - this.setState( { editedSlug: event.target.value } ) + onChange={ ( slug ) => + this.setState( { editedSlug: slug } ) } onBlur={ this.setSlug } - className="editor-post-slug__input" + className="editor-post-slug" /> ); @@ -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 index 2a5e54b46b28f0..9cd55e550c9ab5 100644 --- 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( ); - 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', () => { ); - wrapper.find( 'input' ).simulate( 'blur', { + wrapper.find( TextControl ).prop( 'onBlur' )( { target: { value: 'single', },
@@ -107,11 +101,11 @@ export default function PostFormat() { > { sprintf( /* translators: %s: post format */ - __( 'Apply format: %s' ), + __( 'Apply suggested format: %s' ), suggestion.caption ) } -