← All changes | build/pages/media-editor/page-wp-admin.php +40 -16 23.3.2 → trunk View file →

		@@ -86,11 +86,12 @@
86	86	* Automatically called during page rendering.
87	87	*/
88	88	function gutenberg_media_editor_wp_admin_preload_data() {
89	89	// Define paths to preload - same for all pages
90		- // Please also change packages/core-data/src/entities.js when changing this.
	90	+ // This must exactly match the _fields list in packages/core-data/src/entities.js,
	91	+ // same fields in the same order, or the preload is never consumed.
91	92	$preload_paths = array(
92		- '/?_fields=description,gmt_offset,home,image_sizes,image_size_threshold,name,site_icon,site_icon_url,site_logo,timezone_string,url,page_for_posts,page_on_front,show_on_front',
	93	+ '/?_fields=description,gmt_offset,home,image_max_bit_depth,image_sizes,image_size_threshold,image_strip_meta,name,site_icon,site_icon_url,site_logo,timezone_string,url,page_for_posts,page_on_front,show_on_front',
93	94	array( '/wp/v2/settings', 'OPTIONS' ),
94	95	);
95	96
96	97	// Use rest_preload_api_request to gather the preloaded data
		@@ -133,9 +134,11 @@
133	134
134	135	// Load build constants
135	136	$build_constants = require __DIR__ . '/../../constants.php';
136	137
137		- // Fire init action for extensions to register routes and menu items
	138	+ /**
	139	+ * Fires when the media-editor admin page is initialized so extensions can register routes and menu items.
	140	+ */
138	141	do_action( 'media-editor-wp-admin_init' );
139	142
140	143	// Preload REST API data
141	144	gutenberg_media_editor_wp_admin_preload_data();
		@@ -142,10 +145,14 @@
142	145
143	146	// Get all registered routes
144	147	$routes = gutenberg_get_media_editor_wp_admin_routes();
145	148
146		- // Get boot module asset file for dependencies
	149	+ // Get boot module asset file for dependencies. Plugins that build their own
	150	+ // boot module use it; everyone else falls back to the copy bundled with Core.
147	151	$asset_file = __DIR__ . '/../../modules/boot/index.min.asset.php';
	152	+ if ( ! file_exists( $asset_file ) ) {
	153	+ $asset_file = ABSPATH . WPINC . '/js/dist/script-modules/boot/index.min.asset.php';
	154	+ }
148	155	if ( file_exists( $asset_file ) ) {
149	156	$asset = require $asset_file;
150	157
151	158	// This script serves two purposes:
		@@ -152,8 +159,10 @@
152	159	// 1. It ensures all the globals that are made available to the modules are loaded.
153	160	// 2. It initializes the boot module as an inline script.
154	161	wp_register_script( 'media-editor-wp-admin-prerequisites', '', $asset['dependencies'], $asset['version'], true );
155	162
	163	+ $init_modules = ["@wordpress/edit-site-init"];
	164	+
156	165	/*
157	166	* Add inline script to initialize the app using initSinglePage (no menuItems).
158	167	* The dynamic import is deferred until DOMContentLoaded so that all classic
159	168	* script dependencies of @wordpress/boot (wp-private-apis, wp-components,
		@@ -163,12 +172,12 @@
163	172	* Chrome, evaluating before wp.theme.privateApis is defined and throwing
164	173	* "Cannot unlock an undefined object". See <https://core.trac.wordpress.org/ticket/65103>.
165	174	*/
166	175	$init_js_function = <<<'JS'
167		- ( mountId, routes ) => {
	176	+ ( mountId, routes, initModules ) => {
168	177	const run = async () => {
169	178	const mod = await import( "@wordpress/boot" );
170		- mod.initSinglePage( { mountId, routes } );
	179	+ mod.initSinglePage( { mountId, routes, initModules } );
171	180	};
172	181	if ( document.readyState === "loading" ) {
173	182	document.addEventListener( "DOMContentLoaded", run );
174	183	} else {
		@@ -178,12 +187,13 @@
178	187	JS;
179	188	wp_add_inline_script(
180	189	'media-editor-wp-admin-prerequisites',
181	190	sprintf(
182		- '( %s )( %s, %s );',
	191	+ '( %s )( %s, %s, %s );',
183	192	$init_js_function,
184	193	wp_json_encode( 'media-editor-wp-admin-app', JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ),
185		- wp_json_encode( $routes, JSON_HEX_TAG | JSON_UNESCAPED_SLASHES )
	194	+ wp_json_encode( $routes, JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ),
	195	+ wp_json_encode( $init_modules, JSON_HEX_TAG | JSON_UNESCAPED_SLASHES )
186	196	)
187	197	);
188	198
189	199	// Register prerequisites style by filtering script dependencies to find registered styles
		@@ -202,8 +212,11 @@
202	212	'id' => '@wordpress/boot',
203	213	),
204	214	);
205	215
	216	+ // Add init modules as static dependencies
	217	+ $boot_dependencies[] = array( 'import' => 'static', 'id' => '@wordpress/edit-site-init' );
	218	+
206	219	// Add all registered routes as dependencies
207	220	foreach ( $routes as $route ) {
208	221	if ( isset( $route['route_module'] ) ) {
209	222	$boot_dependencies[] = array(
		@@ -257,30 +270,28 @@
257	270	?>
258	271	<style>
259	272	/* Critical styles to prevent layout shifts - inlined for immediate application */
260	273
261		- /* Background colors */
262	274	#wpwrap {
263		- background: var(--wpds-color-fg-content-neutral, #1e1e1e);
264	275	overflow-y: auto;
265	276	}
266		- body {
	277	+ body.js {
267	278	background: #fff;
268	279	}
269	280
270	281	/* Reset wp-admin padding */
271		- #wpcontent {
	282	+ body.js #wpcontent {
272	283	padding-inline-start: 0;
273	284	}
274		- #wpbody-content {
	285	+ body.js #wpbody-content {
275	286	padding-bottom: 0;
276	287	}
277	288
278	289	/* Hide legacy admin elements */
279		- #wpbody-content > div:not(.boot-layout-container):not(#screen-meta) {
	290	+ body.js #wpbody-content > div:not(#media-editor-wp-admin-app):not(#screen-meta) {
280	291	display: none;
281	292	}
282		- #wpfooter {
	293	+ body.js #wpfooter {
283	294	display: none;
284	295	}
285	296
286	297	/* Accessibility regions */
		@@ -307,8 +318,22 @@
307	318	overflow-y: initial;
308	319	}
309	320	}
310	321	</style>
	322	+ <div class="wrap hide-if-js">
	323	+ <h1 class="wp-heading-inline"><?php echo esc_html( get_admin_page_title() ); ?></h1>
	324	+ <?php
	325	+ wp_admin_notice(
	326	+ __( 'This screen requires JavaScript. Enable JavaScript in your browser settings and reload the page.' ),
	327	+ array( 'type' => 'error' )
	328	+ );
	329	+ ?>
	330	+ </div>
	331	+ <?php
	332	+ // Core's pre-CSS Modules Boot layout uses this class for viewport sizing.
	333	+ // Remove it when the minimum supported WordPress version includes the Boot
	334	+ // changes from Gutenberg #81756.
	335	+ ?>
311	336	<div id="media-editor-wp-admin-app" class="boot-layout-container"></div>
312	337	<?php
313	338	}
314	339
		@@ -313,5 +338,4 @@
313	338	}
314	339
315	340	// Hook the enqueue function to admin_enqueue_scripts
316	341	add_action( 'admin_enqueue_scripts', 'gutenberg_media_editor_wp_admin_enqueue_scripts' );
317		-