-
Notifications
You must be signed in to change notification settings - Fork 1
Group and Cover styling with support for custom start end spacing using Spacer block
Stian edited this page Oct 31, 2024
·
1 revision
.wp-block-group.has-background {
padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}
/* Default start/end block padding for groups not starting or ending with a spacer block */
.wp-block-group.has-background:not(:has(.wp-block-t2-spacer:first-child, .wp-block-spacer:first-child)),
.wp-block-group.has-background.alignwide:not(:has(.wp-block-t2-spacer:first-child, .wp-block-spacer:first-child)) {
padding-block-start: var(--wp--preset--spacing--50);
}
.wp-block-group.has-background:not(:has(.wp-block-t2-spacer:last-child, .wp-block-spacer:last-child)),
.wp-block-group.has-background.alignwide:not(:has(.wp-block-t2-spacer:last-child, .wp-block-spacer:last-child)) {
padding-block-end: var(--wp--preset--spacing--50);
}
/* Extra default start/end block padding for full width groups not starting or ending with a spacer block */
.wp-block-group.has-background.alignfull:not(:has(.wp-block-t2-spacer:first-child, .wp-block-spacer:first-child)) {
padding-block-start: var(--wp--preset--spacing--80);
}
.wp-block-group.has-background.alignfull:not(:has(.wp-block-t2-spacer:last-child, .wp-block-spacer:last-child)) {
padding-block-end: var(--wp--preset--spacing--80);
}
.wp-block-cover {
box-sizing: border-box;
min-height: unset;
padding: unset;
overflow: unset;
}
.wp-block-cover__inner-container {
width: 100% !important; /* Do not let overriding content position change the inner container placement */
padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}
/* Default start/end block padding for covers not starting or ending with a spacer block */
.wp-block-cover__inner-container:not(:has(.wp-block-t2-spacer:first-child, .wp-block-spacer:first-child)),
.wp-block-cover.alignwide .wp-block-cover__inner-container:not(:has(.wp-block-t2-spacer:first-child, .wp-block-spacer:first-child)) {
padding-block-start: var(--wp--preset--spacing--50);
}
.wp-block-cover__inner-container:not(:has(.wp-block-t2-spacer:last-child, .wp-block-spacer:last-child)),
.wp-block-cover.alignwide .wp-block-cover__inner-container:not(:has(.wp-block-t2-spacer:last-child, .wp-block-spacer:last-child)) {
padding-block-end: var(--wp--preset--spacing--50);
}
/* Extra default start/end block padding for full width covers not starting or ending with a spacer block */
.wp-block-cover.alignfull .wp-block-cover__inner-container:not(:has(.wp-block-t2-spacer:first-child, .wp-block-spacer:first-child)) {
padding-block-start: var(--wp--preset--spacing--80);
}
.wp-block-cover.alignfull .wp-block-cover__inner-container:not(:has(.wp-block-t2-spacer:last-child, .wp-block-spacer:last-child)) {
padding-block-end: var(--wp--preset--spacing--80);
}