Skip to content

Stylebook: JavaScript warning when selecting some blocks #58884

@carolinan

Description

@carolinan

Description

In the Site Editor, when you open the Stylebook and select the table, search, columns, audio, media & text blocks,
this JavaScript warning shows:
react-dom.js?ver=18.2.0:73 Warning: NaNis an invalid value for theminHeight css style property.

Warning jquery-migrate.js?ver=3.4.1:104 JQMIGRATE: Migrate is installed with logging active, version 3.4.1 react-dom.js?ver=18.2.0:29850 Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools warning.js?ver=076655dc9e35a2390851:78 wp.components.Theme: The background color ("#f9f9f9") does not have sufficient contrast against the accent color ("#ffffff"). warning @ warning.js?ver=076655dc9e35a2390851:78 warnContrastIssues @ components.js?ver=9a812780592a1d78379b:81252 generateThemeVariables @ components.js?ver=9a812780592a1d78379b:81226 (anonymous) @ components.js?ver=9a812780592a1d78379b:81344 mountMemo @ react-dom.js?ver=18.2.0:17235 useMemo @ react-dom.js?ver=18.2.0:17680 useMemo @ react.js?ver=18.2.0:1640 Theme @ components.js?ver=9a812780592a1d78379b:81344 renderWithHooks @ react-dom.js?ver=18.2.0:16315 mountIndeterminateComponent @ react-dom.js?ver=18.2.0:20084 beginWork @ react-dom.js?ver=18.2.0:21597 beginWork$1 @ react-dom.js?ver=18.2.0:27436 performUnitOfWork @ react-dom.js?ver=18.2.0:26567 workLoopSync @ react-dom.js?ver=18.2.0:26476 renderRootSync @ react-dom.js?ver=18.2.0:26444 performConcurrentWorkOnRoot @ react-dom.js?ver=18.2.0:25748 workLoop @ react.js?ver=18.2.0:2653 flushWork @ react.js?ver=18.2.0:2626 performWorkUntilDeadline @ react.js?ver=18.2.0:2920 warning.js?ver=076655dc9e35a2390851:78 wp.components.Theme: The background color provided ("#f9f9f9") cannot generate a set of grayscale foreground colors with sufficient contrast. Try adjusting the color to be lighter or darker. warning @ warning.js?ver=076655dc9e35a2390851:78 warnContrastIssues @ components.js?ver=9a812780592a1d78379b:81252 generateThemeVariables @ components.js?ver=9a812780592a1d78379b:81226 (anonymous) @ components.js?ver=9a812780592a1d78379b:81344 mountMemo @ react-dom.js?ver=18.2.0:17235 useMemo @ react-dom.js?ver=18.2.0:17680 useMemo @ react.js?ver=18.2.0:1640 Theme @ components.js?ver=9a812780592a1d78379b:81344 renderWithHooks @ react-dom.js?ver=18.2.0:16315 mountIndeterminateComponent @ react-dom.js?ver=18.2.0:20084 beginWork @ react-dom.js?ver=18.2.0:21597 beginWork$1 @ react-dom.js?ver=18.2.0:27436 performUnitOfWork @ react-dom.js?ver=18.2.0:26567 workLoopSync @ react-dom.js?ver=18.2.0:26476 renderRootSync @ react-dom.js?ver=18.2.0:26444 performConcurrentWorkOnRoot @ react-dom.js?ver=18.2.0:25748 workLoop @ react.js?ver=18.2.0:2653 flushWork @ react.js?ver=18.2.0:2626 performWorkUntilDeadline @ react.js?ver=18.2.0:2920 Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". Fetch finished loading: GET "". react-dom.js?ver=18.2.0:73 Warning: `NaN` is an invalid value for the `minHeight` css style property. at iframe at Iframe (http://64.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:20605:3) at IframeIfReady (http://64.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:20759:71) at div at Disabled (http://64.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:61076:3) at ScaledBlockPreview (http://64.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:22281:3) at div at AutoBlockPreview (http://64.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:22365:65) at BlockRefsProvider (http://64.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:17776:3) at Provider (http://64.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:36533:3) at http://64.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:19222:5 at http://64.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:18775:5 at WithRegistryProvider(Component) at BlockPreview (http://64.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:22404:3) at div at div at http://64.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:14675:47 at UnconnectedSpacer (http://64.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:29043:23) at BlockPreviewPanel (http://64.local/wp-includes/js/dist/edit-site.js?ver=a327e2aa8c782b993946:21086:3) at ScreenBlock (http://64.local/wp-includes/js/dist/edit-site.js?ver=a327e2aa8c782b993946:21226:3) at div at MotionComponent (http://64.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:18531:46) at UnconnectedNavigatorScreen (http://64.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:68889:65) at GlobalStylesNavigationScreen (http://64.local/wp-includes/js/dist/edit-site.js?ver=a327e2aa8c782b993946:28301:3) at div at http://64.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:14675:47 at UnconnectedNavigatorProvider (http://64.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:68677:7) at GlobalStylesUI (http://64.local/wp-includes/js/dist/edit-site.js?ver=a327e2aa8c782b993946:28426:83) at div at UnforwardedPanel (http://64.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:69565:3) at div at SlotComponent (http://64.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:35967:5) at Slot at http://64.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:36519:3 at ComplementaryAreaSlot (http://64.local/wp-includes/js/dist/edit-site.js?ver=a327e2aa8c782b993946:9235:3) at div at NavigableRegion (http://64.local/wp-includes/js/dist/edit-site.js?ver=a327e2aa8c782b993946:9404:3) at div at div at div at InterfaceSkeleton (http://64.local/wp-includes/js/dist/edit-site.js?ver=a327e2aa8c782b993946:9470:3) at BlockContextProvider (http://64.local/wp-includes/js/dist/block-editor.js?ver=0930e041f64667e446db:16486:3) at EntityProvider (http://64.local/wp-includes/js/dist/core-data.js?ver=77370c9a15a7db2ae084:6359:3) at EntityProvider (http://64.local/wp-includes/js/dist/core-data.js?ver=77370c9a15a7db2ae084:6359:3) at Editor (http://64.local/wp-includes/js/dist/edit-site.js?ver=a327e2aa8c782b993946:32400:3) at div at MotionComponent (http://64.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:18531:46) at div at MotionComponent (http://64.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:18531:46) at Resizable (http://64.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:70880:28) at UnforwardedResizableBox (http://64.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:71907:3) at ResizableFrame (http://64.local/wp-includes/js/dist/edit-site.js?ver=a327e2aa8c782b993946:34189:3) at ErrorBoundary (http://64.local/wp-includes/js/dist/edit-site.js?ver=a327e2aa8c782b993946:32589:5) at div at MotionComponent (http://64.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:18531:46) at div at div at div at Layout (http://64.local/wp-includes/js/dist/edit-site.js?ver=a327e2aa8c782b993946:36918:3) at RouterProvider (http://64.local/wp-includes/js/dist/router.js?ver=3b1ce9f5a7a3f2533c5a:910:3) at GlobalStylesProvider (http://64.local/wp-includes/js/dist/edit-site.js?ver=a327e2aa8c782b993946:12854:3) at SlotFillProvider (http://64.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:36376:3) at provider_SlotFillProvider (http://64.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:36398:5) at Provider (http://64.local/wp-includes/js/dist/components.js?ver=9a812780592a1d78379b:36533:3) at App (http://64.local/wp-includes/js/dist/edit-site.js?ver=a327e2aa8c782b993946:37183:55) printWarning @ react-dom.js?ver=18.2.0:73 error @ react-dom.js?ver=18.2.0:47 warnStyleValueIsNaN @ react-dom.js?ver=18.2.0:2715 warnValidStyle @ react-dom.js?ver=18.2.0:2739 setValueForStyles @ react-dom.js?ver=18.2.0:2803 setInitialDOMProperties @ react-dom.js?ver=18.2.0:9698 setInitialProperties @ react-dom.js?ver=18.2.0:9931 finalizeInitialChildren @ react-dom.js?ver=18.2.0:10960 completeWork @ react-dom.js?ver=18.2.0:22203 completeUnitOfWork @ react-dom.js?ver=18.2.0:26606 performUnitOfWork @ react-dom.js?ver=18.2.0:26578 workLoopSync @ react-dom.js?ver=18.2.0:26476 renderRootSync @ react-dom.js?ver=18.2.0:26444 performConcurrentWorkOnRoot @ react-dom.js?ver=18.2.0:25748 workLoop @ react.js?ver=18.2.0:2653 flushWork @ react.js?ver=18.2.0:2626 performWorkUntilDeadline @ react.js?ver=18.2.0:2920 jquery.js?ver=3.7.1:9940 XHR finished loading: POST "http://64.local/wp-admin/admin-ajax.php". send @ jquery.js?ver=3.7.1:9940 ajax @ jquery.js?ver=3.7.1:9521 (anonymous) @ jquery-migrate.js?ver=3.4.1:379 obj. @ jquery-migrate.js?ver=3.4.1:181 connect @ heartbeat.js?ver=6.4.3:435 (anonymous) @ heartbeat.js?ver=6.4.3:530 setTimeout (async) scheduleNextTick @ heartbeat.js?ver=6.4.3:528 focused @ heartbeat.js?ver=6.4.3:567 (anonymous) @ heartbeat.js?ver=6.4.3:213 dispatch @ jquery.js?ver=3.7.1:5145 elemData.handle @ jquery.js?ver=3.7.1:4949 jquery.js?ver=3.7.1:9940 XHR finished loading: POST "http://64.local/wp-admin/admin-ajax.php". send @ jquery.js?ver=3.7.1:9940 ajax @ jquery.js?ver=3.7.1:9521 (anonymous) @ jquery-migrate.js?ver=3.4.1:379 obj. @ jquery-migrate.js?ver=3.4.1:181 connect @ heartbeat.js?ver=6.4.3:435 (anonymous) @ heartbeat.js?ver=6.4.3:530 setTimeout (async) scheduleNextTick @ heartbeat.js?ver=6.4.3:528 focused @ heartbeat.js?ver=6.4.3:567 (anonymous) @ heartbeat.js?ver=6.4.3:213 dispatch @ jquery.js?ver=3.7.1:5145 elemData.handle @ jquery.js?ver=3.7.1:4949

Step-by-step reproduction instructions

Activate a block theme.
Open the Site Editor.
Open the stylebook.
Select any of these blocks: table, search, columns, audio, media & text

Look for any JavaScript warnings in the browser developer tools.

Screenshots, screen recording, code snippet

No response

Environment info

Chrome
WordPress 6.4.3, with and without Gutenberg
6.5-alpha-56966-src with and without Gutenberg

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

Metadata

Metadata

Assignees

Labels

[Feature] Site EditorRelated to the overarching Site Editor (formerly "full site editing")[Status] In ProgressTracking issues with work in progress[Status] Needs More InfoFollow-up required in order to be actionable.[Type] BugAn existing feature does not function as intended

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions