Gutenberg Text & Media: One

Alternating Media & Text element based on a grid layout. Both the media and text elements are constrained to 1:1 (square) aspect ratio, with the background colour alternating between primary and secondary. Used in Primary Advantage school websites. This should also be viewed alongside "Introduction: One".

Date Published:

September 25, 2025

Plugin Requirements:

None

Template Type:

Gutenberg

Categories:

Cards, Content Section, Features, Galleries, Hero Sections, Introductions, Process

Sample heading

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Sample heading

CSS

/* ---- 2.1 MEDIA AND TEXT ONE ---- */
.wp-block-media-text>.wp-block-media-text__media {
	height:100%;
	width: calc(100% - (var(--space-m) / 2)) !important; /* override inline 50% width */
}
.wp-block-media-text>.wp-block-media-text__media img {
	height:100%;
	object-fit: cover;
	object-position: center;
}
.wp-block-media-text>.wp-block-media-text__content {
	aspect-ratio: 1 / 1; /* make them square */
	width: calc(100% - (var(--space-m) / 2)) !important; /* override inline 50% width */
	background:var(--primary);
	border-radius:var(--radius);
	padding:var(--space-l)!important;
	display:flex;
	flex-direction:column;
	gap:var(--content-gap);
	margin-left:calc(var(--space-m) / 2);
}
.has-media-on-the-right>.wp-block-media-text__content {
	background:var(--secondary);
	margin-left:0;
	margin-right:calc(var(--space-m) / 2);
}
.has-media-on-the-right>.wp-block-media-text__media {
	margin-left:calc(var(--space-m) / 2)!important;
}
.wp-block-media-text__content :is(h1,h2,h3,h4,h5,h6,p) {
	color:var(--white)
}
.wp-block-media-text > .wp-block-media-text__content p {
	font-size:var(--text-l);
	line-height:var(--text-line-height);
}
.wp-block-media-text {
  margin-top: var(--space-m)!important;
}
@media (max-width: 999px) {
	.wp-block-media-text {
		display:flex!important;
		flex-direction:column;
	}
	.wp-block-media-text>.wp-block-media-text__media img {
		border-radius:var(--radius) var(--radius) 0 0;
	}
	.wp-block-media-text>.wp-block-media-text__media {
		width:100%!important;
		margin:0!important;
	}
	.wp-block-media-text>.wp-block-media-text__content {
		aspect-ratio:auto;
		border-radius:0 0 var(--radius) var(--radius);
		width:100%!important;
		margin:0!important;
	}
	.has-media-on-the-right>.wp-block-media-text__content {
		order:1;
	}
	
}

PHP (functions.php)

Notes

This template uses .postid-4272 an the unique identifier. It can also be used in conjunction with Introduction: One