Gutenberg: Emotion integration

[gracelauren]

I am having trouble setting up emotion with WP and custom Gutenberg blocks. It initially renders but on the re-render I am getting an error. I was wondering if there is any specific setup for emotion with gutenberg and wp?

Here is my babelrc file

and my webpack.config

[ItsJonQ]

Heya @gracelauren !

Hmm 🤔. Does this setup work without the Emotion babel plugins and presets?
I'm guessing it should...

(Apologies if you've tried this already. Just trying to troubleshoot)

Something that is sticking out to me, is perhaps a conflict with the wp.element.createElement pragma and Emotion's babel preset.

Taking a look... it looks like they're doing something with jsx within their preset:
https://github.com/emotion-js/emotion/blob/master/packages/babel-preset-css-prop/src/index.js#L1

That would be my guess.
I'm unsure of a potential solution though.

For some context.. Within the project, the @wordpress/components package uses Emotion. However it's very much in an experimental. The emotion APIs and build tools aren't used outside that package.

[chrisvanpatten]

I think technically this would be outside the scope of the type of requests that we'd normally handle in this repo as it's more of help request.

That said… I've had success using Emotion in Gutenberg blocks but have avoided the use of the emotion Babel preset.

Without the Babel preset, you can use the className prop instead of css to set your styles. For example:

import { css, cx } from 'emotion';

const Block = ( props ) => {
    const {
        attributes: {
            isToggled,
        },
        setAttributes,
    } = props;

    const styles = {
        selector: css`
            background: red;
            color: white;
        `,
        selectorToggled: css`
            background: blue;
        `,
    };

    return (
        <div
            className={ cx(
                styles.selector,
                { [ styles.selectorToggled ]: isToggled },
            ) }
            onClick={ () => setAttributes( { isToggled: ! isToggled } ) }
        >
            Wow!
        </div>
    );
};

export default Block;

There might be limitations in this approach but it's worked really well for us. Hope this helps!

[gracelauren]

Thank you for your help, @ItsJonQ and @chrisvanpatten I will this out now
Also apologies, I had tagged a Help Request but looks like it didn't set, thanks for resetting this for me

[chrisvanpatten]

@gracelauren No problem :) Since technically we try to discourage help requests here I'll close this out (Stack Exchange or the WordPress forums are typically better resources) but if you have questions feel free to comment on the closed issue and tag me. And if there's reason to reopen (e.g. some kind of incompatibility with the core Gutenberg code that can be addressed on our end) we can reopen as well!