Add 'Numbered Features' pattern (#21131)

lib/client-assets.php

@@ -682,5 +682,6 @@ function gutenberg_extend_settings_custom_units( $settings ) {
 	register_pattern( 'core/two-buttons', gutenberg_load_block_pattern( 'two-buttons' ) );
 	register_pattern( 'core/cover-abc', gutenberg_load_block_pattern( 'cover-abc' ) );
 	register_pattern( 'core/two-images', gutenberg_load_block_pattern( 'two-images' ) );
+	register_pattern( 'core/numbered-features', gutenberg_load_block_pattern( 'numbered-features' ) );
 	register_pattern( 'core/its-time', gutenberg_load_block_pattern( 'its-time' ) );
 }

lib/patterns/numbered-features.json

@@ -0,0 +1,5 @@
+{
+	"__file": "wp_block",
+	"title": "Numbered Features",
+	"content": "<!-- wp:group {\"align\":\"wide\",\"style\":{\"color\":{\"background\":\"#f3ece3\"}}} -->\n<div class=\"wp-block-group alignwide has-background\" style=\"--wp--color--background:#f3ece3\"><div class=\"wp-block-group__inner-container\"><!-- wp:group -->\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":33.33} -->\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><!-- wp:paragraph {\"align\":\"center\",\"customTextColor\":\"#e87b1d\",\"customFontSize\":90} -->\n<p style=\"color:#e87b1d;font-size:90px\" class=\"has-text-color has-text-align-center\"><strong>1</strong></p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":66.66} -->\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\"><!-- wp:paragraph {\"customTextColor\":\"#685203\",\"customFontSize\":32} -->\n<p style=\"color:#685203;font-size:32px\" class=\"has-text-color\">Custom Designs</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"customTextColor\":\"#000000\"} -->\n<p style=\"color:#000000\" class=\"has-text-color\">Extend it with over 54,000 plugins to help your website meet your needs.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:spacer {\"height\":20} -->\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->\n\n<!-- wp:group -->\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":33.33} -->\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><!-- wp:paragraph {\"align\":\"center\",\"customTextColor\":\"#e87b1d\",\"customFontSize\":90} -->\n<p style=\"color:#e87b1d;font-size:90px\" class=\"has-text-color has-text-align-center\"><strong>2</strong></p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":66.66} -->\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\"><!-- wp:paragraph {\"customTextColor\":\"#685203\",\"customFontSize\":32} -->\n<p style=\"color:#685203;font-size:32px\" class=\"has-text-color\">High Performance</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"customTextColor\":\"#000000\"} -->\n<p style=\"color:#000000\" class=\"has-text-color\">Add an online store, galleries, mailing lists, forums, analytics, and much more.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:spacer {\"height\":20} -->\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->\n\n<!-- wp:group -->\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":33.33} -->\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\"><!-- wp:paragraph {\"align\":\"center\",\"customTextColor\":\"#e87b1d\",\"customFontSize\":90} -->\n<p style=\"color:#e87b1d;font-size:90px\" class=\"has-text-color has-text-align-center\"><strong>3</strong></p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":66.66} -->\n<div class=\"wp-block-column\" style=\"flex-basis:66.66%\"><!-- wp:paragraph {\"customTextColor\":\"#685203\",\"customFontSize\":32} -->\n<p style=\"color:#685203;font-size:32px\" class=\"has-text-color\">Easy and Accessible</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"customTextColor\":\"#000000\"} -->\n<p style=\"color:#000000\" class=\"has-text-color\">Hundreds of thousands of developers and site owners trust it worldwide.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group --></div></div>\n<!-- /wp:group -->"
+  }