Bundled Themes: Update Twenty Twenty-Five for 6.7 RC 2.

This merges the latest improvements to the Twenty Twenty-Five theme from GitHub into WordPress-Develop for 6.7 RC 2

A full list of changes can be found on GitHub: [WordPress/twentytwentyfive@7dfa99f...b5b0475 WordPress/twentytwentyfive@7dfa99f1...b5b0475f].

Props juanfra, poena.
See #62310.




git-svn-id: https://develop.svn.wordpress.org/trunk@59314 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-content/themes/twentytwentyfive/patterns/banner-poster.php

@@ -18,16 +18,23 @@
 	<div class="wp-block-group alignwide" style="min-height:100vh">
 		<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|50"}}}} -->
 		<div class="wp-block-columns alignwide">
-			<!-- wp:column {"width":"66.66%"} -->
-			<div class="wp-block-column" style="flex-basis:66.66%">
+			<!-- wp:column {"width":"80%"} -->
+			<div class="wp-block-column" style="flex-basis:80%">
 				<!-- wp:heading {"textAlign":"left","align":"wide","style":{"typography":{"fontSize":"12vw","lineHeight":"0.9","fontStyle":"normal","fontWeight":"300"}}} -->
-				<h2 class="wp-block-heading alignwide has-text-align-left" style="font-size:12vw;font-style:normal;font-weight:300;line-height:0.9"><?php echo esc_html_x( '“Stories, historias, iсторії, iστορίες”', 'Sample heading in four languages.', 'twentytwentyfive' ); ?></h2>
+				<h2 class="wp-block-heading alignwide has-text-align-left" style="font-size:12vw;font-style:normal;font-weight:300;line-height:0.9">
+					<?php
+					echo wp_kses_post(
+						/* translators: This string contains the word "Stories" in four different languages with the first item in the locale's language. */
+						_x( '“Stories, <span lang="es">historias</span>, <span lang="uk">iсторії</span>, <span lang="el">iστορίες</span>”', 'Placeholder heading in four languages.', 'twentytwentyfive' )
+					);
+					?>
+				</h2>
 				<!-- /wp:heading -->
 			</div>
 			<!-- /wp:column -->
 
-			<!-- wp:column {"width":"33.33%"} -->
-			<div class="wp-block-column" style="flex-basis:33.33%">
+			<!-- wp:column {"width":"20%"} -->
+			<div class="wp-block-column" style="flex-basis:20%">
 				<!-- wp:paragraph {"align":"right"} -->
 				<p class="has-text-align-right"><?php echo esc_html_x( 'Aug 08—10 2025', 'Example event date in pattern.', 'twentytwentyfive' ); ?><br><?php esc_html_e( 'Fuego Bar, Mexico City', 'twentytwentyfive' ); ?></p>
 				<!-- /wp:paragraph -->
@@ -38,16 +45,16 @@
 
 		<!-- wp:columns {"verticalAlignment":"bottom","isStackedOnMobile":false,"align":"wide"} -->
 		<div class="wp-block-columns alignwide are-vertically-aligned-bottom is-not-stacked-on-mobile">
-			<!-- wp:column {"verticalAlignment":"bottom","width":"66.66%"} -->
-			<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:66.66%">
+			<!-- wp:column {"verticalAlignment":"bottom","width":"80%"} -->
+			<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:80%">
 				<!-- wp:heading {"textAlign":"left","align":"wide","style":{"typography":{"lineHeight":"0.9","fontStyle":"normal","fontWeight":"300"}},"fontSize":"xx-large"} -->
 				<h2 class="wp-block-heading alignwide has-text-align-left has-xx-large-font-size" style="font-style:normal;font-weight:300;line-height:0.9"><?php esc_html_e( 'Let’s hear them.', 'twentytwentyfive' ); ?></h2>
 				<!-- /wp:heading -->
 			</div>
 			<!-- /wp:column -->
 
-			<!-- wp:column {"verticalAlignment":"bottom","width":"33.33%"} -->
-			<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:33.33%">
+			<!-- wp:column {"verticalAlignment":"bottom","width":"20%"} -->
+			<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:20%">
 				<!-- wp:paragraph {"align":"right"} -->
 				<p class="has-text-align-right"><?php esc_html_e( '#stories', 'twentytwentyfive' ); ?></p>
 				<!-- /wp:paragraph -->

src/wp-content/themes/twentytwentyfive/patterns/cta-events-list.php

@@ -61,7 +61,14 @@
 			<div class="wp-block-group" style="border-top-color:var(--wp--preset--color--accent-6);border-top-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:group {"layout":{"type":"constrained"}} -->
 				<div class="wp-block-group">
 					<!-- wp:heading {"level":3} -->
