Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Font size control is broken in some classic themes on 6.6 alpha #62222

Closed
carolinan opened this issue Jun 3, 2024 · 5 comments
Closed

Font size control is broken in some classic themes on 6.6 alpha #62222

carolinan opened this issue Jun 3, 2024 · 5 comments
Labels
[Feature] Typography Font and typography-related issues and PRs [Type] Bug An existing feature does not function as intended

Comments

@carolinan
Copy link
Contributor

carolinan commented Jun 3, 2024 •
edited
Loading

Description

On 6.6-alpha-57778-src without Gutenberg active.

When I activate a classic theme like Twenty Fourteen or Twenty Thirteen, and add any block with a font size option, then the font size control is empty. Clicking on the font size control and trying to enter a custom value causes a JavaScript error.

If I activate a classic theme that has add_theme_support('editor-font-sizes', ...) for example Twenty Twenty-One, then the error is not present.

react-dom.development.js:22873 Uncaught TypeError: fontSizeValue?.startsWith is not a function
    at styleToAttributes (typography.js:56:38)
    at onChange (typography.js:127:18)
    at setFontSize (typography-panel.js:217:3)
    at onChange (index.tsx:216:19)
    at Object.handleOnQuantityChange [as onChange] (index.tsx:145:15)
    at Object.onChange [as onChangeHandler] (utils.ts:101:9)
    at reducer.ts:212:21
    at commitHookEffectListMount (react-dom.development.js:23184:26)
    at commitLayoutEffectOnFiber (react-dom.development.js:23302:17)
    at commitLayoutMountEffects_complete (react-dom.development.js:24722:9)
