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.

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

Can't import @wordpress/block-editor FontFamilyControl component #65655

Closed
2 tasks done
mr660 opened this issue Sep 25, 2024 · 1 comment · Fixed by #65660
Closed
2 tasks done

Can't import @wordpress/block-editor FontFamilyControl component #65655

mr660 opened this issue Sep 25, 2024 · 1 comment · Fixed by #65660
Assignees
Labels
[Package] Block editor /packages/block-editor [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@mr660
Copy link

mr660 commented Sep 25, 2024

Description

I'm creating custom block for rendering chart and i'm trying to create selector for font families for certain elements. I'm trying to follow [this] (https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/components/font-family) readme with no success.

in edit.js file

import {InspectorControls, FontFamilyControl} from '@wordpress/block-editor';

export default function Edit({attributes, setAttributes}) {
    return (
        <>
            <InspectorControls>
                <FontFamilyControl
                    value={''}
                    onChange={() => {
                    }}
                />
            </InspectorControls>
        </>
}

I get error saying:

edit.js:89 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Edit`.

Step-by-step reproduction instructions

  1. Create custom block in theme or plugin and use code above

Environment info

Wordpress 6.6.2

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
@mr660 mr660 added the [Type] Bug An existing feature does not function as intended label Sep 25, 2024
@Mamaduka Mamaduka added the [Package] Block editor /packages/block-editor label Sep 25, 2024
@Mamaduka
Copy link
Member

Try using __experimentalFontFamilyControl. The component is an experiment, and it's currently exported as one.

import { InspectorControls, __experimentalFontFamilyControl as FontFamilyControl } from '@wordpress/block-editor';

I'll create a PR to fix the examples in README docs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Block editor /packages/block-editor [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants