Copy/Paste Styles can give a Block a 'style' that it isn't allowed to have

[MadtownLems]

Description

When you "Copy Styles" and "Paste Styles" from one block to another, you can give the destination block a style it shouldn't support. For example, with TT4, you can make a Paragraph be "With Asterisk"

Step-by-step reproduction instructions

Using TT4:

1. Create a Post with a Heading and a Paragraph Block.
2. Give the Heading block the style "With Asterisk"
3. "Copy Styles" on the Heading
4. "Paste Styles" to the Paragraph
5. See that the Paragraph now has the style "With Asterisk", even though there's no UI for it.

Screenshots, screen recording, code snippet

Environment info

6.4.3 and 6.5-RC-4.
With and without latest Gutenberg plugin.

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

[ndiego]

The "Copy styles" option also copies any custom CSS classes and the asterisk is added by the .is-style-asterisk class. Under the hood, block styles are just classes.

So I am not sure if this is a bug. Perhaps the .is-style-asterisk class should have been scoped to headings in TT4. I could see a scenario where I have added a few custom utility classes to a block and then it would be nice if those get copied over.

Any thoughts on this @jameskoster or @kevin940726? I believe you both were involved in the original implementation.

[t-hamano]

I think this issue should be fixed on the TT4 theme side, and the block name should be included in the inline style selector.

The following block styles, currently defined in this section, affect all blocks.

• is-style-arrow-icon-details
• is-style-pill
• is-style-asterisk

I would like to file a core ticket regarding this issue.

[t-hamano]

Core ticket: https://core.trac.wordpress.org/ticket/60877

[jameskoster]

The "Copy styles" option also copies any custom CSS classes

I think this is a good point to discuss.

I don't have a strong feeling, but anecdotally the current behavior feels a bit unexpected to me. I would anticipate 'Copy styles' to only capture styles added via design tools in the Inspector UI. Applying a custom css class to another block feels like something to do manually.

Is the current behavior definitely what we want?

[annezazu]

Agreed -- I wouldn't expect a custom CSS class to be moved over and would want it to only snag what's in the design tools. Curious to hear from others though.

[ndiego]

I wouldn't expect a custom CSS class to be moved over and would want it to only snag what's in the design tools.

That is definitely the more expected approach, and I agree with it. Just curious if the CSS classes were explicitly included for some reason. Seems like this was intentional at one point.

[t-hamano]

If we want to avoid copying custom CSS classes, we can probably just remove this line.

gutenberg/packages/block-editor/src/components/use-paste-styles/index.js

Line 64 in 1655ed0

className: hasCustomClassNameSupport,

The ability to paste styles was added in #45477, but this comment also seems to mention class names.

@kevin940726, Do you know what the possible problems are if we exclude CSS classes from pasting styles?

[MadtownLems]

There are lots of things to consider here, and I'm sure pros and cons to each approach depending on how people are using custom classes. I'm wondering about something like: Copy custom CSS classes by default, but only copy "is-style-*" classes if the target block supports that specific style.

…

On Tue, Apr 2, 2024, 9:00 PM Aki Hamano ***@***.***> wrote: If we want to avoid copying custom CSS classes, we can probably just remove this line. https://github.com/WordPress/gutenberg/blob/1655ed0610408f8ec18760033429e4aea1380dfe/packages/block-editor/src/components/use-paste-styles/index.js#L64 The ability to paste styles was added in #45477 <#45477>, but this comment <#45477 (comment)> also seems to mention class names. @kevin940726 <https://github.com/kevin940726>, Do you know what the possible problems are if we exclude CSS classes from pasting styles? — Reply to this email directly, view it on GitHub <#60352 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHGYBOX7T67Y2WYSSFOJS3Y3NPFNAVCNFSM6AAAAABFSF45ACVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMZTGQYDAOBVGQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[t-hamano]

When a block style is selected, the class name "is-style-{slug} is added to the additional CSS class, but it is difficult to determine if this is related to the block style or if it was added intentionally by the user.

There are several possible approaches, do you have any ideas?

1. Copy all additional CSS classes (Current specification): This may be useful if the user uses a common class name for all blocks and wants to apply that class name to the pasted block as well. However, as this issue originally raised, unintended styles may be applied to the block being pasted.
2. Don't copy all additional CSS classes: This prevents the problem originally raised by this issue, but may be inconvenient if users use common class names for all blocks.
3. Conditionally copy additional CSS classes: This is probably the most complex. Perhaps we need a rule like this:
   • Scans the copied block for additional CSS classes and extracts additional CSS classes with the is-style- prefix.
   • If the pasted block does not have a style that matches that CSS class, remove only that CSS class and inherit the CSS classes.