FSE: New Patterns

apps/editing-toolkit/editing-toolkit-plugin/block-patterns/patterns/audio-player.php

@@ -0,0 +1,29 @@
+<?php
+/**
+ * Podcast pattern.
+ *
+ * @package A8C\FSE
+ */
+
+$markup = '
+<!-- wp:cover {"customOverlayColor":"#54426b","minHeight":250,"align":"full"} -->
+<div class="wp-block-cover alignfull has-background-dim" style="background-color:#54426b;min-height:250px"><div class="wp-block-cover__inner-container"><!-- wp:heading {"align":"center","level":5,"style":{"color":{"text":"#ffffff"}}} -->
+<h5 class="has-text-align-center has-text-color" style="color:#ffffff"><strong>%1$s</strong></h5>
+<!-- /wp:heading -->
+
+<!-- wp:audio {"id":1502} -->
+<figure class="wp-block-audio"><audio controls src="https://dotcompatterns.files.wordpress.com/2020/06/komiku_-_02_-_chill_out_theme.mp3"></audio></figure>
+<!-- /wp:audio --></div></div>
+<!-- /wp:cover -->
+';
+
+return array(
+	'__file'        => 'wp_block',
+	'title'         => esc_html__( 'Audio Player', 'full-site-editing' ),
+	'categories'    => array( 'about', 'media', 'podcast' ),
+	'content'       => sprintf(
+		$markup,
+		esc_html__( 'First time here? Let me tell you why this show rocks!', 'full-site-editing' )
+	),
+	'viewportWidth' => 1280,
+);

apps/editing-toolkit/editing-toolkit-plugin/block-patterns/patterns/call-to-action-04.php

@@ -0,0 +1,63 @@
+<?php
+/**
+ * Call to Action pattern.
+ *
+ * @package A8C\FSE
+ */
+
+$markup = '
+<!-- wp:group {"align":"full","style":{"color":{"background":"#b89f7e","text":"#0f1c18"}}} -->
+<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#b89f7e;color:#0f1c18"><div class="wp-block-group__inner-container"><!-- wp:spacer {"height":40} -->
+<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:columns {"align":"wide"} -->
+<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"center"} -->
+<div class="wp-block-column is-vertically-aligned-center"><!-- wp:paragraph {"style":{"typography":{"fontSize":28,"lineHeight":"1.2"}}} -->
+<p style="line-height:1.2;font-size:28px"><strong>%1$s<br></strong>%2$s</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"verticalAlignment":"center"} -->
+<div class="wp-block-column is-vertically-aligned-center"><!-- wp:paragraph {"style":{"typography":{"fontSize":28,"lineHeight":"1.2"}}} -->
+<p style="line-height:1.2;font-size:28px"><strong>%3$s<br></strong>%4$s</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"verticalAlignment":"center"} -->
+<div class="wp-block-column is-vertically-aligned-center"><!-- wp:paragraph {"style":{"typography":{"fontSize":28,"lineHeight":"1.2"}}} -->
+<p style="line-height:1.2;font-size:28px"><strong>%5$s<br></strong>%6$s</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"verticalAlignment":"bottom"} -->
+<div class="wp-block-column is-vertically-aligned-bottom"><!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"borderRadius":3,"style":{"color":{"background":"#0f1c18","text":"#ffffff"}}} -->
+<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background" style="border-radius:3px;background-color:#0f1c18;color:#ffffff">%7$s</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
+
+<!-- wp:spacer {"height":40} -->
+<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer --></div></div>
+<!-- /wp:group -->
+';
+
+return array(
+	'__file'        => 'wp_block',
+	'title'         => esc_html__( 'Call to Action', 'full-site-editing' ),
+	'categories'    => array( 'call-to-action' ),
+	'content'       => sprintf(
+		$markup,
+		esc_html__( 'Date:', 'full-site-editing' ),
+		esc_html__( 'May 28, 2021', 'full-site-editing' ),
+		esc_html__( 'Time:', 'full-site-editing' ),
+		esc_html__( '12:00 PM(UTC)', 'full-site-editing' ),
+		esc_html__( 'Duration:', 'full-site-editing' ),
+		esc_html__( '60 Minutes', 'full-site-editing' ),
+		esc_html__( 'Register now', 'full-site-editing' )
+	),
+	'viewportWidth' => 1280,
+);

