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 (
- editPost( { sticky: ! postSticky } ) }
- />
+
+ { __( 'Sticky' ) }
+ }
+ checked={ postSticky }
+ onChange={ () => editPost( { sticky: ! postSticky } ) }
+ />
+
);
}
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 } ) {
+
-
{ 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();