Template Editor does not re render block after scripts have loaded

[fabiankaegy]

Description

Based on the Make WordPress post about Blocks in an iframed (template) editor blocks will get re-rendered once the corresponding script has been loaded in the iframe.

const ref = useRefEffect( ( element ) => {
 const { ownerDocument } = element;
 const { defaultView } = ownerDocument;

 // Use the script loaded in the iframe.
 // Script are loaded asynchronously, so check is the script is loaded.
 // After the dependencies have loaded, the block will re-render.
 if ( ! defaultView.jQuery ) {
   return;
 }

 defaultView.jQuery( element ).masonry( … );
 return () => {
   defaultView.jQuery( element ).masonry( 'destroy' );
 }
} );
const props = useBlockProps( { ref } );

This works great in the template editor. The template part however does not rerender the component and therefore the callback in the useRefEffect never gets executed when the script is actually loaded.

Step-by-step reproduction instructions

1. Create a block that lists jquery or some other js third-party script in the script dependencies.
2. use the useRefEffect as shown in the description above
3. open the block in the site editor. It works as expected
4. open the block in the template editor
5. see that the element only gets rerendered once you interact with it

Screenshots, screen recording, code snippet

No response

Environment info

Site Health:

### wp-core ###

version: 5.9-RC3
site_language: en_US
user_language: en_US
timezone: +00:00
permalink: undefined
https_status: false
multisite: false
user_registration: 0
blog_public: 1
default_comment_status: open
environment_type: local
user_count: 1
dotorg_communication: true

### wp-paths-sizes ###

wordpress_path: /var/www/html
wordpress_size: loading...
uploads_path: /var/www/html/wp-content/uploads
uploads_size: loading...
themes_path: /var/www/html/wp-content/themes
themes_size: loading...
plugins_path: /var/www/html/wp-content/plugins
plugins_size: loading...
database_size: loading...
total_size: loading...

### wp-active-theme ###

name: Twenty Twenty-Two (twentytwentytwo)
version: 1.0
author: the WordPress team
author_website: https://wordpress.org/
parent_theme: none
theme_features: core-block-patterns, post-thumbnails, responsive-embeds, editor-styles, html5, automatic-feed-links, block-templates, widgets-block-editor, wp-block-styles, editor-style
theme_path: /var/www/html/wp-content/themes/twentytwentytwo
auto_update: Disabled

### wp-themes-inactive (3) ###

Twenty Nineteen: version: 2.1, author: the WordPress team, Auto-updates disabled
Twenty Twenty: version: 1.8, author: the WordPress team, Auto-updates disabled
Twenty Twenty-One: version: 1.4, author: the WordPress team, Auto-updates disabled

### wp-plugins-active (2) ###

Block for Apple Maps: version: 1.0.1, author: 10up, Auto-updates disabled
WordPress Beta Tester: version: 3.1.4, author: Peter Westwood, Andy Fragen, Auto-updates disabled

### wp-plugins-inactive (2) ###

Akismet Anti-Spam: version: 4.2.1, author: Automattic, Auto-updates disabled
Hello Dolly: version: 1.7.2, author: Matt Mullenweg, Auto-updates disabled

### wp-media ###

image_editor: WP_Image_Editor_Imagick
imagick_module_version: 1691
imagemagick_version: ImageMagick 6.9.11-60 Q16 aarch64 2021-01-25 https://imagemagick.org
imagick_version: 3.6.0
file_uploads: File uploads is turned off
post_max_size: 8M
upload_max_filesize: 2M
max_effective_size: 2 MB
max_file_uploads: 20
imagick_limits: 
	imagick::RESOURCETYPE_AREA: 122 MB
	imagick::RESOURCETYPE_DISK: 1073741824
	imagick::RESOURCETYPE_FILE: 786432
	imagick::RESOURCETYPE_MAP: 512 MB
	imagick::RESOURCETYPE_MEMORY: 256 MB
	imagick::RESOURCETYPE_THREAD: 1
