| @@ -14,16 +14,17 @@ | ||
| 14 | 14 | * |
| 15 | 15 | * @package gutenberg |
| 16 | 16 | */ |
| 17 | 17 | |
| 18 | -// Client-side media processing is currently plugin-only while the feature matures. | |
| 19 | -if ( ! defined( 'IS_GUTENBERG_PLUGIN' ) || ! IS_GUTENBERG_PLUGIN ) { | |
| 18 | +if ( ! gutenberg_is_client_side_media_processing_enabled() ) { | |
| 20 | 19 | return; |
| 21 | 20 | } |
| 22 | 21 | |
| 23 | -if ( ! gutenberg_is_client_side_media_processing_enabled() ) { | |
| 24 | - return; | |
| 25 | -} | |
| 22 | +// Animated GIF → video: clean up the sideloaded companion video and | |
| 23 | +// poster when their GIF attachment is deleted. The GIF→video swap itself | |
| 24 | +// happens in the editor (the converted block is a real core/video), so no | |
| 25 | +// render-time filtering is needed. | |
| 26 | +require_once __DIR__ . '/animated-gif-to-video.php'; | |
| 26 | 27 | |
| 27 | 28 | // ── Tier 1: HEIC infrastructure (always loaded) ───────────────────── |
| 28 | 29 | |
| 29 | 30 | /** |
| @@ -167,14 +168,30 @@ | ||
| 167 | 168 | * |
| 168 | 169 | * @param WP_REST_Response $response Response data. |
| 169 | 170 | */ |
| 170 | 171 | function gutenberg_media_processing_filter_rest_index( WP_REST_Response $response ) { |
| 171 | - /** This filter is documented in wp-admin/includes/images.php */ | |
| 172 | + /** This filter is documented in wp-admin/includes/image.php */ | |
| 172 | 173 | $image_size_threshold = (int) apply_filters( 'big_image_size_threshold', 2560, array( 0, 0 ), '', 0 ); // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound |
| 173 | 174 | |
| 175 | + /** This filter is documented in wp-includes/class-wp-image-editor-imagick.php */ | |
| 176 | + $image_strip_meta = (bool) apply_filters( 'image_strip_meta', true ); // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound | |
| 177 | + | |
| 178 | + /* | |
| 179 | + * On the server, this filter receives the decoded image's actual bit depth. | |
| 180 | + * The client path never decodes the image on the server, so the filter is | |
| 181 | + * applied with 16 (the maximum depth vips can produce) as both the value | |
| 182 | + * and the current depth. The client caps its output bit depth at the | |
| 183 | + * filtered value, so a plugin lowering it (e.g. to 8) takes effect on | |
| 184 | + * client-generated images too. | |
| 185 | + */ | |
| 186 | + /** This filter is documented in wp-includes/class-wp-image-editor-imagick.php */ | |
| 187 | + $image_max_bit_depth = (int) apply_filters( 'image_max_bit_depth', 16, 16 ); // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound | |
| 188 | + | |
| 174 | 189 | if ( current_user_can( 'upload_files' ) ) { |
| 175 | 190 | $response->data['image_sizes'] = gutenberg_get_all_image_sizes(); |
| 176 | 191 | $response->data['image_size_threshold'] = $image_size_threshold; |
| 192 | + $response->data['image_strip_meta'] = $image_strip_meta; | |
| 193 | + $response->data['image_max_bit_depth'] = $image_max_bit_depth; | |
| 177 | 194 | } |
| 178 | 195 | |
| 179 | 196 | return $response; |
| 180 | 197 | } |
| @@ -181,48 +198,64 @@ | ||
| 181 | 198 | |
| 182 | 199 | add_filter( 'rest_index', 'gutenberg_media_processing_filter_rest_index' ); |
| 183 | 200 | |
| 184 | 201 | /** |
| 185 | - * Sets a global JS variable to indicate that HEIC canvas-based upload support is available. | |
| 202 | + * Sets a global JS variable to indicate that client-side media processing is enabled. | |
| 186 | 203 | * |
| 187 | - * This flag is set whenever the media processing feature is enabled, | |
| 188 | - * regardless of whether the browser supports full VIPS-based processing. | |
| 189 | - * Browsers like Safari can use createImageBitmap() to decode HEIC images | |
| 190 | - * and convert them to JPEG for server-side sub-size generation. | |
| 204 | + * The flag gates both processing modes: the full VIPS/WASM pipeline (browsers | |
| 205 | + * that pass feature detection) and the HEIC canvas fallback used by browsers | |
| 206 | + * such as Safari that can decode HEIC via createImageBitmap() but lack | |
| 207 | + * SharedArrayBuffer support. The browser-capability check happens client-side. | |
| 191 | 208 | */ |
| 192 | -function gutenberg_set_heic_upload_support_flag() { | |
| 193 | - wp_add_inline_script( 'wp-block-editor', 'window.__heicUploadSupport = true', 'before' ); | |
| 209 | +function gutenberg_set_client_side_media_processing_flag() { | |
| 210 | + // Re-check the filter at action time, since other plugins (loaded after Gutenberg) | |
| 211 | + // may have added a filter to disable client-side media processing. | |
| 212 | + if ( ! gutenberg_is_client_side_media_processing_enabled() ) { | |
| 213 | + return; | |
| 214 | + } | |
| 215 | + wp_add_inline_script( 'wp-block-editor', 'window.__clientSideMediaProcessing = true', 'before' ); | |
| 194 | 216 | } |
| 195 | -add_action( 'admin_init', 'gutenberg_set_heic_upload_support_flag' ); | |
| 217 | +add_action( 'admin_init', 'gutenberg_set_client_side_media_processing_flag' ); | |
| 196 | 218 | |
| 197 | 219 | /** |
| 198 | - * Deletes the HEIC companion file when its attachment is deleted. | |
| 220 | + * Deletes the source-format companion file when its attachment is deleted. | |
| 199 | 221 | * |
| 200 | - * The HEIC is sideloaded alongside a JPEG derivative and recorded in | |
| 201 | - * $metadata['original']. WordPress core's wp_delete_attachment_files() | |
| 202 | - * only knows about 'original_image', so without this hook the HEIC | |
| 203 | - * would linger on disk after the attachment is deleted. | |
| 222 | + * When the client-side media flow sideloads a source-format original (such as | |
| 223 | + * a HEIC file) alongside a web-viewable derivative, the original's filename is | |
| 224 | + * recorded in the 'source_image' metadata key. WordPress only tracks | |
| 225 | + * 'original_image' in wp_delete_attachment_files(), so without this hook the | |
| 226 | + * companion file would linger on disk after the attachment is deleted. | |
| 204 | 227 | * |
| 205 | 228 | * @param int $post_id Attachment ID being deleted. |
| 229 | + * @return bool Whether a companion file was deleted. | |
| 206 | 230 | */ |
| 207 | -function gutenberg_delete_heic_companion_file( int $post_id ): void { | |
| 231 | +function gutenberg_delete_heic_companion_file( int $post_id ): bool { | |
| 208 | 232 | $metadata = wp_get_attachment_metadata( $post_id, true ); |
| 209 | 233 | |
| 210 | - if ( empty( $metadata['original'] ) || ! is_string( $metadata['original'] ) ) { | |
| 211 | - return; | |
| 234 | + $source_image = $metadata['source_image'] ?? null; | |
| 235 | + if ( ! is_string( $source_image ) || '' === $source_image ) { | |
| 236 | + return false; | |
| 212 | 237 | } |
| 213 | 238 | |
| 214 | 239 | $attached_file = get_attached_file( $post_id, true ); |
| 215 | 240 | |
| 216 | 241 | if ( ! $attached_file ) { |
| 217 | - return; | |
| 242 | + return false; | |
| 218 | 243 | } |
| 219 | 244 | |
| 220 | - $heic_path = path_join( dirname( $attached_file ), $metadata['original'] ); | |
| 245 | + $uploads = wp_get_upload_dir(); | |
| 221 | 246 | |
| 222 | - if ( file_exists( $heic_path ) ) { | |
| 223 | - wp_delete_file( $heic_path ); | |
| 247 | + if ( empty( $uploads['basedir'] ) ) { | |
| 248 | + return false; | |
| 224 | 249 | } |
| 250 | + | |
| 251 | + $companion_path = path_join( dirname( $attached_file ), wp_basename( $source_image ) ); | |
| 252 | + | |
| 253 | + if ( ! file_exists( $companion_path ) ) { | |
| 254 | + return false; | |
| 255 | + } | |
| 256 | + | |
| 257 | + return wp_delete_file_from_directory( $companion_path, $uploads['basedir'] ); | |
| 225 | 258 | } |
| 226 | 259 | |
| 227 | 260 | add_action( 'delete_attachment', 'gutenberg_delete_heic_companion_file' ); |
| 228 | 261 | |
| @@ -230,19 +263,8 @@ | ||
| 230 | 263 | // Everything below requires cross-origin isolation (Document-Isolation-Policy) |
| 231 | 264 | // and SharedArrayBuffer support, which is only available in Chromium 137+. |
| 232 | 265 | |
| 233 | 266 | /** |
| 234 | - * Sets a global JS variable to indicate that client-side media processing is enabled. | |
| 235 | - */ | |
| 236 | -function gutenberg_set_client_side_media_processing_flag() { | |
| 237 | - if ( ! gutenberg_is_client_side_media_processing_enabled() ) { | |
| 238 | - return; | |
| 239 | - } | |
| 240 | - wp_add_inline_script( 'wp-block-editor', 'window.__clientSideMediaProcessing = true', 'before' ); | |
| 241 | -} | |
| 242 | -add_action( 'admin_init', 'gutenberg_set_client_side_media_processing_flag' ); | |
| 243 | - | |
| 244 | -/** | |
| 245 | 267 | * Filters the list of rewrite rules formatted for output to an .htaccess file. |
| 246 | 268 | * |
| 247 | 269 | * Adds support for serving wasm-vips locally. |
| 248 | 270 | * |
| @@ -299,8 +321,15 @@ | ||
| 299 | 321 | if ( ! $screen->is_block_editor() && 'site-editor' !== $screen->id && ! ( 'widgets' === $screen->id && wp_use_widgets_block_editor() ) ) { |
| 300 | 322 | return; |
| 301 | 323 | } |
| 302 | 324 | |
| 325 | + // Skip when rendering the classic-theme home route, which shows the site | |
| 326 | + // preview in an iframe and must reach its `contentDocument` to neutralize | |
| 327 | + // interactive elements — DIP would block that. | |
| 328 | + if ( 'site-editor' === $screen->id && ! wp_is_block_theme() && ( ! isset( $_GET['p'] ) || '/' === $_GET['p'] ) ) { | |
| 329 | + return; | |
| 330 | + } | |
| 331 | + | |
| 303 | 332 | // Skip when a third-party page builder overrides the block editor. |
| 304 | 333 | // DIP isolates the document into its own agent cluster, |
| 305 | 334 | // which blocks same-origin iframe access that these editors rely on. |
| 306 | 335 | // phpcs:ignore WordPress.Security.NonceVerification.Recommended |
| @@ -433,12 +462,60 @@ | ||
| 433 | 462 | return $processor->get_updated_html(); |
| 434 | 463 | } |
| 435 | 464 | |
| 436 | 465 | /** |
| 466 | + * Updates `crossorigin` attributes in the printed media templates. | |
| 467 | + * | |
| 468 | + * Adds `crossorigin="anonymous"` to AUDIO and VIDEO tags inside the | |
| 469 | + * Backbone `<script type="text/html">` templates so the media modal can | |
| 470 | + * play cross-origin audio and video under cross-origin isolation. Tags | |
| 471 | + * that already have the attribute are left untouched so the output does | |
| 472 | + * not gain duplicates on WordPress versions where Core adds it itself. | |
| 473 | + * | |
| 474 | + * IMG is intentionally excluded: under | |
| 475 | + * `Document-Isolation-Policy: isolate-and-credentialless` the browser | |
| 476 | + * already loads cross-origin images in credentialless mode, so forcing | |
| 477 | + * `crossorigin="anonymous"` triggers a CORS request that breaks previews | |
| 478 | + * of images served without CORS headers, such as media offloaded to a | |
| 479 | + * CDN. See https://core.trac.wordpress.org/ticket/65673. | |
| 480 | + * | |
| 481 | + * @param string $html The printed media templates. | |
| 482 | + * | |
| 483 | + * @return string Modified media templates. | |
| 484 | + */ | |
| 485 | +function gutenberg_update_media_template_crossorigin_attributes( string $html ): string { | |
| 486 | + /* | |
| 487 | + * The media templates are inside <script type="text/html"> tags, | |
| 488 | + * whose content is treated as raw text by the HTML Tag Processor. | |
| 489 | + * Extract each script block's content, process it separately, | |
| 490 | + * then reassemble the full output. | |
| 491 | + */ | |
| 492 | + $script_processor = new WP_HTML_Tag_Processor( $html ); | |
| 493 | + while ( $script_processor->next_tag( 'SCRIPT' ) ) { | |
| 494 | + if ( 'text/html' !== $script_processor->get_attribute( 'type' ) ) { | |
| 495 | + continue; | |
| 496 | + } | |
| 497 | + $template_processor = new WP_HTML_Tag_Processor( $script_processor->get_modifiable_text() ); | |
| 498 | + while ( $template_processor->next_tag() ) { | |
| 499 | + if ( | |
| 500 | + in_array( $template_processor->get_tag(), array( 'AUDIO', 'VIDEO' ), true ) | |
| 501 | + && ! is_string( $template_processor->get_attribute( 'crossorigin' ) ) | |
| 502 | + ) { | |
| 503 | + $template_processor->set_attribute( 'crossorigin', 'anonymous' ); | |
| 504 | + } | |
| 505 | + } | |
| 506 | + $script_processor->set_modifiable_text( $template_processor->get_updated_html() ); | |
| 507 | + } | |
| 508 | + | |
| 509 | + return $script_processor->get_updated_html(); | |
| 510 | +} | |
| 511 | + | |
| 512 | +/** | |
| 437 | 513 | * Overrides templates from wp_print_media_templates with custom ones. |
| 438 | 514 | * |
| 439 | - * Adds `crossorigin` attribute to all tags that | |
| 440 | - * could have assets loaded from a different domain. | |
| 515 | + * Updates the `crossorigin` attributes on media tags so cross-origin | |
| 516 | + * audio and video can be processed under cross-origin isolation without | |
| 517 | + * breaking previews of images served without CORS headers. | |
| 441 | 518 | */ |
| 442 | 519 | function gutenberg_override_media_templates(): void { |
| 443 | 520 | remove_action( 'admin_footer', 'wp_print_media_templates' ); |
| 444 | 521 | add_action( |
| @@ -447,19 +524,9 @@ | ||
| 447 | 524 | ob_start(); |
| 448 | 525 | wp_print_media_templates(); |
| 449 | 526 | $html = (string) ob_get_clean(); |
| 450 | 527 | |
| 451 | - $tags = array( | |
| 452 | - 'audio', | |
| 453 | - 'img', | |
| 454 | - 'video', | |
| 455 | - ); | |
| 456 | - | |
| 457 | - foreach ( $tags as $tag ) { | |
| 458 | - $html = (string) str_replace( "<$tag", "<$tag crossorigin=\"anonymous\"", $html ); | |
| 459 | - } | |
| 460 | - | |
| 461 | - echo $html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped | |
| 528 | + echo gutenberg_update_media_template_crossorigin_attributes( $html ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped | |
| 462 | 529 | } |
| 463 | 530 | ); |
| 464 | 531 | } |
| 465 | 532 | |