apps/editing-toolkit/editing-toolkit-plugin/block-patterns/patterns/contact-05.php

@@ -0,0 +1,54 @@
+<?php
+/**
+ * Contact pattern.
+ *
+ * @package A8C\FSE
+ */
+
+// phpcs:disable WordPress.WP.CapitalPDangit.Misspelled
+$markup = '
+<!-- wp:cover {"customOverlayColor":"#000000","minHeight":80,"minHeightUnit":"vh","align":"full"} -->
+<div class="wp-block-cover alignfull has-background-dim" style="background-color:#000000;min-height:80vh"><div class="wp-block-cover__inner-container"><!-- wp:spacer {"height":20} -->
+<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:jetpack/layout-grid {"gutterSize":"huge","column1DesktopSpan":12,"column1TabletSpan":8,"column1MobileSpan":4,"className":"column1-desktop-grid__span-12 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1"} -->
+<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-12 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 wp-block-jetpack-layout-gutter__huge"><!-- wp:jetpack/layout-grid-column -->
+<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:paragraph {"style":{"typography":{"fontSize":103,"lineHeight":"1"},"color":{"text":"#ffffff"}}} -->
+<p class="has-text-color" style="line-height:1;font-size:103px;color:#ffffff">%1$s</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:jetpack/layout-grid-column --></div>
+<!-- /wp:jetpack/layout-grid --></div></div>
+<!-- /wp:cover -->
+
+<!-- wp:group {"align":"full","style":{"color":{"background":"#000000","text":"#ffffff"}}} -->
+<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#000000;color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:jetpack/layout-grid {"gutterSize":"huge","column1DesktopSpan":6,"column1TabletSpan":4,"column1MobileSpan":4,"column2DesktopSpan":6,"column2TabletSpan":4,"column2MobileSpan":4,"column3DesktopOffset":7,"className":"column1-desktop-grid__span-6 column1-desktop-grid__row-1 column2-desktop-grid__span-6 column2-desktop-grid__start-7 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"} -->
+<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-6 column1-desktop-grid__row-1 column2-desktop-grid__span-6 column2-desktop-grid__start-7 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2 wp-block-jetpack-layout-gutter__huge"><!-- wp:jetpack/layout-grid-column -->
+<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:paragraph {"align":"left","style":{"typography":{"fontSize":28},"color":{"text":"#ffffff"}}} -->
+<p class="has-text-align-left has-text-color" style="font-size:28px;color:#ffffff"><a href="#">%2$s</a> / <a href="#">%3$s</a> / <a href="#">%4$s</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:jetpack/layout-grid-column -->
+
+<!-- wp:jetpack/layout-grid-column -->
+<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:paragraph {"align":"right","style":{"typography":{"fontSize":28},"color":{"text":"#ffffff"}}} -->
+<p class="has-text-align-right has-text-color" style="font-size:28px;color:#ffffff"><a href="mailto:%5$s">%5$s</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:jetpack/layout-grid-column --></div>
+<!-- /wp:jetpack/layout-grid --></div></div>
+<!-- /wp:group -->
+';
+
+return array(
+	'__file'        => 'wp_block',
+	'title'         => esc_html__( 'Contact', 'full-site-editing' ),
+	'categories'    => array( 'contact', 'text', 'call-to-action' ),
+	'content'       => sprintf(
+		$markup,
+		esc_html__( 'Let&rsquo;s connect.', 'full-site-editing' ),
+		esc_html__( 'Twitter', 'full-site-editing' ),
+		esc_html__( 'Instagram', 'full-site-editing' ),
+		esc_html__( 'Facebook', 'full-site-editing' ),
+		esc_html__( 'hello@example.com', 'full-site-editing' )
+	),
+	'viewportWidth' => 1280,
+);

apps/editing-toolkit/editing-toolkit-plugin/block-patterns/patterns/heading-and-paragraph.php

@@ -0,0 +1,36 @@
+<?php
+/**
+ * Text pattern.
+ *
+ * @package A8C\FSE
+ */
+
+$markup = '
+<!-- wp:jetpack/layout-grid {"column1DesktopSpan":6,"column1DesktopOffset":3,"column1TabletSpan":8,"column1MobileSpan":4,"column2DesktopOffset":3,"className":"column1-desktop-grid__span-6 column1-desktop-grid__start-4 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1"} -->
+<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-6 column1-desktop-grid__start-4 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1"><!-- wp:jetpack/layout-grid-column -->
+<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:heading -->
+<h2>%1$s</h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>%2$s</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:jetpack/layout-grid-column --></div>
+<!-- /wp:jetpack/layout-grid -->
+
+<!-- wp:spacer {"height":60} -->
+<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+';
+
+return array(
+	'__file'        => 'wp_block',
+	'title'         => esc_html__( 'Heading and Paragraph', 'full-site-editing' ),
+	'categories'    => array( 'text' ),
+	'content'       => sprintf(
+		$markup,
+		esc_html__( 'Chapter 1: Loomings', 'full-site-editing' ),
+		esc_html__( 'Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.', 'full-site-editing' )
+	),
+	'viewportWidth' => 1280,
+);

apps/editing-toolkit/editing-toolkit-plugin/block-patterns/patterns/heading-and-text-in-two-columns.php

@@ -0,0 +1,34 @@
+<?php
+/**
+ * Text pattern.
+ *
+ * @package A8C\FSE
+ */
+
+$markup = '
+<!-- wp:columns {"align":"wide"} -->
+<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"top","width":40} -->
+<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:40%%"><!-- wp:heading {"level":3,"className":"margin-top-none"} -->
+<h3 class="margin-top-none"><strong>%1$s</strong></h3>
+<!-- /wp:heading --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:paragraph -->
+<p>%2$s</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
+';
+
+return array(
+	'__file'        => 'wp_block',
+	'title'         => esc_html__( 'Heading and Text in Two Columns', 'full-site-editing' ),
+	'categories'    => array( 'text' ),
+	'content'       => sprintf(
+		$markup,
+		esc_html__( 'These are the best pancakes you&rsquo;ll ever have', 'full-site-editing' ),
+		esc_html__( 'When I was younger I loved pancakes. Excuse me, I loved maple syrup. Pancakes were a way to get as much maple syrup on my plate, my hands, and my face. Eventually my mother realized I was leaving the pancakes half-eaten and we’d run out of syrup in two weeks instead of a month. It’s not that my mother’s pancakes were bad, it was that I didn’t know what a pancake tasted like that wasn’t drenched in dark, sweet, syrup.', 'full-site-editing' )
+	),
+	'viewportWidth' => 1280,
+);

apps/editing-toolkit/editing-toolkit-plugin/block-patterns/patterns/hero-with-heading-subtitle-and-two-buttons.php

@@ -0,0 +1,42 @@
+<?php
+/**
+ * Call to Action pattern.
+ *
+ * @package A8C\FSE
+ */
+
+$markup = '
+<!-- wp:cover {"customOverlayColor":"#f7f7f7","align":"full"} -->
+<div class="wp-block-cover alignfull has-background-dim" style="background-color:#f7f7f7"><div class="wp-block-cover__inner-container"><!-- wp:heading {"level":1,"placeholder":"Add heading...","style":{"typography":{"lineHeight":"1.4"},"color":{"text":"#222222"}}} -->
+<h1 class="has-text-color" style="line-height:1.4;color:#222222">%1$s</h1>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"style":{"color":{"text":"#222222"}}} -->
+<p class="has-text-color" style="color:#222222">%2$s</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"background":"#ff302c","text":"#ffffff"}}} -->
+<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background" style="background-color:#ff302c;color:#ffffff">%3$s</a></div>
+<!-- /wp:button -->
+
+<!-- wp:button {"style":{"color":{"text":"#ff302c"}},"className":"is-style-outline"} -->
+<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color" style="color:#ff302c">%4$s</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div></div>
+<!-- /wp:cover -->
+';
+
+return array(
+	'__file'        => 'wp_block',
+	'title'         => esc_html__( 'Hero with heading, subtitle and two buttons', 'full-site-editing' ),
+	'categories'    => array( 'text', 'call-to-action' ),
+	'content'       => sprintf(
+		$markup,
+		esc_html__( 'A Curated Collection of Refurbished Vintage Cameras &amp; Accessories', 'full-site-editing' ),
+		esc_html__( 'Lenses, filters, lighting and more. All in working condition at unbeatable prices.', 'full-site-editing' ),
+		esc_html__( 'Learn more', 'full-site-editing' ),
+		esc_html__( 'Pre-order', 'full-site-editing' )
+	),
+	'viewportWidth' => 1280,
+);