-					<h3 class="wp-block-heading"><?php echo esc_html_x( '“Stories, historias, iсторії, iστορίες”', 'Placeholder heading in four languages.', 'twentytwentyfive' ); ?></h3>
+					<h3 class="wp-block-heading">
+						<?php
+						echo wp_kses_post(
+							/* translators: This string contains the word "Stories" in four different languages with the first item in the locale's language. */
+							_x( '“Stories, <span lang="es">historias</span>, <span lang="uk">iсторії</span>, <span lang="el">iστορίες</span>”', 'Placeholder heading in four languages.', 'twentytwentyfive' )
+						);
+						?>
+					</h3>
 					<!-- /wp:heading -->
 
 					<!-- wp:paragraph -->
@@ -123,7 +130,14 @@
 			<div class="wp-block-group" style="border-top-color:var(--wp--preset--color--accent-6);border-top-width:1px;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:group {"layout":{"type":"constrained"}} -->
 				<div class="wp-block-group">
 					<!-- wp:heading {"level":3} -->
-					<h3 class="wp-block-heading"><?php echo esc_html_x( '“Stories, historias, iсторії, iστορίες”', 'Placeholder heading in four languages.', 'twentytwentyfive' ); ?></h3>
+					<h3 class="wp-block-heading">
+						<?php
+						echo wp_kses_post(
+							/* translators: This string contains the word "Stories" in four different languages with the first item in the locale's language. */
+							_x( '“Stories, <span lang="es">historias</span>, <span lang="uk">iсторії</span>, <span lang="el">iστορίες</span>”', 'Placeholder heading in four languages.', 'twentytwentyfive' )
+						);
+						?>
+					</h3>
 					<!-- /wp:heading -->
 
 					<!-- wp:paragraph -->

src/wp-content/themes/twentytwentyfive/patterns/cta-grid-products-link.php

@@ -16,8 +16,8 @@
 <div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)">
 	<!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
 	<div class="wp-block-group alignwide">
-		<!-- wp:heading {"style":{"typography":{"fontSize":"11.58rem","letterSpacing":"-0.02em"}}} -->
-		<h2 class="wp-block-heading" style="font-size:11.58rem;letter-spacing:-0.02em"><?php esc_html_e( 'Our online store.', 'twentytwentyfive' ); ?></h2>
+		<!-- wp:heading {"style":{"typography":{"fontSize":"9.6rem","letterSpacing":"-0.02em"}}} -->
+		<h2 class="wp-block-heading" style="font-size:9.6rem;letter-spacing:-0.02em"><?php esc_html_e( 'Our online store.', 'twentytwentyfive' ); ?></h2>
 		<!-- /wp:heading -->
 
 		<!-- wp:group {"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"10rem"}} -->

src/wp-content/themes/twentytwentyfive/patterns/event-rsvp.php

@@ -14,65 +14,90 @@
  */
 
 ?>
-<!-- wp:group {"align":"full","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
-<div class="wp-block-group alignfull">
-	<!-- wp:group {"align":"full","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"grid","minimumColumnWidth":"70rem"}} -->
-	<div class="wp-block-group alignfull">
-		<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|80","left":"var:preset|spacing|40","right":"var:preset|spacing|40","top":"var:preset|spacing|40"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between","verticalAlignment":"top"}} -->
-		<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--40)">
+<!-- wp:group {"align":"full","style":{"spacing":{"blockGap":"0","margin":{"top":"0","bottom":"0"}}},"layout":{"type":"default"}} -->
+<div class="wp-block-group alignfull" style="margin-top:0;margin-bottom:0">
+	<!-- wp:columns {"isStackedOnMobile":false,"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|80","left":"var:preset|spacing|40","right":"var:preset|spacing|40"},"margin":{"top":"0","bottom":"0"}}}} -->
+	<div class="wp-block-columns alignfull is-not-stacked-on-mobile" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--40)">
+		<!-- wp:column {"width":"66.66%"} -->
+		<div class="wp-block-column" style="flex-basis:66.66%">
 			<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
 			<div class="wp-block-group">
 				<!-- wp:heading {"fontSize":"xx-large"} -->
-				<h2 class="wp-block-heading has-xx-large-font-size"><?php echo esc_html_x( '“Stories, historias, iсторії, iστορίες”', 'Placeholder heading in four languages.', 'twentytwentyfive' ); ?></h2>
+				<h2 class="wp-block-heading has-xx-large-font-size">
+					<?php
+					echo wp_kses_post(
+						/* translators: This string contains the word "Stories" in four different languages with the first item in the locale's language. */
+						_x( '“Stories, <span lang="es">historias</span>, <span lang="uk">iсторії</span>, <span lang="el">iστορίες</span>”', 'Placeholder heading in four languages.', 'twentytwentyfive' )
+					);
+					?>
+				</h2>
 				<!-- /wp:heading -->
 
 				<!-- wp:paragraph {"fontSize":"x-large"} -->
 				<p class="has-x-large-font-size"><?php echo esc_html_x( 'Mon, Jan 1', 'Example event date in pattern.', 'twentytwentyfive' ); ?></p>
 				<!-- /wp:paragraph -->
 
