gutenberg / lib / client-assets.php

client-assets.php in Gutenberg 5.9.0, at lib/client-assets.php

654 lines 21.4 KB

Raw Download Zip

1	<?php
2	/**
3	* Functions to register client-side assets (scripts and stylesheets) for the
4	* Gutenberg editor plugin.
5	*
6	* @package gutenberg
7	*/
8
9	if ( ! defined( 'ABSPATH' ) ) {
10	die( 'Silence is golden.' );
11	}
12
13	/**
14	* Retrieves the root plugin path.
15	*
16	* @return string Root path to the gutenberg plugin.
17	*
18	* @since 0.1.0
19	*/
20	function gutenberg_dir_path() {
21	return plugin_dir_path( dirname( __FILE__ ) );
22	}
23
24	/**
25	* Retrieves a URL to a file in the gutenberg plugin.
26	*
27	* @param string $path Relative path of the desired file.
28	*
29	* @return string Fully qualified URL pointing to the desired file.
30	*
31	* @since 0.1.0
32	*/
33	function gutenberg_url( $path ) {
34	return plugins_url( $path, dirname( __FILE__ ) );
35	}
36
37	/**
38	* Registers a script according to `wp_register_script`. Honors this request by
39	* reassigning internal dependency properties of any script handle already
40	* registered by that name. It does not deregister the original script, to
41	* avoid losing inline scripts which may have been attached.
42	*
43	* @since 4.1.0
44	*
45	* @param string $handle Name of the script. Should be unique.
46	* @param string $src Full URL of the script, or path of the script relative to the WordPress root directory.
47	* @param array $deps Optional. An array of registered script handles this script depends on. Default empty array.
48	* @param string\|bool\|null $ver Optional. String specifying script version number, if it has one, which is added to the URL
49	* as a query string for cache busting purposes. If version is set to false, a version
50	* number is automatically added equal to current installed WordPress version.
51	* If set to null, no version is added.
52	* @param bool $in_footer Optional. Whether to enqueue the script before </body> instead of in the <head>.
53	* Default 'false'.
54	*/
55	function gutenberg_override_script( $handle, $src, $deps = array(), $ver = false, $in_footer = false ) {
56	global $wp_scripts;
57
58	$script = $wp_scripts->query( $handle, 'registered' );
59	if ( $script ) {
60	/*
61	* In many ways, this is a reimplementation of `wp_register_script` but
62	* bypassing consideration of whether a script by the given handle had
63	* already been registered.
64	*/
65
66	// See: `_WP_Dependency::__construct` .
67	$script->src = $src;
68	$script->deps = $deps;
69	$script->ver = $ver;
70
71	/*
72	* The script's `group` designation is an indication of whether it is
73	* to be printed in the header or footer. The behavior here defers to
74	* the arguments as passed. Specifically, group data is not assigned
75	* for a script unless it is designated to be printed in the footer.
76	*/
77
78	// See: `wp_register_script` .
79	unset( $script->extra['group'] );
80	if ( $in_footer ) {
81	$script->add_data( 'group', 1 );
82	}
83	} else {
84	wp_register_script( $handle, $src, $deps, $ver, $in_footer );
85	}
86
87	/*
88	* `WP_Dependencies::set_translations` will fall over on itself if setting
89	* translations on the `wp-i18n` handle, since it internally adds `wp-i18n`
90	* as a dependency of itself, exhausting memory. The same applies for the
91	* polyfill script, which is a dependency _of_ `wp-i18n`.
92	*
93	* See: https://core.trac.wordpress.org/ticket/46089
94	*/
95	if ( 'wp-i18n' !== $handle && 'wp-polyfill' !== $handle ) {
96	wp_set_script_translations( $handle, 'default' );
97	}
98	}
99
100	/**
101	* Filters the default translation file load behavior to load the Gutenberg
102	* plugin translation file, if available.
103	*
104	* @param string\|false $file Path to the translation file to load. False if
105	* there isn't one.
106	* @param string $handle Name of the script to register a translation
107	* domain to.
108	*
109	* @return string\|false Filtered path to the Gutenberg translation file, if
110	* available.
111	*/
112	function gutenberg_override_translation_file( $file, $handle ) {
113	if ( ! $file ) {
114	return $file;
115	}
116
117	// Ignore scripts whose handle does not have the "wp-" prefix.
118	if ( 'wp-' !== substr( $handle, 0, 3 ) ) {
119	return $file;
120	}
121
122	// Ignore scripts that are not found in the expected `build/` location.
123	$script_path = gutenberg_dir_path() . 'build/' . substr( $handle, 3 ) . '/index.js';
124	if ( ! file_exists( $script_path ) ) {
125	return $file;
126	}
127
128	/*
129	* The default file will be in the plugins language directory, omitting the
130	* domain since Gutenberg assigns the script translations as the default.
131	*
132	* Example: /www/wp-content/languages/plugins/de_DE-07d88e6a803e01276b9bfcc1203e862e.json
133	*
134	* The logic of `load_script_textdomain` is such that it will assume to
135	* search in the plugins language directory, since the assigned source of
136	* the overridden Gutenberg script originates in the plugins directory.
137	*
138	* The plugin translation files each begin with the slug of the plugin, so
139	* it's a simple matter of prepending the Gutenberg plugin slug.
140	*/
141	$path_parts = pathinfo( $file );
142	$plugin_translation_file = (
143	$path_parts['dirname'] .
144	'/gutenberg-' .
145	$path_parts['basename']
146	);
147
148	if ( ! is_readable( $plugin_translation_file ) ) {
149	return $file;
150	}
151
152	return $plugin_translation_file;
153	}
154	add_filter( 'load_script_translation_file', 'gutenberg_override_translation_file', 10, 2 );
155
156	/**
157	* Registers a style according to `wp_register_style`. Honors this request by
158	* deregistering any style by the same handler before registration.
159	*
160	* @since 4.1.0
161	*
162	* @param string $handle Name of the stylesheet. Should be unique.
163	* @param string $src Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory.
164	* @param array $deps Optional. An array of registered stylesheet handles this stylesheet depends on. Default empty array.
165	* @param string\|bool\|null $ver Optional. String specifying stylesheet version number, if it has one, which is added to the URL
166	* as a query string for cache busting purposes. If version is set to false, a version
167	* number is automatically added equal to current installed WordPress version.
168	* If set to null, no version is added.
169	* @param string $media Optional. The media for which this stylesheet has been defined.
170	* Default 'all'. Accepts media types like 'all', 'print' and 'screen', or media queries like
171	* '(orientation: portrait)' and '(max-width: 640px)'.
172	*/
173	function gutenberg_override_style( $handle, $src, $deps = array(), $ver = false, $media = 'all' ) {
174	wp_deregister_style( $handle );
175	wp_register_style( $handle, $src, $deps, $ver, $media );
176	}
177
178	/**
179	* Registers all the WordPress packages scripts that are in the standardized
180	* `build/` location.
181	*
182	* @since 4.5.0
183	*/
184	function gutenberg_register_packages_scripts() {
185	foreach ( glob( gutenberg_dir_path() . 'build/*/index.js' ) as $path ) {
186	// Prefix `wp-` to package directory to get script handle.
187	// For example, `…/build/a11y/index.js` becomes `wp-a11y`.
188	$handle = 'wp-' . basename( dirname( $path ) );
189
190	// Replace `.js` extension with `.deps.json` to find the generated dependencies file.
191	$dependencies_file = substr( $path, 0, -3 ) . '.deps.json';
192
193	$dependencies = is_readable( $dependencies_file )
194	? json_decode( file_get_contents( $dependencies_file ) )
195	: array();
196
197	// Add dependencies that cannot be detected and generated by build tools.
198	switch ( $handle ) {
199	case 'wp-block-library':
200	array_push( $dependencies, 'editor' );
201	break;
202
203	case 'wp-edit-post':
204	array_push( $dependencies, 'media-models', 'media-views', 'postbox' );
205	break;
206	}
207
208	// Get the path from Gutenberg directory as expected by `gutenberg_url`.
209	$gutenberg_path = substr( $path, strlen( gutenberg_dir_path() ) );
210
211	gutenberg_override_script(
212	$handle,
213	gutenberg_url( $gutenberg_path ),
214	$dependencies,
215	filemtime( $path ),
216	true
217	);
218	}
219	}
220
221	/**
222	* Registers common scripts and styles to be used as dependencies of the editor
223	* and plugins.
224	*
225	* @since 0.1.0
226	*/
227	function gutenberg_register_scripts_and_styles() {
228	global $wp_scripts;
229
230	gutenberg_register_vendor_scripts();
231	gutenberg_register_packages_scripts();
232
233	// Add nonce middleware which accounts for the absence of the heartbeat
234	// listener. This relies on API Fetch implementation running middlewares in
235	// order of last added, and that the original nonce middleware would defer
236	// to an X-WP-Nonce header already being present. This inline script should
237	// be removed once the following Core ticket is resolved in assigning the
238	// nonce received from heartbeat to the created middleware.
239	//
240	// See: https://core.trac.wordpress.org/ticket/46107 .
241	// See: https://github.com/WordPress/gutenberg/pull/13451 .
242	global $wp_scripts;
243	if ( isset( $wp_scripts->registered['wp-api-fetch'] ) ) {
244	$wp_scripts->registered['wp-api-fetch']->deps[] = 'wp-hooks';
245	}
246	wp_add_inline_script(
247	'wp-api-fetch',
248	sprintf(
249	implode(
250	"\n",
251	array(
252	'( function() {',
253	' var nonceMiddleware = wp.apiFetch.createNonceMiddleware( "%s" );',
254	' wp.apiFetch.use( nonceMiddleware );',
255	' wp.hooks.addAction(',
256	' "heartbeat.tick",',
257	' "core/api-fetch/create-nonce-middleware",',
258	' function( response ) {',
259	' if ( response[ "rest_nonce" ] ) {',
260	' nonceMiddleware.nonce = response[ "rest_nonce" ];',
261	' }',
262	' }',
263	' )',
264	'} )();',
265	)
266	),
267	( wp_installing() && ! is_multisite() ) ? '' : wp_create_nonce( 'wp_rest' )
268	),
269	'after'
270	);
271
272	// TEMPORARY: Core does not (yet) provide persistence migration from the
273	// introduction of the block editor and still calls the data plugins.
274	// We unset the existing inline scripts first.
275	$wp_scripts->registered['wp-data']->extra['after'] = array();
276	wp_add_inline_script(
277	'wp-data',
278	implode(
279	"\n",
280	array(
281	'( function() {',
282	' var userId = ' . get_current_user_ID() . ';',
283	' var storageKey = "WP_DATA_USER_" + userId;',
284	' wp.data',
285	' .use( wp.data.plugins.persistence, { storageKey: storageKey } );',
286	' wp.data.plugins.persistence.__unstableMigrate( { storageKey: storageKey } );',
287	'} )();',
288	)
289	)
290	);
291
292	// Add back compatibility for calls to wp.components.ServerSideRender.
293	wp_add_inline_script(
294	'wp-server-side-render',
295	implode(
296	"\n",
297	array(
298	'( function() {',
299	' if ( wp && wp.components && wp.serverSideRender && ! wp.components.ServerSideRender ) {',
300	' wp.components.ServerSideRender = wp.serverSideRender;',
301	' };',
302	'} )();',
303	)
304	)
305	);
306
307	// Editor Styles.
308	// This empty stylesheet is defined to ensure backward compatibility.
309	gutenberg_override_style( 'wp-blocks', false );
310
311	gutenberg_override_style(
312	'wp-block-editor',
313	gutenberg_url( 'build/block-editor/style.css' ),
314	array( 'wp-components', 'wp-editor-font' ),
315	filemtime( gutenberg_dir_path() . 'build/editor/style.css' )
316	);
317	wp_style_add_data( 'wp-block-editor', 'rtl', 'replace' );
318
319	gutenberg_override_style(
320	'wp-editor',
321	gutenberg_url( 'build/editor/style.css' ),
322	array( 'wp-components', 'wp-block-editor', 'wp-nux' ),
323	filemtime( gutenberg_dir_path() . 'build/editor/style.css' )
324	);
325	wp_style_add_data( 'wp-editor', 'rtl', 'replace' );
326
327	gutenberg_override_style(
328	'wp-edit-post',
329	gutenberg_url( 'build/edit-post/style.css' ),
330	array( 'wp-components', 'wp-block-editor', 'wp-editor', 'wp-edit-blocks', 'wp-block-library', 'wp-nux' ),
331	filemtime( gutenberg_dir_path() . 'build/edit-post/style.css' )
332	);
333	wp_style_add_data( 'wp-edit-post', 'rtl', 'replace' );
334
335	gutenberg_override_style(
336	'wp-components',
337	gutenberg_url( 'build/components/style.css' ),
338	array(),
339	filemtime( gutenberg_dir_path() . 'build/components/style.css' )
340	);
341	wp_style_add_data( 'wp-components', 'rtl', 'replace' );
342
343	gutenberg_override_style(
344	'wp-block-library',
345	gutenberg_url( 'build/block-library/style.css' ),
346	array(),
347	filemtime( gutenberg_dir_path() . 'build/block-library/style.css' )
348	);
349	wp_style_add_data( 'wp-block-library', 'rtl', 'replace' );
350
351	gutenberg_override_style(
352	'wp-format-library',
353	gutenberg_url( 'build/format-library/style.css' ),
354	array( 'wp-block-editor', 'wp-components' ),
355	filemtime( gutenberg_dir_path() . 'build/format-library/style.css' )
356	);
357	wp_style_add_data( 'wp-format-library', 'rtl', 'replace' );
358
359	gutenberg_override_style(
360	'wp-edit-blocks',
361	gutenberg_url( 'build/block-library/editor.css' ),
362	array(
363	'wp-components',
364	'wp-editor',
365	'wp-block-library',
366	// Always include visual styles so the editor never appears broken.
367	'wp-block-library-theme',
368	),
369	filemtime( gutenberg_dir_path() . 'build/block-library/editor.css' )
370	);
371	wp_style_add_data( 'wp-edit-blocks', 'rtl', 'replace' );
372
373	gutenberg_override_style(
374	'wp-nux',
375	gutenberg_url( 'build/nux/style.css' ),
376	array( 'wp-components' ),
377	filemtime( gutenberg_dir_path() . 'build/nux/style.css' )
378	);
379	wp_style_add_data( 'wp-nux', 'rtl', 'replace' );
380
381	gutenberg_override_style(
382	'wp-block-library-theme',
383	gutenberg_url( 'build/block-library/theme.css' ),
384	array(),
385	filemtime( gutenberg_dir_path() . 'build/block-library/theme.css' )
386	);
387	wp_style_add_data( 'wp-block-library-theme', 'rtl', 'replace' );
388
389	gutenberg_override_style(
390	'wp-list-reusable-blocks',
391	gutenberg_url( 'build/list-reusable-blocks/style.css' ),
392	array( 'wp-components' ),
393	filemtime( gutenberg_dir_path() . 'build/list-reusable-blocks/style.css' )
394	);
395	wp_style_add_data( 'wp-list-reusable-block', 'rtl', 'replace' );
396
397	gutenberg_override_style(
398	'wp-edit-widgets',
399	gutenberg_url( 'build/edit-widgets/style.css' ),
400	array( 'wp-components', 'wp-block-editor', 'wp-edit-blocks' ),
401	filemtime( gutenberg_dir_path() . 'build/edit-widgets/style.css' )
402	);
403	wp_style_add_data( 'wp-edit-widgets', 'rtl', 'replace' );
404
405	if ( defined( 'GUTENBERG_LIVE_RELOAD' ) && GUTENBERG_LIVE_RELOAD ) {
406	$live_reload_url = ( GUTENBERG_LIVE_RELOAD === true ) ? 'http://localhost:35729/livereload.js' : GUTENBERG_LIVE_RELOAD;
407
408	wp_enqueue_script(
409	'gutenberg-live-reload',
410	$live_reload_url
411	);
412	}
413	}
414	add_action( 'wp_enqueue_scripts', 'gutenberg_register_scripts_and_styles', 5 );
415	add_action( 'admin_enqueue_scripts', 'gutenberg_register_scripts_and_styles', 5 );
416
417	/**
418	* Registers vendor JavaScript files to be used as dependencies of the editor
419	* and plugins.
420	*
421	* This function is called from a script during the plugin build process, so it
422	* should not call any WordPress PHP functions.
423	*
424	* @since 0.1.0
425	*/
426	function gutenberg_register_vendor_scripts() {
427	$suffix = SCRIPT_DEBUG ? '' : '.min';
428
429	// Vendor Scripts.
430	$react_suffix = ( SCRIPT_DEBUG ? '.development' : '.production' ) . $suffix;
431
432	gutenberg_register_vendor_script(
433	'react',
434	'https://unpkg.com/react@16.8.4/umd/react' . $react_suffix . '.js',
435	array( 'wp-polyfill' )
436	);
437	gutenberg_register_vendor_script(
438	'react-dom',
439	'https://unpkg.com/react-dom@16.8.4/umd/react-dom' . $react_suffix . '.js',
440	array( 'react' )
441	);
442	}
443
444	/**
445	* Retrieves a unique and reasonably short and human-friendly filename for a
446	* vendor script based on a URL and the script handle.
447	*
448	* @param string $handle The name of the script.
449	* @param string $src Full URL of the external script.
450	*
451	* @return string Script filename suitable for local caching.
452	*
453	* @since 0.1.0
454	*/
455	function gutenberg_vendor_script_filename( $handle, $src ) {
456	$filename = basename( $src );
457	$match = preg_match(
458	'/^'
459	. '(?P<ignore>.*?)'
460	. '(?P<suffix>\.min)?'
461	. '(?P<extension>\.js)'
462	. '(?P<extra>.*)'
463	. '$/',
464	$filename,
465	$filename_pieces
466	);
467
468	$prefix = $handle;
469	$suffix = $match ? $filename_pieces['suffix'] : '';
470	$hash = substr( md5( $src ), 0, 8 );
471
472	return "${prefix}${suffix}.${hash}.js";
473	}
474
475	/**
476	* Registers a vendor script from a URL, preferring a locally cached version if
477	* possible, or downloading it if the cached version is unavailable or
478	* outdated.
479	*
480	* @param string $handle Name of the script.
481	* @param string $src Full URL of the external script.
482	* @param array $deps Optional. An array of registered script handles this
483	* script depends on.
484	*
485	* @since 0.1.0
486	*/
487	function gutenberg_register_vendor_script( $handle, $src, $deps = array() ) {
488	if ( defined( 'GUTENBERG_LOAD_VENDOR_SCRIPTS' ) && ! GUTENBERG_LOAD_VENDOR_SCRIPTS ) {
489	return;
490	}
491
492	$filename = gutenberg_vendor_script_filename( $handle, $src );
493
494	if ( defined( 'GUTENBERG_LIST_VENDOR_ASSETS' ) && GUTENBERG_LIST_VENDOR_ASSETS ) {
495	echo "$src\|$filename\n";
496	return;
497	}
498
499	$full_path = gutenberg_dir_path() . 'vendor/' . $filename;
500
501	$needs_fetch = (
502	defined( 'GUTENBERG_DEVELOPMENT_MODE' ) && GUTENBERG_DEVELOPMENT_MODE && (
503	! file_exists( $full_path ) \|\|
504	time() - filemtime( $full_path ) >= DAY_IN_SECONDS
505	)
506	);
507
508	if ( $needs_fetch ) {
509	// Determine whether we can write to this file. If not, don't waste
510	// time doing a network request.
511	// @codingStandardsIgnoreStart
512	$f = @fopen( $full_path, 'a' );
513	// @codingStandardsIgnoreEnd
514	if ( ! $f ) {
515	// Failed to open the file for writing, probably due to server
516	// permissions. Enqueue the script directly from the URL instead.
517	gutenberg_override_script( $handle, $src, $deps, null );
518	return;
519	}
520	fclose( $f );
521	$response = wp_remote_get( $src );
522	if ( wp_remote_retrieve_response_code( $response ) === 200 ) {
523	$f = fopen( $full_path, 'w' );
524	fwrite( $f, wp_remote_retrieve_body( $response ) );
525	fclose( $f );
526	} elseif ( ! filesize( $full_path ) ) {
527	// The request failed. If the file is already cached, continue to
528	// use this file. If not, then unlink the 0 byte file, and enqueue
529	// the script directly from the URL.
530	gutenberg_override_script( $handle, $src, $deps, null );
531	unlink( $full_path );
532	return;
533	}
534	}
535	gutenberg_override_script(
536	$handle,
537	gutenberg_url( 'vendor/' . $filename ),
538	$deps,
539	null
540	);
541	}
542
543	/**
544	* Extends block editor settings to include Gutenberg's `editor-styles.css` as
545	* taking precedent those styles shipped with core.
546	*
547	* @param array $settings Default editor settings.
548	*
549	* @return array Filtered editor settings.
550	*/
551	function gutenberg_extend_block_editor_styles( $settings ) {
552	$editor_styles_file = gutenberg_dir_path() . 'build/editor/editor-styles.css';
553
554	/*
555	* If, for whatever reason, the built editor styles do not exist, avoid
556	* override and fall back to the default.
557	*/
558	if ( ! file_exists( $editor_styles_file ) ) {
559	return $settings;
560	}
561
562	if ( empty( $settings['styles'] ) ) {
563	$settings['styles'] = array();
564	} else {
565	/*
566	* The styles setting is an array of CSS strings, so there is no direct
567	* way to find the default styles. To maximize stability, load (again)
568	* the default styles from disk and find its place in the array.
569	*
570	* See: https://github.com/WordPress/wordpress-develop/blob/5.0.3/src/wp-admin/edit-form-blocks.php#L168-L175
571	*/
572
573	$default_styles = file_get_contents(
574	ABSPATH . WPINC . '/css/dist/editor/editor-styles.css'
575	);
576
577	/*
578	* Iterate backwards from the end of the array since the preferred
579	* insertion point in case not found is prepended as first entry.
580	*/
581	for ( $i = count( $settings['styles'] ) - 1; $i >= 0; $i-- ) {
582	if ( isset( $settings['styles'][ $i ]['css'] ) &&
583	$default_styles === $settings['styles'][ $i ]['css'] ) {
584	break;
585	}
586	}
587	}
588
589	$editor_styles = array(
590	'css' => file_get_contents( $editor_styles_file ),
591	);
592
593	// Substitute default styles if found. Otherwise, prepend to setting array.
594	if ( isset( $i ) && $i >= 0 ) {
595	$settings['styles'][ $i ] = $editor_styles;
596	} else {
597	array_unshift( $settings['styles'], $editor_styles );
598	}
599
600	return $settings;
601	}
602	add_filter( 'block_editor_settings', 'gutenberg_extend_block_editor_styles' );
603
604	/**
605	* Extends block editor preload paths to preload additional data. Note that any
606	* additions here should be complemented with a corresponding core ticket to
607	* reconcile the change upstream for future removal from Gutenberg.
608	*
609	* @param array $preload_paths Array of paths to preload.
610	* @param WP_Post $post Post being edited.
611	*
612	* @return array Filtered array of paths to preload.
613	*/
614	function gutenberg_extend_block_editor_preload_paths( $preload_paths, $post ) {
615	/*
616	* Preload any autosaves for the post. (see https://github.com/WordPress/gutenberg/pull/7945)
617	*
618	* Trac ticket: https://core.trac.wordpress.org/ticket/46974
619	*
620	* At the time of writing, the change is not committed or released
621	* in core. This path should be removed from Gutenberg when the code is
622	* released in core, and the corresponding release version becomes
623	* the minimum supported version.
624	*/
625	$post_type_object = get_post_type_object( $post->post_type );
626
627	if ( isset( $post_type_object ) ) {
628	$rest_base = ! empty( $post_type_object->rest_base ) ? $post_type_object->rest_base : $post_type_object->name;
629	$autosaves_path = sprintf( '/wp/v2/%s/%d/autosaves?context=edit', $rest_base, $post->ID );
630
631	if ( ! in_array( $autosaves_path, $preload_paths ) ) {
632	$preload_paths[] = $autosaves_path;
633	}
634	}
635
636	/*
637	* Used in considering user permissions for creating and updating blocks,
638	* as condition for displaying relevant actions in the interface.
639	*
640	* Trac ticket: https://core.trac.wordpress.org/ticket/46429
641	*
642	* This is present in WordPress 5.2 and should be removed from Gutenberg
643	* once WordPress 5.2 is the minimum supported version.
644	*/
645	$blocks_path = array( '/wp/v2/blocks', 'OPTIONS' );
646
647	if ( ! in_array( $blocks_path, $preload_paths ) ) {
648	$preload_paths[] = $blocks_path;
649	}
650
651	return $preload_paths;
652	}
653	add_filter( 'block_editor_preload_paths', 'gutenberg_extend_block_editor_preload_paths', 10, 2 );
654