build: Format with wp-prettier (#101)

* build: Replace prettier with wp-prettier

* build: Format code with wp-prettier

Adhere to Gutenberg project practices.

* fix: Escape script path backslash characters

Improve robustness of regular expression logic modifying remote script
paths.

* fix: Repair editor load notice elevation

Ensure notice sits atop editor UI.

Author: dcalhoun

Diff for: .eslintrc.cjs

@@ -1,16 +1,16 @@
 module.exports = {
 	root: true,
-	extends: ['plugin:@wordpress/eslint-plugin/recommended'],
+	extends: [ 'plugin:@wordpress/eslint-plugin/recommended' ],
 	env: {
 		browser: true,
 		es2020: true,
 	},
-	ignorePatterns: ['android', 'dist', 'ios'],
+	ignorePatterns: [ 'android', 'dist', 'ios' ],
 	parserOptions: {
 		ecmaVersion: 'latest',
 		sourceType: 'module',
 	},
-	plugins: ['react-refresh'],
+	plugins: [ 'react-refresh' ],
 	rules: {
 		'react-refresh/only-export-components': [
 			'warn',

Diff for: .prettierrc.cjs

@@ -1 +1 @@
-module.exports = require('@wordpress/prettier-config');
+module.exports = require( '@wordpress/prettier-config' );

Diff for: package-lock.json

@@ -46,7 +46,7 @@
 		"eslint-plugin-react-refresh": "^0.4.18",
 		"magic-string": "^0.30.17",
 		"patch-package": "^8.0.0",
-		"prettier": "^3.4.2",
+		"prettier": "npm:wp-prettier@^3.0.3",
 		"sass-embedded": "^1.83.4",
 		"vite": "^6.0.11"
 	},

Diff for: package.json

@@ -18,23 +18,23 @@ import './style.scss';
  * @return {JSX.Element} The rendered button element.
  */
 export default function DefaultBlockAppender() {
-	const { insertBlock } = useDispatch(blockEditorStore);
-	const { blockCount } = useSelect((select) => {
-		const { getBlockCount } = select(blockEditorStore);
+	const { insertBlock } = useDispatch( blockEditorStore );
+	const { blockCount } = useSelect( ( select ) => {
+		const { getBlockCount } = select( blockEditorStore );
 		return {
 			blockCount: getBlockCount(),
 		};
-	});
+	} );
 
 	const onAddParagraphBlock = () => {
-		const paragraphBlock = createBlock('core/paragraph');
-		insertBlock(paragraphBlock, blockCount);
+		const paragraphBlock = createBlock( 'core/paragraph' );
+		insertBlock( paragraphBlock, blockCount );
 	};
 
 	return (
 		<button
-			aria-label={__('Add paragraph block')}
-			onClick={onAddParagraphBlock}
+			aria-label={ __( 'Add paragraph block' ) }
+			onClick={ onAddParagraphBlock }
 			className="gutenberg-kit-default-block-appender"
 		></button>
 	);

Diff for: src/components/default-block-appender/index.jsx

@@ -13,13 +13,13 @@ import { useState, useEffect } from '@wordpress/element';
  *
  * @return {?JSX.Element} The rendered component or null if no notice is present.
  */
-export default function EditorLoadNotice({ className }) {
+export default function EditorLoadNotice( { className } ) {
 	const { notice, clearNotice } = useEditorLoadNotice();
 
 	const actions = [
 		{
 			label: 'Retry',
-			onClick: () => (window.location.href = 'remote.html'),
+			onClick: () => ( window.location.href = 'remote.html' ),
 			variant: 'primary',
 		},
 		{
@@ -29,14 +29,18 @@ export default function EditorLoadNotice({ className }) {
 		},
 	];
 
-	if (!notice) {
+	if ( ! notice ) {
 		return null;
 	}
 
 	return (
-		<div className={className}>
-			<Notice actions={actions} status="warning" isDismissible={false}>
-				{notice}
+		<div className={ className }>
+			<Notice
+				actions={ actions }
+				status="warning"
+				isDismissible={ false }
+			>
+				{ notice }
 			</Notice>
 		</div>
 	);
@@ -48,14 +52,14 @@ export default function EditorLoadNotice({ className }) {
  * @return {{notice:string, clearNotice:()=>void}} The notice message and a function to clear it.
  */
 function useEditorLoadNotice() {
-	const [notice, setNotice] = useState(null);
+	const [ notice, setNotice ] = useState( null );
 
-	useEffect(() => {
-		const url = new URL(window.location.href);
-		const error = url.searchParams.get('error');
+	useEffect( () => {
+		const url = new URL( window.location.href );
+		const error = url.searchParams.get( 'error' );
 
 		let message = null;
-		switch (error) {
+		switch ( error ) {
 			case REMOTE_EDITOR_LOAD_ERROR:
 				message = __(
 					"Oops! We couldn't load your site's editor and plugins. Don't worry, you can use the default editor for now."
@@ -65,19 +69,19 @@ function useEditorLoadNotice() {
 				message = null;
 		}
 
-		setNotice(message);
-	}, []);
+		setNotice( message );
+	}, [] );
 
-	useEffect(() => {
-		if (notice) {
-			const timeout = setTimeout(() => {
-				setNotice(null);
-			}, 20000);
-			return () => clearTimeout(timeout);
+	useEffect( () => {
+		if ( notice ) {
+			const timeout = setTimeout( () => {
+				setNotice( null );
+			}, 20000 );
+			return () => clearTimeout( timeout );
 		}
-	}, [notice]);
+	}, [ notice ] );
 
-	return { notice, clearNotice: () => setNotice(null) };
+	return { notice, clearNotice: () => setNotice( null ) };
 }
 
 const REMOTE_EDITOR_LOAD_ERROR = 'remote_editor_load_error';

Diff for: src/components/editor-load-notice.jsx

@@ -33,60 +33,60 @@ import './style.scss';
  * @param {string} props.className Component classes.
  * @return {JSX.Element} The rendered editor toolbar component.
  */
-const EditorToolbar = ({ className }) => {
-	const [isBlockInspectorShown, setBlockInspectorShown] = useState(false);
-	const { isSelected } = useSelect((select) => {
-		const { getSelectedBlockClientId } = select(blockEditorStore);
+const EditorToolbar = ( { className } ) => {
+	const [ isBlockInspectorShown, setBlockInspectorShown ] = useState( false );
+	const { isSelected } = useSelect( ( select ) => {
+		const { getSelectedBlockClientId } = select( blockEditorStore );
 		const selectedBlockClientId = getSelectedBlockClientId();
 		return {
 			isSelected: selectedBlockClientId !== null,
 		};
-	});
-	const { isInserterOpened } = useSelect((select) => {
+	} );
+	const { isInserterOpened } = useSelect( ( select ) => {
 		return {
-			isInserterOpened: select(editorStore).isInserterOpened(),
+			isInserterOpened: select( editorStore ).isInserterOpened(),
 		};
-	}, []);
-	const { setIsInserterOpened } = useDispatch(editorStore);
+	}, [] );
+	const { setIsInserterOpened } = useDispatch( editorStore );
 
 	function openSettings() {
-		setBlockInspectorShown(true);
+		setBlockInspectorShown( true );
 	}
 
 	function onCloseSettings() {
-		setBlockInspectorShown(false);
+		setBlockInspectorShown( false );
 	}
 
-	const classes = clsx('gutenberg-kit-editor-toolbar', className);
+	const classes = clsx( 'gutenberg-kit-editor-toolbar', className );
 
 	return (
 		<>
 			<Toolbar
-				className={classes}
+				className={ classes }
 				label="Editor toolbar"
 				variant="unstyled"
 			>
 				<ToolbarGroup>
 					<Inserter
-						open={isInserterOpened}
-						onToggle={setIsInserterOpened}
+						open={ isInserterOpened }
+						onToggle={ setIsInserterOpened }
 					/>
 				</ToolbarGroup>
 
-				{isSelected && (
+				{ isSelected && (
 					<ToolbarGroup>
 						<ToolbarButton
-							title={__('Open Settings')}
-							icon={cog}
-							onClick={openSettings}
+							title={ __( 'Open Settings' ) }
+							icon={ cog }
+							onClick={ openSettings }
 						/>
 					</ToolbarGroup>
-				)}
+				) }
 
 				<BlockToolbar hideDragHandle />
 			</Toolbar>
 
-			{isBlockInspectorShown && (
+			{ isBlockInspectorShown && (
 				<Popover
 					className="block-settings-menu"
 					variant="unstyled"
@@ -96,14 +96,14 @@ const EditorToolbar = ({ className }) => {
 						<div className="block-settings-menu__header">
 							<Button
 								className="block-settings-menu__close"
-								icon={close}
-								onClick={onCloseSettings}
+								icon={ close }
+								onClick={ onCloseSettings }
 							/>
 						</div>
 						<BlockInspector />
 					</>
 				</Popover>
-			)}
+			) }
 		</>
 	);
 };

Diff for: src/components/editor-toolbar/index.jsx

@@ -39,25 +39,25 @@ const { ExperimentalBlockEditorProvider: BlockEditorProvider } = unlock(
  *
  * @return {JSX.Element} The rendered App component.
  */
-export default function Editor({ post, children, hideTitle }) {
-	const editorRef = useRef(null);
-	useHostBridge(post, editorRef);
+export default function Editor( { post, children, hideTitle } ) {
+	const editorRef = useRef( null );
+	useHostBridge( post, editorRef );
 	useSyncHistoryControls();
 	useHostExceptionLogging();
-	useEditorSetup(post);
+	useEditorSetup( post );
 	useMediaUpload();
 
-	const [postBlocks, onInput, onChange] = useEntityBlockEditor(
+	const [ postBlocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		post.type,
 		{ id: post.id }
 	);
 
-	const settings = useGBKitSettings(post);
+	const settings = useGBKitSettings( post );
 
-	const { isReady, mode, isRichEditingEnabled } = useSelect((select) => {
+	const { isReady, mode, isRichEditingEnabled } = useSelect( ( select ) => {
 		const { __unstableIsEditorReady, getEditorSettings, getEditorMode } =
-			select(editorStore);
+			select( editorStore );
 		const editorSettings = getEditorSettings();
 
 		return {
@@ -71,35 +71,35 @@ export default function Editor({ post, children, hideTitle }) {
 			mode: getEditorMode(),
 			isRichEditingEnabled: editorSettings.richEditingEnabled,
 		};
-	}, []);
+	}, [] );
 
-	if (!isReady) {
+	if ( ! isReady ) {
 		return null;
 	}
 
 	return (
-		<div className="gutenberg-kit-editor" ref={editorRef}>
+		<div className="gutenberg-kit-editor" ref={ editorRef }>
 			<BlockEditorProvider
-				value={postBlocks}
-				onInput={onInput}
-				onChange={onChange}
-				settings={settings}
-				useSubRegistry={false}
+				value={ postBlocks }
+				onInput={ onInput }
+				onChange={ onChange }
+				settings={ settings }
+				useSubRegistry={ false }
 			>
-				{mode === 'visual' && isRichEditingEnabled && (
-					<VisualEditor hideTitle={hideTitle} />
-				)}
+				{ mode === 'visual' && isRichEditingEnabled && (
+					<VisualEditor hideTitle={ hideTitle } />
+				) }
 
-				{(mode === 'text' || !isRichEditingEnabled) && (
+				{ ( mode === 'text' || ! isRichEditingEnabled ) && (
 					<TextEditor
 						// We should auto-focus the canvas (title) on load.
 						// eslint-disable-next-line jsx-a11y/no-autofocus
-						autoFocus={true}
-						hideTitle={hideTitle}
+						autoFocus={ true }
+						hideTitle={ hideTitle }
 					/>
-				)}
+				) }
 
-				{children}
+				{ children }
 			</BlockEditorProvider>
 		</div>
 	);

Diff for: src/components/editor/index.jsx

@@ -11,13 +11,6 @@ $min-menu-item-touch-target-size: 42px;
 	box-sizing: border-box;
 }
 
-.gutenberg-kit-editor__load-notice {
-	bottom: 62px;
-	left: 16px;
-	position: fixed;
-	right: 16px;
-}
-
 .gutenberg-kit-editor .components-button {
 	font-size: $baseline-interactive-font-size;
 }