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

Duplicate generated classNames when using useBlockProps.save() #26672

Closed
fabiankaegy opened this issue Nov 3, 2020 · 2 comments · Fixed by #27189
Closed

Duplicate generated classNames when using useBlockProps.save() #26672

fabiankaegy opened this issue Nov 3, 2020 · 2 comments · Fixed by #27189
Assignees
Labels
[Feature] Blocks Overall functionality of blocks [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended [Type] Regression Related to a regression in the latest release

Comments

@fabiankaegy
Copy link
Member

Describe the bug
When using the useBlockProps.save() function like this:

save: () => {
    return (
        <div {...useBlockProps.save()}>
            Example Block New
        </div>
    )
}

with color in the block supports I get all the auto generated classNames output twice:

<div class="wp-block-example-example-new alignwide has-background has-background" style="background-color:#a26a79">Example Block New</div>

To reproduce
You can replicate it with this Block setup:

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';

const NAMESPACE = 'example';

registerBlockType( `${ NAMESPACE }/example-new`, {
    title: __( 'Example Block (New)', NAMESPACE ),
    description: __( 'Example Block', NAMESPACE ),
    icon: 'smiley',
    category: 'common',
    example: {},
    supports: {
        html: false,
        lightBlockWrapper: true,
        align: true,
        anchor: true,
        color: {
            link: true
        },
    },
    attributes: {},
    transforms: {},
    variations: [],
    edit: () => {
        return (
            <div {...useBlockProps()}>
                <p>Hello World</p>
            </div>
        )
    },
    save: () => {
        return (
            <div {...useBlockProps.save()}>
                Example Block New
            </div>
        )
    }
} );

Expected behavior
The classes should only be generated once.

Editor version (please complete the following information):

  • WordPress version: 5.5.3
  • Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default? [ gutenberg plugin ]
  • If the Gutenberg plugin is installed, which version is it? 9.2.2
@talldan talldan added [Feature] Blocks Overall functionality of blocks [Type] Bug An existing feature does not function as intended labels Nov 4, 2020
@talldan
Copy link
Contributor

talldan commented Nov 4, 2020

I could reproduce using both lightBlockWrapper and the newer apiVersion: 2.

@gziolo gziolo added the [Type] Regression Related to a regression in the latest release label Nov 7, 2020
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Nov 23, 2020
@talldan
Copy link
Contributor

talldan commented Nov 23, 2020

Seems I made a mistake in my previous testing, apiVersion: 2 doesn't have this issue.

#27189 should fix the issue for blocks still using lightBlockWrapper.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Blocks Overall functionality of blocks [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended [Type] Regression Related to a regression in the latest release
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants