Move Sticky toggle to status popover

packages/editor/README.md

@@ -1289,7 +1289,7 @@ _Returns_
 
 ### PostSticky
 
-Renders the PostSticky component. It provide toggle control for the sticky post feature.
+Renders the PostSticky component. It provides a checkbox control for the sticky post feature.
 
 _Returns_
 

packages/editor/src/components/post-status/index.js

@@ -10,6 +10,9 @@ import {
 	TextControl,
 	RadioControl,
 } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
 import { __, sprintf } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useState, useMemo } from '@wordpress/element';
@@ -27,6 +30,7 @@ import {
 	NAVIGATION_POST_TYPE,
 } from '../../store/constants';
 import PostPanelRow from '../post-panel-row';
+import PostSticky from '../post-sticky';
 import { PrivatePostSchedule } from '../post-schedule';
 import { store as editorStore } from '../../store';
 
@@ -281,6 +285,7 @@ export default function PostStatus() {
 											) }
 										</VStack>
 									) }
+									<PostSticky />
 								</VStack>
 							</form>
 						</>

packages/editor/src/components/post-sticky/index.js

@@ -2,18 +2,17 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { ToggleControl, VisuallyHidden } from '@wordpress/components';
+import { CheckboxControl } 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';
 
 /**
- * Renders the PostSticky component. It provide toggle control for the sticky post feature.
+ * Renders the PostSticky component. It provides a checkbox control for the sticky post feature.
  *
  * @return {Component} The component to be rendered.
  */
@@ -27,16 +26,14 @@ export default function PostSticky() {
 
 	return (
 		<PostStickyCheck>
-			<PostPanelRow label={ __( 'Sticky' ) }>
-				<ToggleControl
-					className="editor-post-sticky__toggle-control"
-					label={
-						<VisuallyHidden>{ __( 'Sticky' ) }</VisuallyHidden>
-					}
-					checked={ postSticky }
-					onChange={ () => editPost( { sticky: ! postSticky } ) }
-				/>
-			</PostPanelRow>
+			<CheckboxControl
+				className="editor-post-sticky__checkbox-control"
+				label={ __( 'Sticky' ) }
+				help={ __( 'Pin this post to the top of the blog' ) }
+				checked={ postSticky }
+				onChange={ () => editPost( { sticky: ! postSticky } ) }
+				__nextHasNoMarginBottom
+			/>
 		</PostStickyCheck>
 	);
 }

packages/editor/src/components/post-sticky/style.scss

@@ -1,3 +1,4 @@
-.editor-post-sticky__toggle-control {
-	padding: 6px 12px;
+.editor-post-sticky__checkbox-control {
+	border-top: $border-width solid $gray-200;
+	padding-top: $grid-unit-20;
 }

packages/editor/src/components/sidebar/post-summary.js

@@ -21,7 +21,6 @@ import PostLastEditedPanel from '../post-last-edited-panel';
 import PostPanelSection from '../post-panel-section';
 import PostSchedulePanel from '../post-schedule/panel';
 import PostStatusPanel from '../post-status';
-import PostStickyPanel from '../post-sticky';
 import PostSyncStatus from '../post-sync-status';
 import PostTemplatePanel from '../post-template/panel';
 import PostURLPanel from '../post-url/panel';
@@ -84,7 +83,6 @@ export default function PostSummary( { onActionPerformed } ) {
 										<PostsPerPage />
 										<SiteDiscussion />
 										<PostFormatPanel />
-										<PostStickyPanel />
 									</VStack>
 									<TemplateAreas />
 									{ fills }

test/e2e/specs/editor/various/sidebar.spec.js

@@ -125,8 +125,8 @@ test.describe( 'Sidebar', () => {
 		const postDiscussionPanel = page.getByRole( 'button', {
 			name: 'Change discussion options',
 		} );
-		const postSummarySection = page.getByRole( 'checkbox', {
-			name: 'Sticky',
+		const postSummarySection = page.getByRole( 'button', {
+			name: 'admin',
 		} );
 
 		await expect( postExcerptPanel ).toBeVisible();