Post Sticky Toggle: Improve the design (#62012)

Co-authored-by: youknowriad <[email protected]> Co-authored-by: ntsekouras <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: joedolson <[email protected]> Co-authored-by: huzaifaalmesbah <[email protected]>
WordPress · May 28, 2024 · 486a381 · 486a381 · github-actions · May 28, 2024
1 parent f174441
commit 486a381
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 9 deletions.
diff --git a/packages/editor/src/components/post-sticky/index.js b/packages/editor/src/components/post-sticky/index.js
@@ -2,14 +2,15 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl } from '@wordpress/components';
+import { ToggleControl, VisuallyHidden } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import PostStickyCheck from './check';
 import { store as editorStore } from '../../store';
+import PostPanelRow from '../post-panel-row';
 
 export default function PostSticky() {
 	const postSticky = useSelect( ( select ) => {
@@ -21,12 +22,16 @@ export default function PostSticky() {
 
 	return (
 		<PostStickyCheck>
-			<CheckboxControl
-				__nextHasNoMarginBottom
-				label={ __( 'Stick to the top of the blog' ) }
-				checked={ postSticky }
-				onChange={ () => editPost( { sticky: ! postSticky } ) }
-			/>
+			<PostPanelRow label={ __( 'Sticky' ) }>
+				<ToggleControl
+					className="editor-post-sticky__toggle-control"
+					label={
+						<VisuallyHidden>{ __( 'Sticky' ) }</VisuallyHidden>
+					}
+					checked={ postSticky }
+					onChange={ () => editPost( { sticky: ! postSticky } ) }
+				/>
+			</PostPanelRow>
 		</PostStickyCheck>
 	);
 }
diff --git a/packages/editor/src/components/post-sticky/style.scss b/packages/editor/src/components/post-sticky/style.scss
@@ -0,0 +1,3 @@
+.editor-post-sticky__toggle-control {
+	padding: 6px 12px;
+}
diff --git a/packages/editor/src/components/sidebar/post-summary.js b/packages/editor/src/components/sidebar/post-summary.js
@@ -79,8 +79,8 @@ export default function PostSummary( { onActionPerformed } ) {
 										<BlogTitle />
 										<PostsPerPage />
 										<SiteDiscussion />
+										<PostStickyPanel />
 									</VStack>
-									<PostStickyPanel />
 									<PostFormatPanel />
 									<TemplateAreas />
 									{ fills }

diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
@@ -33,6 +33,7 @@
 @import "./components/post-schedule/style.scss";
 @import "./components/post-slug/style.scss";
 @import "./components/post-status/style.scss";
+@import "./components/post-sticky/style.scss";
 @import "./components/post-sync-status/style.scss";
 @import "./components/post-taxonomies/style.scss";
 @import "./components/post-template/style.scss";

diff --git a/test/e2e/specs/editor/various/sidebar.spec.js b/test/e2e/specs/editor/various/sidebar.spec.js
@@ -126,7 +126,7 @@ test.describe( 'Sidebar', () => {
 			name: 'Change discussion options',
 		} );
 		const postSummarySection = page.getByRole( 'checkbox', {
-			name: 'Stick to the top of the blog',
+			name: 'Sticky',
 		} );
 
 		await expect( postExcerptPanel ).toBeVisible();