-				<!-- wp:spacer {"height":"0px","style":{"layout":{"selfStretch":"fixed","flexSize":"100px"}}} -->
+				<!-- wp:spacer {"height":"0px","style":{"layout":{"selfStretch":"fixed","flexSize":"140px"}}} -->
 				<div style="height:0px" aria-hidden="true" class="wp-block-spacer"></div>
 				<!-- /wp:spacer -->
 			</div>
 			<!-- /wp:group -->
+		</div>
+		<!-- /wp:column -->
+
+		<!-- wp:column {"width":"12vw"} -->
+		<div class="wp-block-column" style="flex-basis:12vw"></div>
+		<!-- /wp:column -->
 
-			<!-- wp:paragraph {"align":"left","style":{"typography":{"writingMode":"vertical-rl","textTransform":"uppercase","lineHeight":"0.6"}}} -->
-			<p class="has-text-align-left" style="line-height:0.6;text-transform:uppercase;writing-mode:vertical-rl"><?php esc_html_e( 'Free WorKshop', 'twentytwentyfive' ); ?></p>
-			<!-- /wp:paragraph -->
+		<!-- wp:column -->
+		<div class="wp-block-column">
+			<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
+			<div class="wp-block-group">
+				<!-- wp:paragraph {"align":"left","style":{"typography":{"writingMode":"vertical-rl","textTransform":"uppercase","lineHeight":"0.6"}}} -->
+				<p class="has-text-align-left" style="line-height:0.6;text-transform:uppercase;writing-mode:vertical-rl"><?php esc_html_e( 'Free Workshop', 'twentytwentyfive' ); ?></p>
+				<!-- /wp:paragraph -->
+			</div>
+			<!-- /wp:group -->
 		</div>
-		<!-- /wp:group -->
+		<!-- /wp:column -->
 	</div>
-	<!-- /wp:group -->
+	<!-- /wp:columns -->
 
