Server Error - TypeError: Cannot read properties of undefined (reading 'length')

[riccardodicurti]

Describe the bug

This is a practically clean installation, I only modified a few lines of css. If I create a page with title and text it works but as soon as I add an image it goes to 500.

Production: https://blog.riccardodicurti.it/chi-e-riccardo-di-curti/

Steps to Reproduce

1. Create a page
2. Add: title, body and an image
3. Visit the page from frontend

Screenshots, screen recording, code snippet

- error Error [TypeError]: Cannot read properties of undefined (reading 'length') at __spreadArray (/Users/riccardodicurti/Documents/blog-frontend/node_modules/@headstartwp/core/dist/cjs/react/blocks/hooks/useBlockColors.js:3:66) at useBlockColors (/Users/riccardodicurti/Documents/blog-frontend/node_modules/@headstartwp/core/dist/cjs/react/blocks/hooks/useBlockColors.js:35:21) at useBlockAttributes (/Users/riccardodicurti/Documents/blog-frontend/node_modules/@headstartwp/core/dist/cjs/react/blocks/hooks/useBlockAttributes.js:30:54) at ImageBlock (/Users/riccardodicurti/Documents/blog-frontend/node_modules/@headstartwp/core/dist/cjs/react/blocks/ImageBlock.js:25:71) at renderWithHooks (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16) at renderIndeterminateComponent (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15) at renderElement (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7) at renderNodeDestructiveImpl (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderNode (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12) at renderChildrenArray (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7) at renderNodeDestructiveImpl (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7) at renderNodeDestructive (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderElement (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5971:9) at renderNodeDestructiveImpl (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderIndeterminateComponent (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7) at renderElement (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7) at renderNodeDestructiveImpl (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderNode (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12) at renderHostElement (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3) at renderElement (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5) at renderNodeDestructiveImpl (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderIndeterminateComponent (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7) at renderElement (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7) at renderNodeDestructiveImpl (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderForwardRef (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5859:5) at renderElement (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11) at renderNodeDestructiveImpl (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderNode (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12) at renderChildrenArray (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7) at renderNodeDestructiveImpl (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7) at renderNodeDestructive (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderElement (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5971:9) at renderNodeDestructiveImpl (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderIndeterminateComponent (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7) at renderElement (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7) at renderNodeDestructiveImpl (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderNode (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12) at renderHostElement (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3) at renderElement (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5) at renderNodeDestructiveImpl (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) at renderNodeDestructive (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) at renderIndeterminateComponent (/Users/riccardodicurti/Documents/blog-frontend/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7) { digest: undefined

Environment information

Error present both local and production

WordPress information

`

wp-core

version: 6.2.2
site_language: it_IT
user_language: it_IT
timezone: +00:00
permalink: /%postname%/
https_status: true
multisite: false
user_registration: 0
blog_public: 0
default_comment_status: open
environment_type: production
user_count: 1
dotorg_communication: true

wp-paths-sizes

wordpress_path: /var/www/vhosts/riccardodicurti.com/subdomains/backend/httpdocs
wordpress_size: 60,65 MB (63591850 bytes)
uploads_path: /var/www/vhosts/riccardodicurti.com/subdomains/backend/httpdocs/wp-content/uploads
uploads_size: 4,09 MB (4284795 bytes)
themes_path: /var/www/vhosts/riccardodicurti.com/subdomains/backend/httpdocs/wp-content/themes
themes_size: 2,52 MB (2641998 bytes)
plugins_path: /var/www/vhosts/riccardodicurti.com/subdomains/backend/httpdocs/wp-content/plugins
plugins_size: 14,82 MB (15536714 bytes)
database_size: 5,91 MB (6193152 bytes)
total_size: 87,98 MB (92248509 bytes)

wp-active-theme

name: Intentionally Blank (intentionally-blank)
version: 3.0.3
author: Nilo Velez
author_website: https://www.nilovelez.com/
parent_theme: none
theme_features: core-block-patterns, widgets-block-editor, automatic-feed-links, title-tag, post-thumbnails, custom-background, custom-logo
theme_path: /var/www/vhosts/riccardodicurti.com/subdomains/backend/httpdocs/wp-content/themes/intentionally-blank
auto_update: Disabilitato

wp-themes-inactive (1)

Twenty Twenty-Three: version: 1.1, author: il team di WordPress, Aggiornamenti automatici disabilitati

wp-plugins-active (2)

HeadstartWP: version: 1.0.8, author: 10up, Aggiornamenti automatici disabilitati
Wordfence Security: version: 7.10.0, author: Wordfence, Aggiornamenti automatici disabilitati

wp-media

image_editor: WP_Image_Editor_GD
imagick_module_version: 1690
imagemagick_version: ImageMagick 6.9.10-23 Q16 x86_64 20190101 https://imagemagick.org
imagick_version: @PACKAGE_VERSION@
file_uploads: File uploads is turned off
post_max_size: 256M
upload_max_filesize: 256M
max_effective_size: 256 MB
max_file_uploads: 20
gd_version: bundled (2.1.0 compatible)
gd_formats: GIF, JPEG, PNG, WebP, BMP, XPM
ghostscript_version: unknown

wp-server

server_architecture: Linux 3.10.0-1160.83.1.el7.x86_64 x86_64
httpd_software: Apache
php_version: 8.1.17 64bit
php_sapi: fpm-fcgi
max_input_variables: 10000
time_limit: 600
memory_limit: 256M
max_input_time: 240
upload_max_filesize: 256M
php_post_max_size: 256M
curl_version: 7.64.0 OpenSSL/1.1.1n
suhosin: false
imagick_availability: true
pretty_permalinks: true
htaccess_extra_rules: true

wp-database

extension: mysqli
server_version: 10.4.27-MariaDB
client_version: mysqlnd 8.1.17
max_allowed_packet: 536870912
max_connections: 1000

wp-constants

WP_HOME: undefined
WP_SITEURL: undefined
WP_CONTENT_DIR: /var/www/vhosts/riccardodicurti.com/subdomains/backend/httpdocs/wp-content
WP_PLUGIN_DIR: /var/www/vhosts/riccardodicurti.com/subdomains/backend/httpdocs/wp-content/plugins
WP_MEMORY_LIMIT: 256M
WP_MAX_MEMORY_LIMIT: 256M
WP_DEBUG: false
WP_DEBUG_DISPLAY: true
WP_DEBUG_LOG: false
SCRIPT_DEBUG: false
WP_CACHE: false
CONCATENATE_SCRIPTS: undefined
COMPRESS_SCRIPTS: undefined
COMPRESS_CSS: undefined
WP_ENVIRONMENT_TYPE: Non definito
DB_CHARSET: utf8
DB_COLLATE: undefined

wp-filesystem

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

`

Code of Conduct

• I agree to follow this project's Code of Conduct

[riccardodicurti]

I did a quick debug and the error is generated here:
https://github.com/10up/headstartwp/blob/5a203006c4012c05d09315e0363f10940188d79c/packages/core/src/react/blocks/hooks/useBlockColors.ts#L34C3-L34C88

colors isArray: false colors: undefined

Being undefined then goes into error from.length

[dhamibirendra]

+1

I also faced similar issue. The workaround I used is with the Classic WordPress editor and putting the image in it.

[nicholasio]

I was unable to reproduce this. Could let me know what your theme json looks like? You can inspect that by looking at the output of the app endpoint (e.g https://js1.10up.com/wp-json/headless-wp/v1/app) in the 'theme.json'.settings field.

[dhamibirendra]

Hi @nicholasio

Here is how I faced this error:

1. Created a page
2. Added Title
3. Added an Image block. I used the Image as the first block.
4. Added other contents (texts)

Here is the output of the endpoint for 'theme.json'.settings field

"theme.json":{"settings":{"appearanceTools":false,"useRootPaddingAwareAlignments":false,"border":{"color":false,"radius":false,"style":false,"width":false},"color":{"background":true,"custom":true,"customDuotone":true,"customGradient":true,"defaultDuotone":false,"defaultGradients":true,"defaultPalette":true,"duotone":{"default":[{"name":"Dark grayscale","colors":["#000000","#7f7f7f"],"slug":"dark-grayscale"},{"name":"Grayscale","colors":["#000000","#ffffff"],"slug":"grayscale"},{"name":"Purple and yellow","colors":["#8c00b7","#fcff41"],"slug":"purple-yellow"},{"name":"Blue and red","colors":["#000097","#ff4747"],"slug":"blue-red"},{"name":"Midnight","colors":["#000000","#00a5ff"],"slug":"midnight"},{"name":"Magenta and yellow","colors":["#c7005a","#fff278"],"slug":"magenta-yellow"},{"name":"Purple and green","colors":["#a60072","#67ff66"],"slug":"purple-green"},{"name":"Blue and orange","colors":["#1900d8","#ffa96b"],"slug":"blue-orange"}]},"gradients":{"default":[{"name":"Vivid cyan blue to vivid purple","gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","slug":"vivid-cyan-blue-to-vivid-purple"},{"name":"Light green cyan to vivid green cyan","gradient":"linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)","slug":"light-green-cyan-to-vivid-green-cyan"},{"name":"Luminous vivid amber to luminous vivid orange","gradient":"linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)","slug":"luminous-vivid-amber-to-luminous-vivid-orange"},{"name":"Luminous vivid orange to vivid red","gradient":"linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)","slug":"luminous-vivid-orange-to-vivid-red"},{"name":"Very light gray to cyan bluish gray","gradient":"linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)","slug":"very-light-gray-to-cyan-bluish-gray"},{"name":"Cool to warm spectrum","gradient":"linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)","slug":"cool-to-warm-spectrum"},{"name":"Blush light purple","gradient":"linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)","slug":"blush-light-purple"},{"name":"Blush bordeaux","gradient":"linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)","slug":"blush-bordeaux"},{"name":"Luminous dusk","gradient":"linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)","slug":"luminous-dusk"},{"name":"Pale ocean","gradient":"linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)","slug":"pale-ocean"},{"name":"Electric grass","gradient":"linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)","slug":"electric-grass"},{"name":"Midnight","gradient":"linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)","slug":"midnight"}]},"link":false,"palette":{"default":[{"name":"Black","slug":"black","color":"#000000"},{"name":"Cyan bluish gray","slug":"cyan-bluish-gray","color":"#abb8c3"},{"name":"White","slug":"white","color":"#ffffff"},{"name":"Pale pink","slug":"pale-pink","color":"#f78da7"},{"name":"Vivid red","slug":"vivid-red","color":"#cf2e2e"},{"name":"Luminous vivid orange","slug":"luminous-vivid-orange","color":"#ff6900"},{"name":"Luminous vivid amber","slug":"luminous-vivid-amber","color":"#fcb900"},{"name":"Light green cyan","slug":"light-green-cyan","color":"#7bdcb5"},{"name":"Vivid green cyan","slug":"vivid-green-cyan","color":"#00d084"},{"name":"Pale cyan blue","slug":"pale-cyan-blue","color":"#8ed1fc"},{"name":"Vivid cyan blue","slug":"vivid-cyan-blue","color":"#0693e3"},{"name":"Vivid purple","slug":"vivid-purple","color":"#9b51e0"}]},"text":true},"layout":{"definitions":{"default":{"name":"default","slug":"flow","className":"is-layout-flow","baseStyles":[{"selector":" > .alignleft","rules":{"float":"left","margin-inline-start":"0","margin-inline-end":"2em"}},{"selector":" > .alignright","rules":{"float":"right","margin-inline-start":"2em","margin-inline-end":"0"}},{"selector":" > .aligncenter","rules":{"margin-left":"auto !important","margin-right":"auto !important"}}],"spacingStyles":[{"selector":" > *","rules":{"margin-block-start":"0","margin-block-end":"0"}},{"selector":" > * + *","rules":{"margin-block-start":null,"margin-block-end":"0"}}]},"constrained":{"name":"constrained","slug":"constrained","className":"is-layout-constrained","baseStyles":[{"selector":" > .alignleft","rules":{"float":"left","margin-inline-start":"0","margin-inline-end":"2em"}},{"selector":" > .alignright","rules":{"float":"right","margin-inline-start":"2em","margin-inline-end":"0"}},{"selector":" > .aligncenter","rules":{"margin-left":"auto !important","margin-right":"auto !important"}},{"selector":" > :where(:not(.alignleft):not(.alignright):not(.alignfull))","rules":{"max-width":"var(--wp--style--global--content-size)","margin-left":"auto !important","margin-right":"auto !important"}},{"selector":" > .alignwide","rules":{"max-width":"var(--wp--style--global--wide-size)"}}],"spacingStyles":[{"selector":" > *","rules":{"margin-block-start":"0","margin-block-end":"0"}},{"selector":" > * + *","rules":{"margin-block-start":null,"margin-block-end":"0"}}]},"flex":{"name":"flex","slug":"flex","className":"is-layout-flex","displayMode":"flex","baseStyles":[{"selector":"","rules":{"flex-wrap":"wrap","align-items":"center"}},{"selector":" > *","rules":{"margin":"0"}}],"spacingStyles":[{"selector":"","rules":{"gap":null}}]}}},"shadow":{"defaultPresets":true,"presets":{"default":[{"name":"Natural","slug":"natural","shadow":"6px 6px 9px rgba(0, 0, 0, 0.2)"},{"name":"Deep","slug":"deep","shadow":"12px 12px 50px rgba(0, 0, 0, 0.4)"},{"name":"Sharp","slug":"sharp","shadow":"6px 6px 0px rgba(0, 0, 0, 0.2)"},{"name":"Outlined","slug":"outlined","shadow":"6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1)"},{"name":"Crisp","slug":"crisp","shadow":"6px 6px 0px rgba(0, 0, 0, 1)"}]}},"spacing":{"blockGap":null,"margin":false,"padding":false,"customSpacingSize":true,"units":false,"spacingScale":{"operator":"*","increment":1.5,"steps":7,"mediumStep":1.5,"unit":"rem"},"spacingSizes":{"default":[{"name":"1","slug":"20","size":"0.44rem"},{"name":"2","slug":"30","size":"0.67rem"},{"name":"3","slug":"40","size":"1rem"},{"name":"4","slug":"50","size":"1.5rem"},{"name":"5","slug":"60","size":"2.25rem"},{"name":"6","slug":"70","size":"3.38rem"},{"name":"7","slug":"80","size":"5.06rem"}]}},"typography":{"customFontSize":true,"dropCap":true,"fontSizes":{"default":[{"name":"Small","slug":"small","size":"13px"},{"name":"Medium","slug":"medium","size":"20px"},{"name":"Large","slug":"large","size":"36px"},{"name":"Extra Large","slug":"x-large","size":"42px"}]},"fontStyle":true,"fontWeight":true,"letterSpacing":true,"lineHeight":false,"textDecoration":true,"textTransform":true},"blocks":{"core\/button":{"border":{"radius":true}},"core\/pullquote":{"border":{"color":true,"radius":true,"style":true,"width":true}}}},"styles":{"spacing":{"blockGap":"24px","padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}}}

Hope this helps.

[riccardodicurti]

My steps are the same.

This is mine endpoint: https://backend.riccardodicurti.com/wp-json/headless-wp/v1/app

[nicholasio]

Thanks! I have a fix for this in this PR #545 I'll be doing a bit more testing and will get this ready for the next release.

[riccardodicurti]

Thanks @nicholasio, we look forward to the new release 👍🏻