styleToAttributes @ typography.js:56
onChange @ typography.js:127
setFontSize @ typography-panel.js:217
onChange @ index.tsx:216
handleOnQuantityChange @ index.tsx:145
onChange @ utils.ts:101
(anonymous) @ reducer.ts:212
commitHookEffectListMount @ react-dom.development.js:23184
commitLayoutEffectOnFiber @ react-dom.development.js:23302
commitLayoutMountEffects_complete @ react-dom.development.js:24722
commitLayoutEffects_begin @ react-dom.development.js:24708
commitLayoutEffects @ react-dom.development.js:24646
commitRootImpl @ react-dom.development.js:26857
commitRoot @ react-dom.development.js:26716
performSyncWorkOnRoot @ react-dom.development.js:26151
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26235
finishEventHandler @ react-dom.development.js:3976
batchedUpdates @ react-dom.development.js:3994
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
Show 23 more frames
Show less
react-dom.development.js:18704 The above error occurred in the <ForwardRef(InputField)> component:

    at InputField (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:25097:3)
    at BaseContextSystemProvider (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:14130:3)
    at div
    at http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:1004:66
    at div
    at http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:1004:66
    at UnforwardedView (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:46314:3)
    at UnconnectedFlex (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:20044:53)
    at http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:1004:66
    at InputBase (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:24990:159)
    at div
    at http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:1004:66
    at div
    at http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:1004:66
    at UnconnectedBaseControl (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:6445:65)
    at UnforwardedInputControl (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:24827:100)
    at http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:1004:66
    at UnforwardedNumberControl (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:30628:100)
    at http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:1004:66
    at UnforwardedUnitControl (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:43912:100)
    at div
    at http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:1004:66
    at UnforwardedView (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:46314:3)
    at UnconnectedFlexItem (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:19926:75)
    at div
    at http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:1004:66
    at UnforwardedView (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:46314:3)
    at UnconnectedFlex (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:20044:53)
    at div
    at fieldset
    at http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:1004:66
    at UnforwardedFontSizePicker (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:21349:5)
    at div
    at http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:1004:66
    at UnforwardedView (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:46314:3)
    at UnconnectedToolsPanelItem (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:42079:63)
    at RegisterResetAll (http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:35764:3)
    at ToolsPanelInspectorControl (http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:35782:3)
    at StyleProvider (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:37756:5)
    at Fill (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:36254:5)
    at Fill
    at InspectorControlsTypographyFill
    at StyleProvider (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:37756:5)
    at InspectorControlsFill (http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:35728:3)
    at TypographyInspectorControl (http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:59672:3)
    at TypographyPanel (http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:24995:7)
    at TypographyPanel (http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:59690:3)
    at BlockStyleControls (http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:58955:3)
    at http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:60752:105
    at http://localhost:8889/wp-includes/js/dist/editor.js?ver=f9d359dd476852b6455f:24076:89
    at FilteredComponentRenderer (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:24269:9)
    at EditWithGeneratedProps (http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:4838:5)
    at BlockEdit (http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:4920:3)
    at BlockCrashBoundary (http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:5935:5)
    at BlockListBlock (http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:6319:10)
    at http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:57882:5
    at http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:60821:111
    at FilteredComponentRenderer (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:24269:9)
    at http://localhost:8889/wp-includes/js/dist/data.js?ver=90ecf22ef8f2c562004a:832:82
    at BlockListBlockProvider (http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:6669:5)
    at Items (http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:7085:3)
    at BlockListItems
    at div
    at Root (http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:6979:3)
    at BlockList
    at RecursionProvider (http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:44044:3)
    at StyleProvider (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:37756:5)
    at body
    at iframe
    at div
    at div
    at Iframe (http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:27803:3)
    at IframeIfReady (http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:28059:83)
    at div
    at BlockTools (http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:15322:3)
    at ExperimentalBlockCanvas (http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:3491:3)
    at div
    at Resizable (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:55044:28)
    at UnforwardedResizableBox (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:34498:3)
    at ResizableEditor (http://localhost:8889/wp-includes/js/dist/editor.js?ver=f9d359dd476852b6455f:21302:3)
    at div
    at VisualEditor (http://localhost:8889/wp-includes/js/dist/editor.js?ver=f9d359dd476852b6455f:23488:3)
    at SlotComponent (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:36994:5)
    at Slot
    at UnforwardedSlot (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:36774:5)
    at EditCanvasContainerSlotSlot
    at div
    at NavigableRegion (http://localhost:8889/wp-includes/js/dist/editor.js?ver=f9d359dd476852b6455f:31271:3)
    at div
    at div
    at div
    at InterfaceSkeleton (http://localhost:8889/wp-includes/js/dist/editor.js?ver=f9d359dd476852b6455f:31126:3)
    at EditorInterface (http://localhost:8889/wp-includes/js/dist/editor.js?ver=f9d359dd476852b6455f:3475:3)
    at Layout (http://localhost:8889/wp-includes/js/dist/edit-post.js?ver=2b682855cd2a8eed75df:881:3)
    at ErrorBoundary (http://localhost:8889/wp-includes/js/dist/editor.js?ver=f9d359dd476852b6455f:4281:5)
    at BlockRefsProvider (http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:43428:3)
    at Provider (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:36789:3)
    at http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:43491:5
    at http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:43869:3
    at BlockContextProvider (http://localhost:8889/wp-includes/js/dist/block-editor.js?ver=3b6ae300af0e34ec145f:3946:3)
    at EntityProvider (http://localhost:8889/wp-includes/js/dist/core-data.js?ver=86fdb66e30148fc4dc3c:1740:3)
    at EntityProvider (http://localhost:8889/wp-includes/js/dist/core-data.js?ver=86fdb66e30148fc4dc3c:1740:3)
    at http://localhost:8889/wp-includes/js/dist/editor.js?ver=f9d359dd476852b6455f:20569:3
    at http://localhost:8889/wp-includes/js/dist/editor.js?ver=f9d359dd476852b6455f:21228:3
    at SlotFillProvider (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:36426:3)
    at SlotFillProvider (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:36939:3)
    at Provider (http://localhost:8889/wp-includes/js/dist/components.js?ver=bc02623519e2febaa840:36789:3)
    at Editor (http://localhost:8889/wp-includes/js/dist/edit-post.js?ver=2b682855cd2a8eed75df:2343:11)

Step-by-step reproduction instructions

Activate a classic theme that has not added support for custom font sizes.
Add a text based block like a paragraph and try to select a size.

Screenshots, screen recording, code snippet

empty control

Environment info

No response

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
@carolinan carolinan added the [Type] Bug An existing feature does not function as intended label Jun 3, 2024
@t-hamano
Copy link
Contributor

t-hamano commented Jun 3, 2024

From my understanding, this PR in core should resolve the issue once it is committed: WordPress/wordpress-develop#6616

As far as I've researched, this issue occurs when there are no available font presets, so I believe it's not a problem that only occurs with WP6.6, but can occur with any theme. See #62072 for details.

CC: @ajlende for visibility

@t-hamano t-hamano added the [Feature] Typography Font and typography-related issues and PRs label Jun 3, 2024
@carolinan
Copy link
Contributor Author

Thank you, since no one else was able to reproduce it I wasn't sure if I was imagining it. I will close this.
@ajlende please notify the theme task force in the core-themes Slack channel when we can continue working on the font size related theme patches.

@espiat
Copy link

espiat commented Jul 18, 2024

Have the same issue in 4 WordPress Sites after updating to 6.6

i inspected the problem.

so in Editor -> Blocks -> Navigation i cant select "default" it is 1rem and is the old setting.

i can select all other font sizes but not default. And default was set before update.

Here is a video:
https://www.youtube.com/watch?v=qnD2Y9PKLxg

@carolinan
Copy link
Contributor Author

@espiat Hi, the video is set to private.
I am not sure this is the same issue since it sounds like only one size is not working, while in this issue, the control was empty.

@espiat
Copy link

espiat commented Jul 19, 2024

Hi.

Sorry. I forgot to make the video public.

It was also my mistake that I hadn't set the theme to standard.

The error was in the greenshift theme. It was fixed yesterday.
https://wordpress.org/themes/greenshift/

Thank you for your efforts.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Feature] Typography Font and typography-related issues and PRs [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@espiat @carolinan @t-hamano