-	<!-- wp:group {"align":"full","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"grid","minimumColumnWidth":"40rem","columnCount":null}} -->
-	<div class="wp-block-group alignfull">
-		<!-- wp:group {"className":"is-style-section-2","style":{"spacing":{"blockGap":"var:preset|spacing|20","padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
-		<div class="wp-block-group is-style-section-2" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--40)">
-			<!-- wp:paragraph -->
-			<p><?php esc_html_e( 'This immersive event celebrates the universal human experience through the lenses of history and ancestry, featuring a diverse array of photographers whose works capture the essence of different cultures and historical moments.', 'twentytwentyfive' ); ?></p>
-			<!-- /wp:paragraph -->
+	<!-- wp:columns {"align":"full","className":"is-style-section-2","style":{"spacing":{"blockGap":{"top":"0","left":"0"},"padding":{"top":"0","bottom":"0"}}}} -->
+	<div class="wp-block-columns alignfull is-style-section-2" style="padding-top:0;padding-bottom:0">
+		<!-- wp:column {"width":"50%"} -->
+		<div class="wp-block-column" style="flex-basis:50%">
+			<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20","padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}},"dimensions":{"minHeight":"33vh"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch","verticalAlignment":"space-between"}} -->
+			<div class="wp-block-group" style="min-height:33vh;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
+				<!-- wp:paragraph -->
+				<p><?php esc_html_e( 'This immersive event celebrates the universal human experience through the lenses of history and ancestry, featuring a diverse array of photographers whose works capture the essence of different cultures and historical moments.', 'twentytwentyfive' ); ?></p>
+				<!-- /wp:paragraph -->
 
-			<!-- wp:spacer {"height":"0px","style":{"layout":{"selfStretch":"fixed","flexSize":"100px"}}} -->
-			<div style="height:0px" aria-hidden="true" class="wp-block-spacer"></div>
-			<!-- /wp:spacer -->
+				<!-- wp:spacer {"height":"0px","style":{"layout":{"flexSize":"100px","selfStretch":"fixed"}}} -->
+				<div style="height:0px" aria-hidden="true" class="wp-block-spacer"></div>
+				<!-- /wp:spacer -->
 
-			<!-- wp:heading {"fontSize":"xx-large"} -->
-			<h2 class="wp-block-heading has-xx-large-font-size"><a href="#"><?php echo esc_html_x( 'RSVP', 'Abbreviation for "Please respond".', 'twentytwentyfive' ); ?></a></h2>
-			<!-- /wp:heading -->
+				<!-- wp:heading {"fontSize":"xx-large"} -->
+				<h2 class="wp-block-heading has-xx-large-font-size"><a href="#"><?php echo esc_html_x( 'RSVP', 'Abbreviation for "Please respond".', 'twentytwentyfive' ); ?></a></h2>
+				<!-- /wp:heading -->
+			</div>
+			<!-- /wp:group -->
 		</div>
-		<!-- /wp:group -->
+		<!-- /wp:column -->
 
-		<!-- wp:cover {"url":"<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/botany-flowers-closeup.webp","dimRatio":0,"overlayColor":"base","isUserOverlayColor":true,"isDark":false,"layout":{"type":"constrained"}} -->
-		<div class="wp-block-cover is-light">
-			<span aria-hidden="true" class="wp-block-cover__background has-base-background-color has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="<?php esc_attr_e( 'Close up photo of white flowers on a grey background', 'twentytwentyfive' ); ?>" src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/botany-flowers-closeup.webp" data-object-fit="cover"/>
+		<!-- wp:column {"width":"50%"} -->
+		<div class="wp-block-column" style="flex-basis:50%">
+			<!-- wp:cover {"url":"<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/botany-flowers-closeup.webp","dimRatio":0,"isDark":false} -->
+			<div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background" alt="<?php esc_attr_e( 'Close up photo of white flowers on a grey background', 'twentytwentyfive' ); ?>" src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/botany-flowers-closeup.webp" data-object-fit="cover"/>
 			<div class="wp-block-cover__inner-container">
 				<!-- wp:spacer {"height":"var:preset|spacing|20"} -->
 				<div style="height:var(--wp--preset--spacing--20)" aria-hidden="true" class="wp-block-spacer"></div>
 				<!-- /wp:spacer -->
-			</div>
+			</div></div>
+			<!-- /wp:cover -->
 		</div>
-		<!-- /wp:cover -->
+		<!-- /wp:column -->
 	</div>
-	<!-- /wp:group -->
+	<!-- /wp:columns -->
 </div>
 <!-- /wp:group -->

src/wp-content/themes/twentytwentyfive/patterns/hidden-written-by.php

@@ -10,15 +10,15 @@
  */
 
 ?>
-<!-- wp:group {"style":{"spacing":{"blockGap":"0.2em","margin":{"bottom":"var:preset|spacing|60"}}},"textColor":"accent-4","fontSize":"small","layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<!-- wp:group {"style":{"spacing":{"blockGap":"0.2em","margin":{"bottom":"var:preset|spacing|60"}}},"textColor":"accent-4","fontSize":"small","layout":{"type":"flex","flexWrap":"wrap"}} -->
 <div class="wp-block-group has-accent-4-color has-text-color has-link-color has-small-font-size" style="margin-bottom:var(--wp--preset--spacing--60)">
 	<!-- wp:paragraph -->
 	<p><?php esc_html_e( 'Written by ', 'twentytwentyfive' ); ?></p>
 	<!-- /wp:paragraph -->
-	<!-- wp:post-author-name {"isLink":true,"style":{"typography":{"textDecoration":"underline"}}} /-->
+	<!-- wp:post-author-name {"isLink":true} /-->
 	<!-- wp:paragraph -->
 	<p><?php esc_html_e( 'in', 'twentytwentyfive' ); ?></p>
 	<!-- /wp:paragraph -->
-	<!-- wp:post-terms {"term":"category","style":{"typography":{"fontWeight":"300","textDecoration":"underline"}}} /-->
+	<!-- wp:post-terms {"term":"category","style":{"typography":{"fontWeight":"300"}}} /-->
 </div>
 <!-- /wp:group -->

src/wp-content/themes/twentytwentyfive/patterns/template-single-left-aligned-content.php

@@ -30,7 +30,7 @@
 							<!-- wp:paragraph -->
 							<p><?php echo esc_html_x( 'by', 'Prefix before the author name. The post author name is displayed in a separate block.', 'twentytwentyfive' ); ?></p>
 							<!-- /wp:paragraph -->
-							<!-- wp:post-author-name {"isLink":true,"style":{"typography":{"textDecoration":"underline"}},"fontSize":"small"} /-->
+							<!-- wp:post-author-name {"isLink":true,"fontSize":"small"} /-->
 						</div>
 						<!-- /wp:group -->
 					</div>

src/wp-content/themes/twentytwentyfive/style.css

@@ -29,6 +29,21 @@ a {
 	outline-style: solid;
 }
 
+/* Increase the bottom margin on submenus, so that the outline is visible. */
+.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
+	margin-bottom: 3px;
+}
+
+/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
+.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
+	outline-offset: 4px;
+}
+
+/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
+.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
+	outline-offset: 0;
+}
+
 /*
  * Progressive enhancement to reduce widows and orphans
  * https://github.com/WordPress/gutenberg/issues/55190