@wordpress/lazy-editor 1.1.0

package/src/hooks/use-editor-assets.tsx

@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import loadAssets from '@wordpress/asset-loader';
+import { store as coreDataStore } from '@wordpress/core-data';
+import { useState, useEffect } from '@wordpress/element';
+import { resolveSelect, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+let loadAssetsPromise: Promise< void >;
+
+export async function loadEditorAssets() {
+	const load = async () => {
+		const editorAssets = await unlock(
+			resolveSelect( coreDataStore )
+		).getEditorAssets();
+		await loadAssets(
+			editorAssets.scripts || {},
+			editorAssets.inline_scripts || { before: {}, after: {} },
+			editorAssets.styles || {},
+			editorAssets.inline_styles || { before: {}, after: {} }
+		);
+	};
+
+	if ( ! loadAssetsPromise ) {
+		loadAssetsPromise = load();
+	}
+
+	return loadAssetsPromise;
+}
+
+/**
+ * This is a React hook that handles loading editor assets from the REST API.
+ *
+ * @return Editor assets loading state.
+ */
+export function useEditorAssets() {
+	const editorAssets = useSelect( ( select ) => {
+		return unlock( select( coreDataStore ) ).getEditorAssets();
+	}, [] );
+
+	const [ assetsLoaded, setAssetsLoaded ] = useState( false );
+
+	useEffect( () => {
+		if ( editorAssets && ! assetsLoaded ) {
+			loadEditorAssets()
+				.then( () => {
+					setAssetsLoaded( true );
+				} )
+				.catch( ( error: Error ) => {
+					// eslint-disable-next-line no-console
+					console.error( 'Failed to load editor assets:', error );
+				} );
+		}
+	}, [ editorAssets, assetsLoaded ] );
+
+	return {
+		isReady: !! editorAssets && assetsLoaded,
+		assetsLoaded,
+	};
+}

package/src/hooks/use-editor-settings.tsx

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { generateGlobalStyles } from '@wordpress/global-styles-engine';
+import { store as coreDataStore } from '@wordpress/core-data';
+import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { useUserGlobalStyles } from './use-global-styles';
+import { unlock } from '../lock-unlock';
+
+/**
+ * This is a React hook that provides the editor settings from the REST API.
+ *
+ * @param {Object} props            - The props object.
+ * @param {string} [props.stylesId] - The ID of the user's global styles to use.
+ * @return Editor settings.
+ */
+export function useEditorSettings( { stylesId }: { stylesId: string } ) {
+	const { editorSettings } = useSelect(
+		( select ) => ( {
+			editorSettings: unlock(
+				select( coreDataStore )
+			).getEditorSettings(),
+		} ),
+		[]
+	);
+
+	const { user: globalStyles } = useUserGlobalStyles( stylesId );
+	const [ globalStylesCSS ] = generateGlobalStyles( globalStyles );
+
+	const hasEditorSettings = !! editorSettings;
+	const styles = useMemo( () => {
+		if ( ! hasEditorSettings ) {
+			return [];
+		}
+		return [
+			...( ( editorSettings?.styles as Array< any > ) ?? [] ),
+			...globalStylesCSS,
+		];
+	}, [ hasEditorSettings, editorSettings?.styles, globalStylesCSS ] );
+
+	return {
+		isReady: hasEditorSettings,
+		editorSettings: useMemo(
+			() => ( {
+				...( editorSettings ?? {} ),
+				styles,
+			} ),
+			[ editorSettings, styles ]
+		),
+	};
+}

package/src/hooks/use-global-styles.tsx

@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import type { GlobalStylesConfig } from '@wordpress/global-styles-engine';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+
+export function useUserGlobalStyles( id: string ) {
+	const { userGlobalStyles } = useSelect(
+		( select ) => {
+			const { getEntityRecord, getEditedEntityRecord, canUser } =
+				select( coreStore );
+
+			/*
+			 * Ensure that the global styles ID request is complete by testing `_globalStylesId`,
+			 * before firing off the `canUser` OPTIONS request for user capabilities, otherwise it will
+			 * fetch `/wp/v2/global-styles` instead of `/wp/v2/global-styles/{id}`.
+			 * NOTE: Please keep in sync any preload paths sent to `block_editor_rest_api_preload()`,
+			 * or set using the `block_editor_rest_api_preload_paths` filter, if this changes.
+			 */
+			const userCanEditGlobalStyles = canUser( 'update', {
+				kind: 'root',
+				name: 'globalStyles',
+				id,
+			} );
+
+			let record;
+			if (
+				/*
+				 * Test that the OPTIONS request for user capabilities is complete
+				 * before fetching the global styles entity record.
+				 * This is to avoid fetching the global styles entity unnecessarily.
+				 */
+				typeof userCanEditGlobalStyles === 'boolean'
+			) {
+				/*
+				 * Fetch the global styles entity record based on the user's capabilities.
+				 * The default context is `edit` for users who can edit global styles.
+				 * Otherwise, the context is `view`.
+				 */
+				if ( userCanEditGlobalStyles ) {
+					record = getEditedEntityRecord(
+						'root',
+						'globalStyles',
+						id
+					);
+				} else {
+					record = getEntityRecord( 'root', 'globalStyles', id, {
+						context: 'view',
+					} );
+				}
+			}
+
+			return {
+				userGlobalStyles: record,
+			};
+		},
+		[ id ]
+	);
+
+	return useMemo( () => {
+		if ( ! userGlobalStyles ) {
+			return {
+				user: undefined,
+			};
+		}
+
+		const user = userGlobalStyles as GlobalStylesConfig;
+
+		return {
+			user,
+		};
+	}, [ userGlobalStyles ] );
+}

package/src/hooks/use-styles-id.tsx

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+
+// Define interface for template with optional styles_id
+interface Template {
+	styles_id?: string;
+	[ key: string ]: any;
+}
+
+/**
+ * This is a React hook that provides the styles ID.
+ * Styles ID can be associated with a template.
+ * If a template has a styles ID, it will be used otherwise the global styles ID will be used.
+ *
+ * @param {Object} props              - The props object.
+ * @param {string} [props.templateId] - The ID of the template to use.
+ * @return The styles ID.
+ */
+export function useStylesId( { templateId }: { templateId?: string } ) {
+	const { globalStylesId, stylesId } = useSelect(
+		( select ) => {
+			const coreDataSelect = select( coreStore );
+			const template = templateId
+				? ( coreDataSelect.getEntityRecord(
+						'postType',
+						'wp_template',
+						templateId
+				  ) as Template | null )
+				: null;
+
+			return {
+				globalStylesId:
+					coreDataSelect.__experimentalGetCurrentGlobalStylesId(),
+				stylesId: template?.styles_id,
+			};
+		},
+		[ templateId ]
+	);
+
+	// Otherwise, fall back to the global styles ID
+	return stylesId || globalStylesId;
+}

package/src/index.tsx

@@ -0,0 +1,4 @@
+/**
+ * Internal dependencies
+ */
+export { Editor } from './component';

package/src/lock-unlock.ts

@@ -0,0 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
+	'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+	'@wordpress/lazy-editor'
+);

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+	"$schema": "https://json.schemastore.org/tsconfig.json",
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"checkJs": false
+	},
+	"references": [
+		{ "path": "../asset-loader" },
+		{ "path": "../block-editor" },
+		{ "path": "../components" },
+		{ "path": "../core-data" },
+		{ "path": "../data" },
+		{ "path": "../element" },
+		{ "path": "../editor" },
+		{ "path": "../global-styles-engine" },
+		{ "path": "../private-apis" }
+	]
+}