Post Sticky Toggle: Improve the design

bin/packages/esbuild-json-plugin.js

@@ -0,0 +1,38 @@
+module.exports = {
+	name: 'json',
+	setup( build ) {
+		// Intercept import paths starting with "http:" and "https:" so
+		// esbuild doesn't attempt to map them to a file system location.
+		// Tag them with the "http-url" namespace to associate them with
+		// this plugin.
+		build.onResolve( { filter: /.*\.json/ }, ( args ) => ( {
+			path: args.path,
+			namespace: 'bundle-json',
+		} ) );
+
+		// We also want to intercept all import paths inside downloaded
+		// files and resolve them against the original URL. All of these
+		// files will be in the "http-url" namespace. Make sure to keep
+		// the newly resolved URL in the "http-url" namespace so imports
+		// inside it will also be resolved as URLs recursively.
+		build.onResolve(
+			{ filter: /.*/, namespace: 'bundle-json' },
+			( args ) => ( {
+				path: new URL( args.path, args.importer ).toString(),
+				namespace: 'bundle-json',
+			} )
+		);
+
+		// When a URL is loaded, we want to actually download the content
+		// from the internet. This has just enough logic to be able to
+		// handle the example import from unpkg.com but in reality this
+		// would probably need to be more complex.
+		build.onLoad(
+			{ filter: /.*/, namespace: 'bundle-json' },
+			async ( args ) => {
+				const contents = require( args.path );
+				return { contents };
+			}
+		);
+	},
+};

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,18 @@ 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>
+							{ __( 'Stick to the top of the blog' ) }
+						</VisuallyHidden>
+					}
+					checked={ postSticky }
+					onChange={ () => editPost( { sticky: ! postSticky } ) }
+				/>
+			</PostPanelRow>
 		</PostStickyCheck>
 	);
 }

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

@@ -0,0 +1,3 @@
+.editor-post-sticky__toggle-control {
+	padding: 6px 12px;
+}

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 }

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";