apps/editing-toolkit/editing-toolkit-plugin/block-patterns/patterns/image-and-text-mosaic.php

@@ -0,0 +1,70 @@
+<?php
+/**
+ * Image pattern.
+ *
+ * @package A8C\FSE
+ */
+
+$markup = '
+<!-- wp:columns {"verticalAlignment":"top","align":"wide"} -->
+<div class="wp-block-columns alignwide are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","width":33.33} -->
+<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:33.33%%"><!-- wp:spacer {"height":110} -->
+<div style="height:110px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:heading {"style":{"color":{"text":"#ff302c"}}} -->
+<h2 class="has-text-color" style="color:#ff302c">%1$s</h2>
+<!-- /wp:heading -->
+
+<!-- wp:separator {"className":"is-style-wide"} -->
+<hr class="wp-block-separator is-style-wide"/>
+<!-- /wp:separator -->
+
+<!-- wp:paragraph -->
+<p>%2$s</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:button {"style":{"color":{"text":"#ff302c"}},"align":"left","className":"is-style-outline"} -->
+<div class="wp-block-button alignleft is-style-outline"><a class="wp-block-button__link has-text-color" href="#" style="color:#ff302c">%3$s</a></div>
+<!-- /wp:button -->
+
+<!-- wp:spacer {"height":32} -->
+<div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer --></div>
+<!-- /wp:column -->
+
+<!-- wp:column {"verticalAlignment":"top","width":66.66} -->
+<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:66.66%%"><!-- wp:image {"id":1107,"sizeSlug":"large"} -->
+<figure class="wp-block-image size-large"><img src="https://dotcompatterns.files.wordpress.com/2020/05/oriento-rdmks85cli8-unsplash.jpg?w=682" alt="" class="wp-image-1107"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:media-text {"mediaId":1106,"mediaType":"image","isStackedOnMobile":false,"verticalAlignment":"top","imageFill":true} -->
+<div class="wp-block-media-text alignwide is-vertically-aligned-top is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(https://dotcompatterns.files.wordpress.com/2020/05/oriento-dpuwgzlsok8-unsplash.jpg?w=750);background-position:50%% 50%%"><img src="https://dotcompatterns.files.wordpress.com/2020/05/oriento-dpuwgzlsok8-unsplash.jpg?w=750" alt="" class="wp-image-1106"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph -->
+<p>%4$s</p>
+<!-- /wp:paragraph --></div></div>
+<!-- /wp:media-text -->
+
+<!-- wp:separator {"className":"is-style-wide"} -->
+<hr class="wp-block-separator is-style-wide"/>
+<!-- /wp:separator -->
+
+<!-- wp:spacer {"height":96} -->
+<div style="height:96px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->
+';
+
+return array(
+	'__file'        => 'wp_block',
+	'title'         => esc_html__( 'Image and Text Mosaic', 'full-site-editing' ),
+	'categories'    => array( 'gallery', 'images', 'text' ),
+	'content'       => sprintf(
+		$markup,
+		esc_html__( 'Ceramic Tea Bowls"', 'full-site-editing' ),
+		esc_html__( 'A tea bowl is a central item in the traditional tea ceremony. In our shop you&rsquo;ll find one-of-a-kind, handmade bowls and cups made to order in our ceramic workshop. Each of our bowls is a unique creation so please allow for slight variances in shape and color. The bowls are glazed with special food-safe glazes.', 'full-site-editing' ),
+		esc_html__( 'Learn more', 'full-site-editing' ),
+		esc_html__( 'We&rsquo;re also offering unique, handmade ceramic mugs as well as original sets, consisting of tea, cups and matching tea pot, perfect for gifting.', 'full-site-editing' )
+	),
+	'viewportWidth' => 1280,
+);