Skip to content

Group and Cover styling with support for custom start end spacing using Spacer block

Stian edited this page Oct 31, 2024 · 1 revision

group.css

.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);
}

cover.css

.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);
}
Clone this wiki locally