Fix up pattern directory to work with current version of Gutenberg

public_html/wp-content/plugins/pattern-creator/src/components/block-editor/index.js

@@ -15,24 +15,19 @@ import {
 	privateApis as blockEditorPrivateApis,
 	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
 	__experimentalUseResizeCanvas as useResizeCanvas,
-	useSetting,
+	useSettings,
 	__unstableUseTypingObserver as useTypingObserver,
 } from '@wordpress/block-editor';
 /* eslint-enable @wordpress/no-unsafe-wp-apis */
 import { PostTitle, VisualEditorGlobalKeyboardShortcuts } from '@wordpress/editor';
 import { useMergeRefs } from '@wordpress/compose';
-import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
 
 /**
  * Internal dependencies
  */
 import { POST_TYPE, store as patternStore } from '../../store';
 import { SidebarInspectorFill } from '../sidebar';
-
-const { unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
-	'I know using unstable features means my plugin or theme will inevitably break on the next WordPress release.',
-	'@wordpress/edit-post'
-);
+import { unlock } from '../../lock-unlock';
 
 const { LayoutStyle } = unlock( blockEditorPrivateApis );
 
@@ -47,7 +42,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		},
 		[ setIsInserterOpen ]
 	);
-	const layout = useSetting( 'layout' );
+	const [ layout ] = useSettings( 'layout' );
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor( 'postType', POST_TYPE );
 	const resizedCanvasStyles = useResizeCanvas( deviceType, true );
 	const ref = useMouseMoveTypingReset();

public_html/wp-content/plugins/pattern-creator/src/components/header/index.js

@@ -7,8 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-/* eslint-disable-next-line @wordpress/no-unsafe-wp-apis -- Experimental is OK. */
-import { __experimentalPreviewOptions as PreviewOptions, ToolSelector } from '@wordpress/block-editor';
+import { ToolSelector } from '@wordpress/block-editor';
 import { Button, VisuallyHidden } from '@wordpress/components';
 import { Icon, arrowLeft, listView, plus } from '@wordpress/icons';
 import { PinnedItems } from '@wordpress/interface';
@@ -32,24 +31,19 @@ const preventDefault = ( event ) => {
 
 export default function Header() {
 	const inserterButton = useRef();
-	const { deviceType, hasReducedUI, isInserterOpen, isListViewOpen, listViewShortcut } = useSelect(
-		( select ) => {
-			const { getPreviewDeviceType, isFeatureActive, isInserterOpened, isListViewOpened } =
-				select( patternStore );
-			const { getShortcutRepresentation } = select( keyboardShortcutsStore );
+	const { hasReducedUI, isInserterOpen, isListViewOpen, listViewShortcut } = useSelect( ( select ) => {
+		const { isFeatureActive, isInserterOpened, isListViewOpened } = select( patternStore );
+		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
 
-			return {
-				deviceType: getPreviewDeviceType(),
-				hasReducedUI: isFeatureActive( 'reducedUI' ),
-				isInserterOpen: isInserterOpened(),
-				isListViewOpen: isListViewOpened(),
-				listViewShortcut: getShortcutRepresentation( 'core/edit-site/toggle-list-view' ),
-			};
-		},
-		[]
-	);
+		return {
+			hasReducedUI: isFeatureActive( 'reducedUI' ),
+			isInserterOpen: isInserterOpened(),
+			isListViewOpen: isListViewOpened(),
+			listViewShortcut: getShortcutRepresentation( 'core/edit-site/toggle-list-view' ),
+		};
+	}, [] );
 
-	const { setPreviewDeviceType, setIsInserterOpened, setIsListViewOpened } = useDispatch( patternStore );
+	const { setIsInserterOpened, setIsListViewOpened } = useDispatch( patternStore );
 
 	const isLargeViewport = useViewportMatch( 'medium' );
 
@@ -115,9 +109,6 @@ export default function Header() {
 			<div className="pattern-header_end">
 				<div className="pattern-header__actions">
 					<SaveDraftButton />
-					<PreviewOptions deviceType={ deviceType } setDeviceType={ setPreviewDeviceType }>
-						{ () => null /* Empty function required by `PreviewOptions`. */ }
-					</PreviewOptions>
 					<SaveButton />
 					<PinnedItems.Slot scope="wporg/pattern-creator" />
 					<MoreMenu />

public_html/wp-content/plugins/pattern-creator/src/index.js

@@ -2,8 +2,6 @@
  * WordPress dependencies
  */
 import { dispatch } from '@wordpress/data';
-/* eslint-disable-next-line @wordpress/no-unsafe-wp-apis -- Experimental is OK. */
-import { __experimentalFetchLinkSuggestions as fetchLinkSuggestions } from '@wordpress/core-data';
 import { registerCoreBlocks } from '@wordpress/block-library';
 import { render, unmountComponentAtNode } from '@wordpress/element';
 
@@ -42,9 +40,6 @@ export function reinitializeEditor( target, { postId, ...settings } ) {
  * @param {Object} settings Editor settings.
  */
 export function initialize( id, settings ) {
-	settings.__experimentalFetchLinkSuggestions = ( search, searchOptions ) =>
-		fetchLinkSuggestions( search, searchOptions, settings );
-
 	const target = document.getElementById( id );
 
 	registerCoreBlocks();

public_html/wp-content/plugins/pattern-creator/src/lock-unlock.js

@@ -0,0 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
+	'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
+	'@wordpress/edit-post' // Hack to enable APIs by using a core package.
+);

public_html/wp-content/plugins/pattern-directory/views/view.php

@@ -39,6 +39,8 @@
 			align-items:center;
 			min-height:100vh;
 			box-sizing: border-box;
+			padding-top: 0;
+			padding-bottom: 0;
 		}
 		.wp-site-blocks > * {
 			width: 100%;

public_html/wp-content/themes/pattern-directory/functions.php

@@ -58,7 +58,7 @@ function enqueue_assets() {
 	// See https://github.com/WordPress/gutenberg/blob/9d4b83cbbafcd6c6cbd20c86b572f458fc65ff16/lib/block-supports/layout.php#L38
 	$block_gap = wp_get_global_styles( array( 'spacing', 'blockGap' ) );
 	$layout = wp_get_global_settings( array( 'layout' ) );
-	$style = gutenberg_get_layout_style( '.entry-content', $layout, true, $block_gap );
+	$style = wp_get_layout_style( '.entry-content', $layout, true, $block_gap );
 	wp_add_inline_style( 'wporg-style', $style );
 
 	$script_asset_path = dirname( __FILE__ ) . '/build/index.asset.php';