From 486a38168d6a69babd3e86bf2892b6108042e89b Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 28 May 2024 13:44:37 +0100
Subject: [PATCH] Post Sticky Toggle: Improve the design (#62012)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: joedolson <joedolson@git.wordpress.org>
Co-authored-by: huzaifaalmesbah <huzaifaalmesbah@git.wordpress.org>
---
 .../src/components/post-sticky/index.js       | 19 ++++++++++++-------
 .../src/components/post-sticky/style.scss     |  3 +++
 .../src/components/sidebar/post-summary.js    |  2 +-
 packages/editor/src/style.scss                |  1 +
 test/e2e/specs/editor/various/sidebar.spec.js |  2 +-
 5 files changed, 18 insertions(+), 9 deletions(-)
 create mode 100644 packages/editor/src/components/post-sticky/style.scss

diff --git a/packages/editor/src/components/post-sticky/index.js b/packages/editor/src/components/post-sticky/index.js
index fe8820243962b6..f3d3085da7fd65 100644
--- a/packages/editor/src/components/post-sticky/index.js
+++ b/packages/editor/src/components/post-sticky/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl } from '@wordpress/components';
+import { ToggleControl, VisuallyHidden } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
@@ -10,6 +10,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
  */
 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
new file mode 100644
index 00000000000000..bc610c7f3ca0d9
--- /dev/null
+++ 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
index c4cb8b819177d0..ab2f714027e63f 100644
--- 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
index 59327ac4a3811b..21e1d20997fcce 100644
--- 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
index ddd4bc01a81963..d58bfb2f378aee 100644
--- 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();