Make WordPress Core

Opened 9 months ago

Last modified 9 months ago

#59158 new defect (bug)

Altering Details block styles doubling .wp-block-details class in the output

Reported by: randewoo's profile randewoo Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.3
Component: Formatting Keywords: needs-patch
Focuses: Cc:

Description

By defaut Details block styles outputs styles for inner paragraph like:

.wp-block-details>:not(summary) {
    margin-block-end: 0;
    margin-block-start: var(--wp--style--block-gap);

If I want to change margin-block-start on the block level styles I use:

.wp-block-details>:not(summary) {
    margin-block-start: 0;}

BUT it outputs:

.wp-block-details.wp-block-details>:not(summary) {
    margin-block-start: 0;}

HOWEVER,
If I use the same in the Additional CSS section of Styles Editor it produce expected:

.wp-block-details>:not(summary) {
    margin-block-start: 0;}

Change History (1)

#1 @wildworks
9 months ago

In per block additional CSS via global styles, selectors for block names are automatically added. The following nested selectors will give you the expected results.

& >:not(summary) {
    margin-block-start: 0;
}

For more information, please see the "Per Block Custom CSS" section of this dev note: https://make.wordpress.org/core/2023/03/06/custom-css-for-global-styles-and-per-block/

Note: See TracTickets for help on using tickets.