Twenty Twenty-Four Theme > Site Editor Image Upload To Media Library Not working (loading)

[devsahadat]

Bug Report

Description

Twenty Twenty-Four Theme > Site Editor Image Upload To Media Library Not working (loading). I tried other themes (2023,2023) all are working.

Environment

• WordPress: 6.5
• PHP: 8.0.30
• Server: Apache/2.4.43 (Unix)
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.0.30)
• Browser: Chrome 123.0.0.0 (macOS)
• Theme: Twenty Twenty-Four 1.1
• MU-Plugins: None activated
• Plugins: None

Steps to Reproduce

1. Install Twenty Twenty-Four Theme
2. Go to HomePage
3. Edit Site
4. Click on any image (comes default from theme)
5. Click Upload on media library
6. 🐞 Bug occurs.

Expected Results

1. ✅ should upload the image in media library.

Actual Results

1. ❌ Not uploading the image in media library.

[devsahadat]

Image not uploading to media library

[devsahadat]

Image not uploading to media library

[poena]

Hi
I am not able to reproduce the issue.

Does the user have all the permissions needed to upload the image?

From the video, I can see that the error happens in the Site Editor.
Does it also happen in other templates, and in posts or pages?

Does it happen if you add a new remote image?
Or only with images that the theme has placed in the template?

Are there any JavaScript errors in the browser developer tools console?

[devsahadat]

Full setup and error recording

[devsahadat]

Replying to poena:

Hi
I am able to reproduce the issue with fresh WordPress installation in localwp and specific twenty twenty four theme in the following environment. if i change the theme then it's work.

please watch my attachment : Attachment loading.mp4​added
Full setup and error recording

WordPress
Version 6.5
Site Language en_US
User Language en_US
Timezone +00:00
Home URL ​http://localhost:10004
Site URL ​http://localhost:10004
Permalink structure /%postname%/
Is this site using HTTPS? No
Is this a multisite? No
Can anyone register on this site? No
Is this site discouraging search engines? No
Default comment status Open
Environment type local
User count 1
Communication with WordPress.org WordPress.org is reachable

Directories and Sizes
WordPress directory location /Users/devsahadat/Local Sites/devsahadat/app/public
WordPress directory size 54.67 MB
Uploads directory location /Users/devsahadat/Local Sites/devsahadat/app/public/wp-content/uploads
Uploads directory size 0.00 B
Themes directory location /Users/devsahadat/Local Sites/devsahadat/app/public/wp-content/themes
Themes directory size 12.12 MB
Plugins directory location /Users/devsahadat/Local Sites/devsahadat/app/public/wp-content/plugins
Plugins directory size 28.00 B
Database size 2.13 MB
Total installation size 68.91 MB

Active Theme
Name Twenty Twenty-Four (twentytwentyfour)
Version 1.1
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, widgets-block-editor, block-templates
Theme directory location /Users/devsahadat/Local Sites/devsahadat/app/public/wp-content/themes/twentytwentyfour
Auto-updates Disabled

Inactive Themes (2)
Twenty Twenty-Three (twentytwentythree) Version 1.4 by the WordPress team | Auto-updates disabled
Twenty Twenty-Two (twentytwentytwo) Version 1.7 by the WordPress team | Auto-updates disabled

Media Handling
Active editor WP_Image_Editor_Imagick
ImageMagick version number 1808
ImageMagick version string ImageMagick 7.1.0-46 Q16 aarch64 5ef3d4d66:20220816 ​https://imagemagick.org
Imagick version 3.7.0
File uploads Enabled
Max size of post data allowed 1000M
Max size of an uploaded file 300M
Max effective file size 300 MB
Max number of files allowed 20
Imagick Resource Limits
area: 16 GB
disk: 9.2233720368548E+18
file: 7680
map: 16 GB
memory: 8 GB
thread: 1
time: 9.2233720368548E+18

GD version bundled (2.1.0 compatible)
GD supported file formats GIF, JPEG, PNG, WebP, BMP
Ghostscript version 9.56.1

Server
The options shown below relate to your server setup. If changes are required, you may need your web host’s assistance.

Server architecture Darwin 23.4.0 arm64
Web server Apache/2.4.43 (Unix)
PHP version 8.1.23 (Supports 64bit values)
PHP SAPI fpm-fcgi
PHP max input variables 4000
PHP time limit 1200
PHP memory limit 256M
Max input time 600
Upload max filesize 300M
PHP post max size 1000M
cURL version 8.4.0 (SecureTransport) LibreSSL/3.3.6
Is SUHOSIN installed? No
Is the Imagick library available? Yes
Are pretty permalinks supported? Yes
.htaccess rules Your .htaccess file contains only core WordPress features.
Current time 2024-04-05T14:06:01+00:00
Current UTC time Friday, 05-Apr-24 14:06:01 UTC
Current Server time 2024-04-05T14:05:57+00:00

Database
Extension mysqli
Server version 8.0.16
Client version mysqlnd 8.1.23
Database username root
Database host localhost
Database name local
Table prefix wp_
Database charset utf8mb4
Database collation utf8mb4_unicode_520_ci
Max allowed packet size 16777216
Max connections number 151

WordPress Constants
These settings alter where and how parts of WordPress are loaded.

ABSPATH /Users/devsahadat/Local Sites/devsahadat/app/public/
WP_HOME Undefined
WP_SITEURL Undefined
WP_CONTENT_DIR /Users/devsahadat/Local Sites/devsahadat/app/public/wp-content
WP_PLUGIN_DIR /Users/devsahadat/Local Sites/devsahadat/app/public/wp-content/plugins
WP_MEMORY_LIMIT 40M
WP_MAX_MEMORY_LIMIT 256M
WP_DEBUG Disabled
WP_DEBUG_DISPLAY Enabled
WP_DEBUG_LOG Disabled
SCRIPT_DEBUG Disabled
WP_CACHE Disabled
CONCATENATE_SCRIPTS Undefined
COMPRESS_SCRIPTS Undefined
COMPRESS_CSS Undefined
WP_ENVIRONMENT_TYPE local
WP_DEVELOPMENT_MODE Disabled
DB_CHARSET utf8
DB_COLLATE

Filesystem Permissions
Shows whether WordPress is able to write to the directories it needs access to.

The main WordPress directory Writable
The wp-content directory Writable
The uploads directory Writable
The plugins directory Writable
The themes directory Writable

[devsahadat]

Getting this error on console

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'url')
    at onFileChange (block-library.min.js?ver=ad737ee06c6f575025a0:14:179980)
    at m (media-utils.min.js?ver=1cf582d3c080c8694c8c:2:5789)
    at y (media-utils.min.js?ver=1cf582d3c080c8694c8c:2:6923)

[poena]

I am still unable to reproduce it.

Does it also happen in other templates, and in posts or pages?
Does it happen if you add a new remote image?
Or only with images that the theme has placed in the template?
Is it only this exact image that is in the video, or all images in the template?

[karmatosed]

I have to admit I am also struggling to replicate this. For now, I recommend we close this, but we can always revisit it should we get more information on reproducing steps. Thank you, everyone, for collaborating on this ticket.

[karmatosed]

I am going to progress this to close now - thank you everyone.