imagemagick_file_formats: 3FR, 3G2, 3GP, AAI, AI, APNG, ART, ARW, AVI, AVIF, AVS, BGR, BGRA, BGRO, BIE, BMP, BMP2, BMP3, BRF, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CR3, CRW, CUR, CUT, DATA, DCM, DCR, DCX, DDS, DFONT, DNG, DPX, DXT1, DXT5, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, FAX, FILE, FITS, FRACTAL, FTP, FTS, G3, G4, GIF, GIF87, GRADIENT, GRAY, GRAYA, GROUP4, H, HALD, HDR, HEIC, HISTOGRAM, HRZ, HTM, HTML, HTTP, HTTPS, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, J2C, J2K, JBG, JBIG, JNG, JNX, JP2, JPC, JPE, JPEG, JPG, JPM, JPS, JPT, JSON, K25, KDC, LABEL, M2V, M4V, MAC, MAGICK, MAP, MASK, MAT, MATTE, MEF, MIFF, MKV, MNG, MONO, MOV, MP4, MPC, MPG, MRW, MSL, MTV, MVG, NEF, NRW, NULL, ORF, OTB, OTF, PAL, PALM, PAM, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, PGX, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG00, PNG24, PNG32, PNG48, PNG64, PNG8, PNM, POCKETMOD, PPM, PREVIEW, PS, PS2, PS3, PSB, PSD, PTIF, PWP, RADIAL-GRADIENT, RAF, RAS, RAW, RGB, RGBA, RGBO, RGF, RLA, RLE, RMF, RW2, SCR, SCT, SFW, SGI, SHTML, SIX, SIXEL, SPARSE-COLOR, SR2, SRF, STEGANO, SUN, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TTC, TTF, TXT, UBRL, UBRL6, UIL, UYVY, VDA, VICAR, VID, VIDEO, VIFF, VIPS, VST, WBMP, WEBM, WEBP, WMV, WPG, X, X3F, XBM, XC, XCF, XPM, XPS, XV, XWD, YCbCr, YCbCrA, YUV
gd_version: bundled (2.1.0 compatible)
gd_formats: GIF, JPEG, PNG, WebP, BMP
ghostscript_version: 9.53.3

### wp-server ###

server_architecture: Linux 5.10.76-linuxkit aarch64
httpd_software: Apache/2.4.51 (Debian)
php_version: 7.4.27 64bit
php_sapi: apache2handler
max_input_variables: 1000
time_limit: 30
memory_limit: 128M
admin_memory_limit: 256M
max_input_time: -1
upload_max_filesize: 2M
php_post_max_size: 8M
curl_version: 7.74.0 OpenSSL/1.1.1k
suhosin: false
imagick_availability: true
pretty_permalinks: true
htaccess_extra_rules: false

### wp-database ###

extension: mysqli
server_version: 10.6.5-MariaDB-1:10.6.5+maria~focal
client_version: mysqlnd 7.4.27
max_allowed_packet: 16777216
max_connections: 151

### wp-constants ###

WP_HOME: http://localhost:8888/
WP_SITEURL: http://localhost:8888/
WP_CONTENT_DIR: /var/www/html/wp-content
WP_PLUGIN_DIR: /var/www/html/wp-content/plugins
WP_MEMORY_LIMIT: 40M
WP_MAX_MEMORY_LIMIT: 256M
WP_DEBUG: true
WP_DEBUG_DISPLAY: true
WP_DEBUG_LOG: false
SCRIPT_DEBUG: true
WP_CACHE: false
CONCATENATE_SCRIPTS: undefined
COMPRESS_SCRIPTS: undefined
COMPRESS_CSS: undefined
WP_ENVIRONMENT_TYPE: local
DB_CHARSET: utf8
DB_COLLATE: undefined

### wp-filesystem ###

wordpress: writable
wp-content: writable
uploads: writable
plugins: writable
themes: writable

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[ellatrix]

I believe this was fixed by #52405, which removed the need to re-render blocks to allow them to initialise: https://github.com/WordPress/gutenberg/pull/52405/files#diff-ab17abd38e687edd56573694ae3017e105e96b319571c190e9d4705c1872bc9cL212. Please let me know if I'm mistaken! :)