WordPress.org
Get WordPress

Plugin Directory

Changeset 2370765


Ignore:
Timestamp:
08/28/2020 01:44:58 AM (6 years ago)
Author:
blockhandbook
Message:

Update to version 1.0.4 from GitHub

Location:
pattern
Files:
26 added
2 deleted
22 edited
1 copied

Legend:

Unmodified
Added
Removed

  • pattern/tags/1.0.4/build/tailwind.css

    r2369808 r2370765  
    141141}
    142142
     143[class*="pattern"].h-full {
     144  height: 100% !important;
     145}
     146
    143147[class*="pattern"].list-none {
    144148  list-style-type: none !important;
    … …  
    181185[class*="pattern"].p-8 {
    182186  padding: 32px !important;
    183 }
    184 
    185 [class*="pattern"].p-16 {
    186   padding: 64px !important;
    187187}
    188188
    … …  
    269269    }
    270270  }
     271
     272  [class*="pattern"].sm\:p-10 {
     273    padding: 40px !important;
     274  }
    271275}
    272276

  • pattern/tags/1.0.4/class-plugin.php

    r2369808 r2370765  
    33 * Plugin Name: Pattern
    44 * Description: A growing collection of beautiful block patterns, or website sections, that make it super easy to quickly build beautiful websites.
    5  * Version: 1.0.3
     5 * Version: 1.0.4
    66 * Plugin URI: https://blockhandbook.com
    77 * Author: Blockhandbook
    … …  
    9494            $this->slug_snake_case = 'pattern';
    9595            $this->textdomain      = 'pattern';
    96             $this->version         = '1.0.2';
     96            $this->version         = '1.0.4';
    9797        }
    9898

  • pattern/tags/1.0.4/includes/block-patterns/pricing-table/cover.php

    r2369808 r2370765  
    66 */
    77
    8 // Tool to escape strings: https://onlinestringtools.com/escape-string.
    9 // If using Bootstrap or Tailwindcss classes, in order for them to get picked up during the build process place them either at the beginning of a class property or with a space after them at the end of the line before the quotes are escaped.
    10 // i.e. - <div class=\"p-16\">.
    11 // i.e. - <div class=\"p-16 has-background\">.
    12 // i.e. - <div class=\"has-background p-16 \">.
    13 // i.e. - This won't get picked up: <div class=\"has-background p-16\">.
    14 $img_url = '/wp-content/plugins/pattern/src/assets/img/cover-pattern-bg-img.jpg';
    15 $markup = "
    16 <!-- wp:cover {\"url\":\"$img_url\",\"id\":56,\"dimRatio\":0,\"customOverlayColor\":\"#ffffff\",\"align\":\"full\",\"className\":\"pattern my-0 py-10 h-auto \"} -->\n<div class=\"wp-block-cover alignfull pattern my-0 py-10 h-auto \" style=\"background-image:url($img_url);background-color:#ffffff\"><div class=\"wp-block-cover__inner-container\"><!-- wp:group {\"className\":\"test pattern p-8 md:p-16 rounded-xl shadow-xl \",\"style\":{\"color\":{\"gradient\":\"linear-gradient(135deg,rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.9) 100%)\"}}} -->\n<div class=\"wp-block-group test pattern p-8 md:p-16 rounded-xl shadow-xl has-background\" style=\"background:linear-gradient(135deg,rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.9) 100%)\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"align\":\"center\",\"className\":\"pattern mt-0 \",\"style\":{\"typography\":{\"fontSize\":72},\"color\":{\"text\":\"#ca8000\"}}} -->\n<h2 class=\"has-text-align-center pattern mt-0 has-text-color\" style=\"font-size:72px;color:#ca8000\">$249</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"className\":\"pattern my-0\",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"has-text-align-center pattern my-0 has-text-color\" style=\"color:#111111\"><strong>Template</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:group {\"className\":\"pattern pb-0 mb-0 \"} -->\n<div class=\"wp-block-group pattern pb-0 mb-0 \"><div class=\"wp-block-group__inner-container\"><!-- wp:paragraph {\"align\":\"center\",\"className\":\"pattern my-0 \",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"has-text-align-center pattern my-0 has-text-color\" style=\"color:#111111\">Unlimited Pricing Tables</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"className\":\"pattern my-0 \",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"has-text-align-center pattern my-0 has-text-color\" style=\"color:#111111\">Stylish Designs</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"className\":\"pattern my-0 \",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"has-text-align-center pattern my-0 has-text-color\" style=\"color:#111111\">Edit w/ Ease</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons {\"align\":\"center\",\"className\":\"pattern mt-0 pt-0 \"} -->\n<div class=\"wp-block-buttons aligncenter pattern mt-0 pt-0 \"><!-- wp:button {\"borderRadius\":50,\"style\":{\"color\":{\"background\":\"#ca8000\",\"text\":\"#ffffff\"}},\"className\":\"pattern mb-0 \"} -->\n<div class=\"wp-block-button pattern mb-0 \"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:50px;background-color:#ca8000;color:#ffffff\">Purchase</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div></div>\n<!-- /wp:group --></div></div>\n<!-- /wp:group --></div></div>\n<!-- /wp:cover -->";
     8$markup = '<!-- wp:cover {"url":"https://images.unsplash.com/photo-1499570023676-b0a761678e07?ixlib=rb-1.2.1\u0026ixid=eyJhcHBfaWQiOjE2MTIzN30","id":56,"dimRatio":0,"customOverlayColor":"#ffffff","align":"full","className":"pattern my-0 py-10 h-auto"} -->
     9<div class="wp-block-cover alignfull pattern my-0 py-10 h-auto" style="background-image:url(https://images.unsplash.com/photo-1499570023676-b0a761678e07?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjE2MTIzN30);background-color:#ffffff"><div class="wp-block-cover__inner-container"><!-- wp:group {"className":"test pattern p-8 md:p-16 rounded-xl shadow-xl","style":{"color":{"gradient":"linear-gradient(135deg,rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.9) 100%)"}}} -->
     10<div class="wp-block-group test pattern p-8 md:p-16 rounded-xl shadow-xl has-background" style="background:linear-gradient(135deg,rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.9) 100%)"><div class="wp-block-group__inner-container"><!-- wp:heading {"align":"center","className":"pattern mt-0","style":{"typography":{"fontSize":72},"color":{"text":"#ca8000"}}} -->
     11<h2 class="has-text-align-center pattern mt-0 has-text-color" style="font-size:72px;color:#ca8000">$249</h2>
     12<!-- /wp:heading -->
     13
     14<!-- wp:paragraph {"align":"center","className":"pattern my-0","style":{"color":{"text":"#111111"}}} -->
     15<p class="has-text-align-center pattern my-0 has-text-color" style="color:#111111"><strong>Template</strong></p>
     16<!-- /wp:paragraph -->
     17
     18<!-- wp:group {"className":"pattern pb-0 mb-0"} -->
     19<div class="wp-block-group pattern pb-0 mb-0"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"align":"center","className":"pattern my-0","style":{"color":{"text":"#111111"}}} -->
     20<p class="has-text-align-center pattern my-0 has-text-color" style="color:#111111">Unlimited Pricing Tables</p>
     21<!-- /wp:paragraph -->
     22
     23<!-- wp:paragraph {"align":"center","className":"pattern my-0","style":{"color":{"text":"#111111"}}} -->
     24<p class="has-text-align-center pattern my-0 has-text-color" style="color:#111111">Stylish Designs</p>
     25<!-- /wp:paragraph -->
     26
     27<!-- wp:paragraph {"align":"center","className":"pattern my-0","style":{"color":{"text":"#111111"}}} -->
     28<p class="has-text-align-center pattern my-0 has-text-color" style="color:#111111">Edit w/ Ease</p>
     29<!-- /wp:paragraph -->
     30
     31<!-- wp:buttons {"align":"center","className":"pattern mt-0 pt-0"} -->
     32<div class="wp-block-buttons aligncenter pattern mt-0 pt-0"><!-- wp:button {"borderRadius":50,"style":{"color":{"background":"#ca8000","text":"#ffffff"}},"className":"pattern mb-0"} -->
     33<div class="wp-block-button pattern mb-0"><a class="wp-block-button__link has-text-color has-background" style="border-radius:50px;background-color:#ca8000;color:#ffffff">Purchase</a></div>
     34<!-- /wp:button --></div>
     35<!-- /wp:buttons --></div></div>
     36<!-- /wp:group --></div></div>
     37<!-- /wp:group --></div></div>
     38<!-- /wp:cover -->';
    1739
    1840return array(

  • pattern/tags/1.0.4/includes/block-patterns/pricing-table/floating.php

    r2369808 r2370765  
    66 */
    77
    8 // Tool to escape strings: https://onlinestringtools.com/escape-string.
    9 // If using Bootstrap or Tailwindcss classes, in order for them to get picked up during the build process place them either at the beginning of a class property or with a space after them at the end of the line before the quotes are escaped.
    10 // i.e. - <div class=\"p-16\">.
    11 // i.e. - <div class=\"p-16 has-background\">.
    12 // i.e. - <div class=\"has-background p-16 \">.
    13 // i.e. - This won't get picked up: <div class=\"has-background p-16\">.
    14 $markup = "
    15 <!-- wp:cover {\"customOverlayColor\":\"#f7f7f7\",\"align\":\"full\",\"className\":\"pattern md:py-16 my-0 h-auto \"} -->\n<div class=\"wp-block-cover alignfull has-background-dim pattern md:py-16 my-0 h-auto \" style=\"background-color:#f7f7f7\"><div class=\"wp-block-cover__inner-container\"><!-- wp:columns {\"align\":\"full\"} -->\n<div class=\"wp-block-columns alignfull\"><!-- wp:column {\"width\":25} -->\n<div class=\"wp-block-column\" style=\"flex-basis:25%\"></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":50,\"className\":\"pattern mb-0 px-10 md:px-0 \"} -->\n<div class=\"wp-block-column pattern mb-0 px-10 md:px-0 \" style=\"flex-basis:50%\"><!-- wp:heading {\"align\":\"center\",\"className\":\"pattern mt-0 \",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<h2 class=\"has-text-align-center pattern mt-0 has-text-color\" style=\"color:#111111\">Our Plans</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"has-text-align-center has-text-color\" style=\"color:#111111\">Affordable monthly plans that grow with you.</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 -->\n\n<!-- wp:column {\"width\":25} -->\n<div class=\"wp-block-column\" style=\"flex-basis:25%\"></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\",\"align\":\"full\",\"className\":\"pattern px-0 \"} -->\n<div class=\"wp-block-columns alignfull are-vertically-aligned-center pattern px-0 \"><!-- wp:column {\"verticalAlignment\":\"center\",\"width\":10,\"className\":\"pattern mb-0 \"} -->\n<div class=\"wp-block-column is-vertically-aligned-center pattern mb-0 \" style=\"flex-basis:10%\"></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"width\":30} -->\n<div class=\"wp-block-column is-vertically-aligned-center\" style=\"flex-basis:30%\"><!-- wp:group {\"className\":\"pattern p-4 pt-10 rounded-xl shadow-xl mb-2 text-center md:text-left \",\"style\":{\"color\":{\"background\":\"#ffffff\"}}} -->\n<div class=\"wp-block-group pattern p-4 pt-10 rounded-xl shadow-xl mb-2 text-center md:text-left has-background\" style=\"background-color:#ffffff\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"level\":4,\"className\":\"pattern mb-0 \",\"style\":{\"color\":{\"text\":\"#ca8000\"}}} -->\n<h4 class=\"pattern mb-0 has-text-color\" style=\"color:#ca8000\">$25</h4>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"className\":\"pattern mb-0 \",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"pattern mb-0 has-text-color\" style=\"color:#111111\">Personal Plan</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list {\"className\":\"pattern list-none ml-0 text-black text-opacity-50 \"} -->\n<ul class=\"pattern list-none ml-0 text-black text-opacity-50 \"><li>Powerful Patterns</li><li>Everything is Editable</li><li>Easy to Use</li></ul>\n<!-- /wp:list --></div></div>\n<!-- /wp:group -->\n\n<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"borderRadius\":50,\"style\":{\"color\":{\"background\":\"#f7f7f7\",\"text\":\"#111111\"}},\"className\":\"pattern my-0 is-style-fill\"} -->\n<div class=\"wp-block-button pattern my-0 is-style-fill\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:50px;background-color:#f7f7f7;color:#111111\">Select</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"width\":30} -->\n<div class=\"wp-block-column is-vertically-aligned-center\" style=\"flex-basis:30%\"><!-- wp:group {\"className\":\"pattern p-4 pt-10 rounded-xl shadow-xl mb-2 text-center md:text-left \",\"style\":{\"color\":{\"background\":\"#ffffff\"}}} -->\n<div class=\"wp-block-group pattern p-4 pt-10 rounded-xl shadow-xl mb-2 text-center md:text-left has-background\" style=\"background-color:#ffffff\"><div class=\"wp-block-group__inner-container\"><!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"className\":\"pattern mb-0 \",\"style\":{\"typography\":{\"fontSize\":72},\"color\":{\"text\":\"#ca8000\"}}} -->\n<h2 class=\"pattern mb-0 has-text-color\" style=\"font-size:72px;color:#ca8000\"><strong>$58</strong></h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"className\":\"pattern mb-0 \",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"pattern mb-0 has-text-color\" style=\"color:#111111\">Business Plan</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list {\"className\":\"pattern list-none ml-0 text-black text-opacity-50\"} -->\n<ul class=\"pattern list-none ml-0 text-black text-opacity-50\"><li>Powerful Patterns</li><li>Everything is Editable</li><li>Easy to Use</li></ul>\n<!-- /wp:list --></div></div>\n<!-- /wp:group -->\n\n<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"borderRadius\":50,\"style\":{\"color\":{\"text\":\"#ffffff\",\"background\":\"#111111\"}},\"className\":\"pattern my-0 is-style-fill\"} -->\n<div class=\"wp-block-button pattern my-0 is-style-fill\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:50px;background-color:#111111;color:#ffffff\">Select</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"width\":30} -->\n<div class=\"wp-block-column is-vertically-aligned-center\" style=\"flex-basis:30%\"><!-- wp:group {\"className\":\"pattern p-4 pt-10 rounded-xl shadow-xl text-center md:text-left \",\"style\":{\"color\":{\"background\":\"#ffffff\"}}} -->\n<div class=\"wp-block-group pattern p-4 pt-10 rounded-xl shadow-xl text-center md:text-left has-background\" style=\"background-color:#ffffff\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"level\":4,\"className\":\"pattern mb-0 \",\"style\":{\"color\":{\"text\":\"#ca8000\"}}} -->\n<h4 class=\"pattern mb-0 has-text-color\" style=\"color:#ca8000\">$92</h4>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"className\":\"pattern mb-0 \",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"pattern mb-0 has-text-color\" style=\"color:#111111\">Pro Plan</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list {\"className\":\"pattern list-none ml-0 text-black text-opacity-50 \"} -->\n<ul class=\"pattern list-none ml-0 text-black text-opacity-50 \"><li>Powerful Patterns</li><li>Everything is Editable</li><li>Easy to Use</li></ul>\n<!-- /wp:list --></div></div>\n<!-- /wp:group -->\n\n<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"borderRadius\":50,\"style\":{\"color\":{\"background\":\"#f7f7f7\",\"text\":\"#111111\"}},\"className\":\"pattern my-0 is-style-fill\"} -->\n<div class=\"wp-block-button pattern my-0 is-style-fill\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:50px;background-color:#f7f7f7;color:#111111\">Select</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"width\":10,\"className\":\"pattern mb-0 \"} -->\n<div class=\"wp-block-column is-vertically-aligned-center pattern mb-0 \" style=\"flex-basis:10%\"></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"placeholder\":\"Write title…\",\"fontSize\":\"large\"} -->\n<p class=\"has-text-align-center has-large-font-size\"></p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:cover -->";
     8$markup = '<!-- wp:cover {"customOverlayColor":"#f7f7f7","align":"full","className":"pattern md:py-16 my-0 h-auto"} -->
     9<div class="wp-block-cover alignfull has-background-dim pattern md:py-16 my-0 h-auto" style="background-color:#f7f7f7"><div class="wp-block-cover__inner-container"><!-- wp:columns {"align":"full"} -->
     10<div class="wp-block-columns alignfull"><!-- wp:column {"width":25} -->
     11<div class="wp-block-column" style="flex-basis:25%"></div>
     12<!-- /wp:column -->
     13
     14<!-- wp:column {"width":50,"className":"pattern mb-0 px-10 md:px-0"} -->
     15<div class="wp-block-column pattern mb-0 px-10 md:px-0" style="flex-basis:50%"><!-- wp:heading {"align":"center","className":"pattern mt-0","style":{"color":{"text":"#111111"}}} -->
     16<h2 class="has-text-align-center pattern mt-0 has-text-color" style="color:#111111">Our Plans</h2>
     17<!-- /wp:heading -->
     18
     19<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#111111"}}} -->
     20<p class="has-text-align-center has-text-color" style="color:#111111">Affordable monthly plans that grow with you.</p>
     21<!-- /wp:paragraph -->
     22
     23<!-- wp:spacer {"height":20} -->
     24<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
     25<!-- /wp:spacer --></div>
     26<!-- /wp:column -->
     27
     28<!-- wp:column {"width":25} -->
     29<div class="wp-block-column" style="flex-basis:25%"></div>
     30<!-- /wp:column --></div>
     31<!-- /wp:columns -->
     32
     33<!-- wp:columns {"verticalAlignment":"center","align":"full","className":"pattern px-0"} -->
     34<div class="wp-block-columns alignfull are-vertically-aligned-center pattern px-0"><!-- wp:column {"verticalAlignment":"center","width":10,"className":"pattern mb-0"} -->
     35<div class="wp-block-column is-vertically-aligned-center pattern mb-0" style="flex-basis:10%"></div>
     36<!-- /wp:column -->
     37
     38<!-- wp:column {"verticalAlignment":"center","width":30} -->
     39<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:30%"><!-- wp:group {"className":"pattern p-4 pt-10 rounded-xl shadow-xl mb-2 text-center md:text-left","style":{"color":{"background":"#ffffff"}}} -->
     40<div class="wp-block-group pattern p-4 pt-10 rounded-xl shadow-xl mb-2 text-center md:text-left has-background" style="background-color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:heading {"level":4,"className":"pattern mb-0","style":{"color":{"text":"#ca8000"}}} -->
     41<h4 class="pattern mb-0 has-text-color" style="color:#ca8000">$25</h4>
     42<!-- /wp:heading -->
     43
     44<!-- wp:paragraph {"className":"pattern mb-0","style":{"color":{"text":"#111111"}}} -->
     45<p class="pattern mb-0 has-text-color" style="color:#111111">Personal Plan</p>
     46<!-- /wp:paragraph -->
     47
     48<!-- wp:paragraph -->
     49<p></p>
     50<!-- /wp:paragraph -->
     51
     52<!-- wp:list {"className":"pattern list-none ml-0 text-black text-opacity-50"} -->
     53<ul class="pattern list-none ml-0 text-black text-opacity-50"><li>Powerful Patterns</li><li>Everything is Editable</li><li>Easy to Use</li></ul>
     54<!-- /wp:list --></div></div>
     55<!-- /wp:group -->
     56
     57<!-- wp:buttons {"align":"center"} -->
     58<div class="wp-block-buttons aligncenter"><!-- wp:button {"borderRadius":50,"style":{"color":{"background":"#f7f7f7","text":"#111111"}},"className":"pattern my-0 is-style-fill"} -->
     59<div class="wp-block-button pattern my-0 is-style-fill"><a class="wp-block-button__link has-text-color has-background" style="border-radius:50px;background-color:#f7f7f7;color:#111111">Select</a></div>
     60<!-- /wp:button --></div>
     61<!-- /wp:buttons --></div>
     62<!-- /wp:column -->
     63
     64<!-- wp:column {"verticalAlignment":"center","width":30} -->
     65<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:30%"><!-- wp:group {"className":"pattern p-4 pt-10 rounded-xl shadow-xl mb-2 text-center md:text-left","style":{"color":{"background":"#ffffff"}}} -->
     66<div class="wp-block-group pattern p-4 pt-10 rounded-xl shadow-xl mb-2 text-center md:text-left has-background" style="background-color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
     67<p></p>
     68<!-- /wp:paragraph -->
     69
     70<!-- wp:heading {"className":"pattern mb-0","style":{"typography":{"fontSize":72},"color":{"text":"#ca8000"}}} -->
     71<h2 class="pattern mb-0 has-text-color" style="font-size:72px;color:#ca8000"><strong>$58</strong></h2>
     72<!-- /wp:heading -->
     73
     74<!-- wp:paragraph {"className":"pattern mb-0","style":{"color":{"text":"#111111"}}} -->
     75<p class="pattern mb-0 has-text-color" style="color:#111111">Business Plan</p>
     76<!-- /wp:paragraph -->
     77
     78<!-- wp:paragraph -->
     79<p></p>
     80<!-- /wp:paragraph -->
     81
     82<!-- wp:list {"className":"pattern list-none ml-0 text-black text-opacity-50"} -->
     83<ul class="pattern list-none ml-0 text-black text-opacity-50"><li>Powerful Patterns</li><li>Everything is Editable</li><li>Easy to Use</li></ul>
     84<!-- /wp:list --></div></div>
     85<!-- /wp:group -->
     86
     87<!-- wp:buttons {"align":"center"} -->
     88<div class="wp-block-buttons aligncenter"><!-- wp:button {"borderRadius":50,"style":{"color":{"text":"#ffffff","background":"#111111"}},"className":"pattern my-0 is-style-fill"} -->
     89<div class="wp-block-button pattern my-0 is-style-fill"><a class="wp-block-button__link has-text-color has-background" style="border-radius:50px;background-color:#111111;color:#ffffff">Select</a></div>
     90<!-- /wp:button --></div>
     91<!-- /wp:buttons --></div>
     92<!-- /wp:column -->
     93
     94<!-- wp:column {"verticalAlignment":"center","width":30} -->
     95<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:30%"><!-- wp:group {"className":"pattern p-4 pt-10 rounded-xl shadow-xl text-center md:text-left","style":{"color":{"background":"#ffffff"}}} -->
     96<div class="wp-block-group pattern p-4 pt-10 rounded-xl shadow-xl text-center md:text-left has-background" style="background-color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:heading {"level":4,"className":"pattern mb-0","style":{"color":{"text":"#ca8000"}}} -->
     97<h4 class="pattern mb-0 has-text-color" style="color:#ca8000">$92</h4>
     98<!-- /wp:heading -->
     99
     100<!-- wp:paragraph {"className":"pattern mb-0","style":{"color":{"text":"#111111"}}} -->
     101<p class="pattern mb-0 has-text-color" style="color:#111111">Pro Plan</p>
     102<!-- /wp:paragraph -->
     103
     104<!-- wp:paragraph -->
     105<p></p>
     106<!-- /wp:paragraph -->
     107
     108<!-- wp:list {"className":"pattern list-none ml-0 text-black text-opacity-50"} -->
     109<ul class="pattern list-none ml-0 text-black text-opacity-50"><li>Powerful Patterns</li><li>Everything is Editable</li><li>Easy to Use</li></ul>
     110<!-- /wp:list --></div></div>
     111<!-- /wp:group -->
     112
     113<!-- wp:buttons {"align":"center"} -->
     114<div class="wp-block-buttons aligncenter"><!-- wp:button {"borderRadius":50,"style":{"color":{"background":"#f7f7f7","text":"#111111"}},"className":"pattern my-0 is-style-fill"} -->
     115<div class="wp-block-button pattern my-0 is-style-fill"><a class="wp-block-button__link has-text-color has-background" style="border-radius:50px;background-color:#f7f7f7;color:#111111">Select</a></div>
     116<!-- /wp:button --></div>
     117<!-- /wp:buttons --></div>
     118<!-- /wp:column -->
     119
     120<!-- wp:column {"verticalAlignment":"center","width":10,"className":"pattern mb-0"} -->
     121<div class="wp-block-column is-vertically-aligned-center pattern mb-0" style="flex-basis:10%"></div>
     122<!-- /wp:column --></div>
     123<!-- /wp:columns -->
     124
     125<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
     126<p class="has-text-align-center has-large-font-size"></p>
     127<!-- /wp:paragraph --></div></div>
     128<!-- /wp:cover -->';
    16129
    17130return array(

  • pattern/tags/1.0.4/includes/block-patterns/pricing-table/simple.php

    r2369808 r2370765  
    66 */
    77
    8 // Tool to escape strings: https://onlinestringtools.com/escape-string.
    9 // If using Bootstrap or Tailwindcss classes, in order for them to get picked up during the build process place them either at the beginning of a class property or with a space after them at the end of the line before the quotes are escaped.
    10 // i.e. - <div class=\"p-16\">.
    11 // i.e. - <div class=\"p-16 has-background\">.
    12 // i.e. - <div class=\"has-background p-16 \">.
    13 // i.e. - This won't get picked up: <div class=\"has-background p-16\">.
    14 $markup = "
    15 <!-- wp:cover {\"customOverlayColor\":\"#f7f7f7\",\"align\":\"full\",\"className\":\"pattern md:py-16 my-0 h-auto \"} -->\n<div class=\"wp-block-cover alignfull has-background-dim pattern md:py-16 my-0 h-auto \" style=\"background-color:#f7f7f7\"><div class=\"wp-block-cover__inner-container\"><!-- wp:columns {\"align\":\"wide\",\"className\":\"pattern mb-0 md:mb-10 \"} -->\n<div class=\"wp-block-columns alignwide pattern mb-0 md:mb-10 \"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":33.33,\"className\":\"pattern mb-0 \"} -->\n<div class=\"wp-block-column pattern mb-0 \" style=\"flex-basis:33.33%\"><!-- wp:heading {\"align\":\"center\",\"className\":\"pattern mt-0 \",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<h2 class=\"has-text-align-center pattern mt-0 has-text-color\" style=\"color:#111111\">Simple Pricing</h2>\n<!-- /wp:heading -->\n\n<!-- wp:separator {\"customColor\":\"#ca8000\",\"className\":\"pattern my-3 is-style-default\"} -->\n<hr class=\"wp-block-separator has-text-color has-background pattern my-3 is-style-default\" style=\"background-color:#ca8000;color:#ca8000\"/>\n<!-- /wp:separator -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"has-text-align-center has-text-color\" style=\"color:#111111\">Choose a plan.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:spacer {\"height\":40} -->\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\",\"align\":\"wide\",\"className\":\"pattern px-0 \"} -->\n<div class=\"wp-block-columns alignwide are-vertically-aligned-center pattern px-0\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:group {\"className\":\"pattern rounded-xl p-8 md:rounded-r-none shadow \",\"style\":{\"color\":{\"background\":\"#ffffff\"}}} -->\n<div class=\"wp-block-group pattern rounded-xl p-8 md:rounded-r-none shadow has-background\" style=\"background-color:#ffffff\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"level\":5,\"className\":\"pattern mt-0 \",\"style\":{\"color\":{\"text\":\"#e0b265\"}}} -->\n<h5 class=\"pattern mt-0 has-text-color\" style=\"color:#e0b265\">Plan 1</h5>\n<!-- /wp:heading -->\n\n<!-- wp:heading {\"style\":{\"color\":{\"text\":\"#ca8000\"}}} -->\n<h2 class=\"has-text-color\" style=\"color:#ca8000\">$29/mo</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"has-text-color\" style=\"color:#111111\">This plan is perfect for personal use or freelancers that are just getting started.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"borderRadius\":50,\"style\":{\"color\":{\"background\":\"#ffffff\",\"text\":\"#ca8000\"}},\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:50px;background-color:#ffffff;color:#ca8000\">Buy Now</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div></div>\n<!-- /wp:group --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"className\":\"pattern ml-0 \"} -->\n<div class=\"wp-block-column is-vertically-aligned-center pattern ml-0\"><!-- wp:group {\"className\":\"pattern p-8 rounded-xl shadow \",\"style\":{\"color\":{\"background\":\"#ca8000\"}}} -->\n<div class=\"wp-block-group pattern p-8 rounded-xl shadow has-background\" style=\"background-color:#ca8000\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"level\":5,\"className\":\"pattern mt-0 \",\"style\":{\"color\":{\"text\":\"#e0b265\"}}} -->\n<h5 class=\"pattern mt-0 has-text-color\" style=\"color:#e0b265\">Plan 2</h5>\n<!-- /wp:heading -->\n\n<!-- wp:heading {\"style\":{\"color\":{\"text\":\"#ffffff\"}}} -->\n<h2 class=\"has-text-color\" style=\"color:#ffffff\">$79/mo</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"style\":{\"color\":{\"text\":\"#ffffff\"}}} -->\n<p class=\"has-text-color\" style=\"color:#ffffff\">Our most popular plan is meant for small or fast growing businesses.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"style\":{\"color\":{\"text\":\"#ffffff\"}}} -->\n<p class=\"has-text-color\" style=\"color:#ffffff\">What are you waiting for? Pick this plan!</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"borderRadius\":50,\"style\":{\"color\":{\"background\":\"#ca8000\",\"text\":\"#ffffff\"}},\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:50px;background-color:#ca8000;color:#ffffff\">Buy Now</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div></div>\n<!-- /wp:group --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"className\":\"pattern ml-0 rounded-l-0 \"} -->\n<div class=\"wp-block-column is-vertically-aligned-center pattern ml-0 rounded-l-0 \"><!-- wp:group {\"className\":\"pattern rounded-xl p-8 md:rounded-l-none shadow \",\"style\":{\"color\":{\"background\":\"#ffffff\"}}} -->\n<div class=\"wp-block-group pattern rounded-xl p-8 md:rounded-l-none shadow has-background\" style=\"background-color:#ffffff\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"level\":5,\"className\":\"pattern mt-0 \",\"style\":{\"color\":{\"text\":\"#e0b265\"}}} -->\n<h5 class=\"pattern mt-0 has-text-color\" style=\"color:#e0b265\">Plan 3</h5>\n<!-- /wp:heading -->\n\n<!-- wp:heading {\"style\":{\"color\":{\"text\":\"#ca8000\"}}} -->\n<h2 class=\"has-text-color\" style=\"color:#ca8000\">$199/mo</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"has-text-color\" style=\"color:#111111\">This plan is our Enterprise level plan and is the perfect plan for big business.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"borderRadius\":50,\"style\":{\"color\":{\"background\":\"#ffffff\",\"text\":\"#ca8000\"}},\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:50px;background-color:#ffffff;color:#ca8000\">Buy Now</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div></div>\n<!-- /wp:group --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"placeholder\":\"Write title…\",\"fontSize\":\"large\"} -->\n<p class=\"has-text-align-center has-large-font-size\"></p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:cover -->";
     8$markup = '<!-- wp:cover {"customOverlayColor":"#f7f7f7","align":"full","className":"pattern md:py-16 my-0 h-auto"} -->
     9<div class="wp-block-cover alignfull has-background-dim pattern md:py-16 my-0 h-auto" style="background-color:#f7f7f7"><div class="wp-block-cover__inner-container"><!-- wp:columns {"align":"wide","className":"pattern mb-0 md:mb-10"} -->
     10<div class="wp-block-columns alignwide pattern mb-0 md:mb-10"><!-- wp:column {"verticalAlignment":"center"} -->
     11<div class="wp-block-column is-vertically-aligned-center"></div>
     12<!-- /wp:column -->
     13
     14<!-- wp:column {"width":33.33,"className":"pattern mb-0"} -->
     15<div class="wp-block-column pattern mb-0" style="flex-basis:33.33%"><!-- wp:heading {"align":"center","className":"pattern mt-0","style":{"color":{"text":"#111111"}}} -->
     16<h2 class="has-text-align-center pattern mt-0 has-text-color" style="color:#111111">Simple Pricing</h2>
     17<!-- /wp:heading -->
     18
     19<!-- wp:separator {"customColor":"#ca8000","className":"pattern my-3 is-style-default"} -->
     20<hr class="wp-block-separator has-text-color has-background pattern my-3 is-style-default" style="background-color:#ca8000;color:#ca8000"/>
     21<!-- /wp:separator -->
     22
     23<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#111111"}}} -->
     24<p class="has-text-align-center has-text-color" style="color:#111111">Choose a plan.</p>
     25<!-- /wp:paragraph -->
     26
     27<!-- wp:spacer {"height":40} -->
     28<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
     29<!-- /wp:spacer --></div>
     30<!-- /wp:column -->
     31
     32<!-- wp:column {"verticalAlignment":"center"} -->
     33<div class="wp-block-column is-vertically-aligned-center"></div>
     34<!-- /wp:column --></div>
     35<!-- /wp:columns -->
     36
     37<!-- wp:columns {"verticalAlignment":"center","align":"wide","className":"pattern px-0"} -->
     38<div class="wp-block-columns alignwide are-vertically-aligned-center pattern px-0"><!-- wp:column {"verticalAlignment":"center"} -->
     39<div class="wp-block-column is-vertically-aligned-center"><!-- wp:group {"className":"pattern rounded-xl p-8 md:rounded-r-none shadow","style":{"color":{"background":"#ffffff"}}} -->
     40<div class="wp-block-group pattern rounded-xl p-8 md:rounded-r-none shadow has-background" style="background-color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:heading {"level":5,"className":"pattern mt-0","style":{"color":{"text":"#e0b265"}}} -->
     41<h5 class="pattern mt-0 has-text-color" style="color:#e0b265">Plan 1</h5>
     42<!-- /wp:heading -->
     43
     44<!-- wp:heading {"style":{"color":{"text":"#ca8000"}}} -->
     45<h2 class="has-text-color" style="color:#ca8000">$29/mo</h2>
     46<!-- /wp:heading -->
     47
     48<!-- wp:paragraph {"style":{"color":{"text":"#111111"}}} -->
     49<p class="has-text-color" style="color:#111111">This plan is perfect for personal use or freelancers that are just getting started.</p>
     50<!-- /wp:paragraph -->
     51
     52<!-- wp:buttons {"align":"center"} -->
     53<div class="wp-block-buttons aligncenter"><!-- wp:button {"borderRadius":50,"style":{"color":{"background":"#ffffff","text":"#ca8000"}},"className":"is-style-outline"} -->
     54<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-background" style="border-radius:50px;background-color:#ffffff;color:#ca8000">Buy Now</a></div>
     55<!-- /wp:button --></div>
     56<!-- /wp:buttons --></div></div>
     57<!-- /wp:group --></div>
     58<!-- /wp:column -->
     59
     60<!-- wp:column {"verticalAlignment":"center","className":"pattern ml-0"} -->
     61<div class="wp-block-column is-vertically-aligned-center pattern ml-0"><!-- wp:group {"className":"pattern p-8 rounded-xl shadow","style":{"color":{"background":"#ca8000"}}} -->
     62<div class="wp-block-group pattern p-8 rounded-xl shadow has-background" style="background-color:#ca8000"><div class="wp-block-group__inner-container"><!-- wp:heading {"level":5,"className":"pattern mt-0","style":{"color":{"text":"#e0b265"}}} -->
     63<h5 class="pattern mt-0 has-text-color" style="color:#e0b265">Plan 2</h5>
     64<!-- /wp:heading -->
     65
     66<!-- wp:heading {"style":{"color":{"text":"#ffffff"}}} -->
     67<h2 class="has-text-color" style="color:#ffffff">$79/mo</h2>
     68<!-- /wp:heading -->
     69
     70<!-- wp:paragraph {"style":{"color":{"text":"#ffffff"}}} -->
     71<p class="has-text-color" style="color:#ffffff">Our most popular plan is meant for small or fast growing businesses.</p>
     72<!-- /wp:paragraph -->
     73
     74<!-- wp:paragraph {"style":{"color":{"text":"#ffffff"}}} -->
     75<p class="has-text-color" style="color:#ffffff">What are you waiting for? Pick this plan!</p>
     76<!-- /wp:paragraph -->
     77
     78<!-- wp:buttons {"align":"center"} -->
     79<div class="wp-block-buttons aligncenter"><!-- wp:button {"borderRadius":50,"style":{"color":{"background":"#ca8000","text":"#ffffff"}},"className":"is-style-outline"} -->
     80<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-background" style="border-radius:50px;background-color:#ca8000;color:#ffffff">Buy Now</a></div>
     81<!-- /wp:button --></div>
     82<!-- /wp:buttons --></div></div>
     83<!-- /wp:group --></div>
     84<!-- /wp:column -->
     85
     86<!-- wp:column {"verticalAlignment":"center","className":"pattern ml-0 rounded-l-0"} -->
     87<div class="wp-block-column is-vertically-aligned-center pattern ml-0 rounded-l-0"><!-- wp:group {"className":"pattern rounded-xl p-8 md:rounded-l-none shadow","style":{"color":{"background":"#ffffff"}}} -->
     88<div class="wp-block-group pattern rounded-xl p-8 md:rounded-l-none shadow has-background" style="background-color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:heading {"level":5,"className":"pattern mt-0","style":{"color":{"text":"#e0b265"}}} -->
     89<h5 class="pattern mt-0 has-text-color" style="color:#e0b265">Plan 3</h5>
     90<!-- /wp:heading -->
     91
     92<!-- wp:heading {"style":{"color":{"text":"#ca8000"}}} -->
     93<h2 class="has-text-color" style="color:#ca8000">$199/mo</h2>
     94<!-- /wp:heading -->
     95
     96<!-- wp:paragraph {"style":{"color":{"text":"#111111"}}} -->
     97<p class="has-text-color" style="color:#111111">This plan is our Enterprise level plan and is the perfect plan for big business.</p>
     98<!-- /wp:paragraph -->
     99
     100<!-- wp:buttons {"align":"center"} -->
     101<div class="wp-block-buttons aligncenter"><!-- wp:button {"borderRadius":50,"style":{"color":{"background":"#ffffff","text":"#ca8000"}},"className":"is-style-outline"} -->
     102<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-background" style="border-radius:50px;background-color:#ffffff;color:#ca8000">Buy Now</a></div>
     103<!-- /wp:button --></div>
     104<!-- /wp:buttons --></div></div>
     105<!-- /wp:group --></div>
     106<!-- /wp:column --></div>
     107<!-- /wp:columns -->
     108
     109<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
     110<p class="has-text-align-center has-large-font-size"></p>
     111<!-- /wp:paragraph --></div></div>
     112<!-- /wp:cover -->';
    16113
    17114return array(

  • pattern/tags/1.0.4/includes/block-patterns/pricing-table/stacked.php

    r2369808 r2370765  
    66 */
    77
    8 // Tool to escape strings: https://onlinestringtools.com/escape-string.
    9 // If using Bootstrap or Tailwindcss classes, in order for them to get picked up during the build process place them either at the beginning of a class property or with a space after them at the end of the line before the quotes are escaped.
    10 // i.e. - <div class=\"p-16\">.
    11 // i.e. - <div class=\"p-16 has-background\">.
    12 // i.e. - <div class=\"has-background p-16 \">.
    13 // i.e. - This won't get picked up: <div class=\"has-background p-16\">.
    14 $markup = "
    15 <!-- wp:cover {\"customOverlayColor\":\"#fff6e5\",\"align\":\"full\",\"className\":\"pattern md:py-16 my-0 h-auto \"} -->\n<div class=\"wp-block-cover alignfull has-background-dim pattern md:py-16 my-0 h-auto \" style=\"background-color:#fff6e5\"><div class=\"wp-block-cover__inner-container\"><!-- wp:columns {\"align\":\"full\",\"className\":\"pattern px-0 \"} -->\n<div class=\"wp-block-columns alignfull pattern px-0 \"><!-- wp:column {\"width\":25} -->\n<div class=\"wp-block-column\" style=\"flex-basis:25%\"></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":50} -->\n<div class=\"wp-block-column\" style=\"flex-basis:50%\"><!-- wp:heading {\"align\":\"center\",\"className\":\"pattern mt-0 \",\"style\":{\"color\":{\"text\":\"#ca8000\"}}} -->\n<h2 class=\"has-text-align-center pattern mt-0 has-text-color\" style=\"color:#ca8000\">Get Started Today</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"has-text-align-center has-text-color\" style=\"color:#111111\">Pay monthly. No Commitments.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:group {\"className\":\"pattern p-4 rounded-xl shadow mb-2 \",\"style\":{\"color\":{\"background\":\"#ffffff\"}}} -->\n<div class=\"wp-block-group pattern p-4 rounded-xl shadow mb-2 has-background\" style=\"background-color:#ffffff\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns {\"className\":\"pattern py-0 my-0 \",\"textColor\":\"primary\"} -->\n<div class=\"wp-block-columns pattern py-0 my-0 has-primary-color has-text-color\"><!-- wp:column {\"className\":\"pattern max-w-1/2 mb-0 \"} -->\n<div class=\"wp-block-column pattern max-w-1/2 mb-0 \"><!-- wp:paragraph {\"className\":\"pattern mb-0\",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"pattern mb-0 has-text-color\" style=\"color:#111111\">Shared Space</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"level\":4,\"className\":\"pattern my-0 \",\"style\":{\"color\":{\"text\":\"#ca8000\"}}} -->\n<h4 class=\"pattern my-0 has-text-color\" style=\"color:#ca8000\">$129/mo</h4>\n<!-- /wp:heading --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"className\":\"pattern max-w-1/2 text-right \"} -->\n<div class=\"wp-block-column is-vertically-aligned-center pattern max-w-1/2 text-right \"><!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"borderRadius\":12,\"style\":{\"color\":{\"text\":\"#ca8000\"}},\"className\":\"pattern my-0 is-style-outline\"} -->\n<div class=\"wp-block-button pattern my-0 is-style-outline\"><a class=\"wp-block-button__link has-text-color\" style=\"border-radius:12px;color:#ca8000\">Select</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->\n\n<!-- wp:group {\"className\":\"pattern p-4 rounded-xl shadow-xl mb-2 \",\"style\":{\"color\":{\"background\":\"#ca8000\"}}} -->\n<div class=\"wp-block-group pattern p-4 rounded-xl shadow-xl mb-2 has-background\" style=\"background-color:#ca8000\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns {\"className\":\"pattern py-0 my-0 \",\"style\":{\"color\":{\"text\":\"#ffffff\"}}} -->\n<div class=\"wp-block-columns pattern py-0 my-0 has-text-color\" style=\"color:#ffffff\"><!-- wp:column {\"className\":\"pattern max-w-1/2 mb-0 \"} -->\n<div class=\"wp-block-column pattern max-w-1/2 mb-0 \"><!-- wp:paragraph {\"className\":\"pattern mb-0\",\"style\":{\"color\":{\"text\":\"#e0b265\"}}} -->\n<p class=\"pattern mb-0 has-text-color\" style=\"color:#e0b265\">Private Space</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"level\":4,\"className\":\"pattern my-0\",\"style\":{\"color\":{\"text\":\"#ffffff\"}}} -->\n<h4 class=\"pattern my-0 has-text-color\" style=\"color:#ffffff\">$199/mo</h4>\n<!-- /wp:heading --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"className\":\"pattern max-w-1/2 text-right \"} -->\n<div class=\"wp-block-column is-vertically-aligned-center pattern max-w-1/2 text-right \"><!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"borderRadius\":12,\"style\":{\"color\":{\"background\":\"#ffffff\",\"text\":\"#ca8000\"}},\"className\":\"pattern my-0 is-style-fill\"} -->\n<div class=\"wp-block-button pattern my-0 is-style-fill\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:12px;background-color:#ffffff;color:#ca8000\">Select</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:group -->\n\n<!-- wp:group {\"className\":\"pattern p-4 rounded-xl shadow \",\"style\":{\"color\":{\"background\":\"#ffffff\"}}} -->\n<div class=\"wp-block-group pattern p-4 rounded-xl shadow has-background\" style=\"background-color:#ffffff\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns {\"className\":\"pattern py-0 my-0 \",\"textColor\":\"primary\"} -->\n<div class=\"wp-block-columns pattern py-0 my-0 has-primary-color has-text-color\"><!-- wp:column {\"className\":\"pattern max-w-1/2 mb-0 \"} -->\n<div class=\"wp-block-column pattern max-w-1/2 mb-0\"><!-- wp:paragraph {\"className\":\"pattern mb-0 \",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"pattern mb-0 has-text-color\" style=\"color:#111111\">Big Office</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"level\":4,\"className\":\"pattern my-0 \",\"style\":{\"color\":{\"text\":\"#ca8000\"}}} -->\n<h4 class=\"pattern my-0 has-text-color\" style=\"color:#ca8000\">$999/mo</h4>\n<!-- /wp:heading --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"className\":\"pattern max-w-1/2 text-right\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center pattern max-w-1/2 text-right \"><!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"borderRadius\":12,\"style\":{\"color\":{\"text\":\"#ca8000\"}},\"className\":\"pattern my-0 is-style-outline\"} -->\n<div class=\"wp-block-button pattern my-0 is-style-outline\"><a class=\"wp-block-button__link has-text-color\" style=\"border-radius:12px;color:#ca8000\">Select</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":25} -->\n<div class=\"wp-block-column\" style=\"flex-basis:25%\"></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"placeholder\":\"Write title…\",\"fontSize\":\"large\"} -->\n<p class=\"has-text-align-center has-large-font-size\"></p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:cover -->";
     8$markup = '<!-- wp:cover {"customOverlayColor":"#fff6e5","align":"full","className":"pattern md:py-16 my-0 h-auto"} -->
     9<div class="wp-block-cover alignfull has-background-dim pattern md:py-16 my-0 h-auto" style="background-color:#fff6e5"><div class="wp-block-cover__inner-container"><!-- wp:columns {"align":"full","className":"pattern px-0"} -->
     10<div class="wp-block-columns alignfull pattern px-0"><!-- wp:column {"width":25} -->
     11<div class="wp-block-column" style="flex-basis:25%"></div>
     12<!-- /wp:column -->
     13
     14<!-- wp:column {"width":50} -->
     15<div class="wp-block-column" style="flex-basis:50%"><!-- wp:heading {"align":"center","className":"pattern mt-0","style":{"color":{"text":"#ca8000"}}} -->
     16<h2 class="has-text-align-center pattern mt-0 has-text-color" style="color:#ca8000">Get Started Today</h2>
     17<!-- /wp:heading -->
     18
     19<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#111111"}}} -->
     20<p class="has-text-align-center has-text-color" style="color:#111111">Pay monthly. No Commitments.</p>
     21<!-- /wp:paragraph -->
     22
     23<!-- wp:group {"className":"pattern p-4 rounded-xl shadow mb-2","style":{"color":{"background":"#ffffff"}}} -->
     24<div class="wp-block-group pattern p-4 rounded-xl shadow mb-2 has-background" style="background-color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:columns {"className":"pattern py-0 my-0","textColor":"primary"} -->
     25<div class="wp-block-columns pattern py-0 my-0 has-primary-color has-text-color"><!-- wp:column {"className":"pattern max-w-1/2 mb-0"} -->
     26<div class="wp-block-column pattern max-w-1/2 mb-0"><!-- wp:paragraph {"className":"pattern mb-0","style":{"color":{"text":"#111111"}}} -->
     27<p class="pattern mb-0 has-text-color" style="color:#111111">Shared Space</p>
     28<!-- /wp:paragraph -->
     29
     30<!-- wp:heading {"level":4,"className":"pattern my-0","style":{"color":{"text":"#ca8000"}}} -->
     31<h4 class="pattern my-0 has-text-color" style="color:#ca8000">$129/mo</h4>
     32<!-- /wp:heading --></div>
     33<!-- /wp:column -->
     34
     35<!-- wp:column {"verticalAlignment":"center","className":"pattern max-w-1/2 text-right"} -->
     36<div class="wp-block-column is-vertically-aligned-center pattern max-w-1/2 text-right"><!-- wp:buttons -->
     37<div class="wp-block-buttons"><!-- wp:button {"borderRadius":12,"style":{"color":{"text":"#ca8000"}},"className":"pattern my-0 is-style-outline"} -->
     38<div class="wp-block-button pattern my-0 is-style-outline"><a class="wp-block-button__link has-text-color" style="border-radius:12px;color:#ca8000">Select</a></div>
     39<!-- /wp:button --></div>
     40<!-- /wp:buttons --></div>
     41<!-- /wp:column --></div>
     42<!-- /wp:columns --></div></div>
     43<!-- /wp:group -->
     44
     45<!-- wp:group {"className":"pattern p-4 rounded-xl shadow-xl mb-2","style":{"color":{"background":"#ca8000"}}} -->
     46<div class="wp-block-group pattern p-4 rounded-xl shadow-xl mb-2 has-background" style="background-color:#ca8000"><div class="wp-block-group__inner-container"><!-- wp:columns {"className":"pattern py-0 my-0","style":{"color":{"text":"#ffffff"}}} -->
     47<div class="wp-block-columns pattern py-0 my-0 has-text-color" style="color:#ffffff"><!-- wp:column {"className":"pattern max-w-1/2 mb-0"} -->
     48<div class="wp-block-column pattern max-w-1/2 mb-0"><!-- wp:paragraph {"className":"pattern mb-0","style":{"color":{"text":"#e0b265"}}} -->
     49<p class="pattern mb-0 has-text-color" style="color:#e0b265">Private Space</p>
     50<!-- /wp:paragraph -->
     51
     52<!-- wp:heading {"level":4,"className":"pattern my-0","style":{"color":{"text":"#ffffff"}}} -->
     53<h4 class="pattern my-0 has-text-color" style="color:#ffffff">$199/mo</h4>
     54<!-- /wp:heading --></div>
     55<!-- /wp:column -->
     56
     57<!-- wp:column {"verticalAlignment":"center","className":"pattern max-w-1/2 text-right"} -->
     58<div class="wp-block-column is-vertically-aligned-center pattern max-w-1/2 text-right"><!-- wp:buttons -->
     59<div class="wp-block-buttons"><!-- wp:button {"borderRadius":12,"style":{"color":{"background":"#ffffff","text":"#ca8000"}},"className":"pattern my-0 is-style-fill"} -->
     60<div class="wp-block-button pattern my-0 is-style-fill"><a class="wp-block-button__link has-text-color has-background" style="border-radius:12px;background-color:#ffffff;color:#ca8000">Select</a></div>
     61<!-- /wp:button --></div>
     62<!-- /wp:buttons --></div>
     63<!-- /wp:column --></div>
     64<!-- /wp:columns -->
     65
     66<!-- wp:paragraph -->
     67<p></p>
     68<!-- /wp:paragraph --></div></div>
     69<!-- /wp:group -->
     70
     71<!-- wp:group {"className":"pattern p-4 rounded-xl shadow","style":{"color":{"background":"#ffffff"}}} -->
     72<div class="wp-block-group pattern p-4 rounded-xl shadow has-background" style="background-color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:columns {"className":"pattern py-0 my-0","textColor":"primary"} -->
     73<div class="wp-block-columns pattern py-0 my-0 has-primary-color has-text-color"><!-- wp:column {"className":"pattern max-w-1/2 mb-0"} -->
     74<div class="wp-block-column pattern max-w-1/2 mb-0"><!-- wp:paragraph {"className":"pattern mb-0","style":{"color":{"text":"#111111"}}} -->
     75<p class="pattern mb-0 has-text-color" style="color:#111111">Big Office</p>
     76<!-- /wp:paragraph -->
     77
     78<!-- wp:heading {"level":4,"className":"pattern my-0","style":{"color":{"text":"#ca8000"}}} -->
     79<h4 class="pattern my-0 has-text-color" style="color:#ca8000">$999/mo</h4>
     80<!-- /wp:heading --></div>
     81<!-- /wp:column -->
     82
     83<!-- wp:column {"verticalAlignment":"center","className":"pattern max-w-1/2 text-right"} -->
     84<div class="wp-block-column is-vertically-aligned-center pattern max-w-1/2 text-right"><!-- wp:buttons -->
     85<div class="wp-block-buttons"><!-- wp:button {"borderRadius":12,"style":{"color":{"text":"#ca8000"}},"className":"pattern my-0 is-style-outline"} -->
     86<div class="wp-block-button pattern my-0 is-style-outline"><a class="wp-block-button__link has-text-color" style="border-radius:12px;color:#ca8000">Select</a></div>
     87<!-- /wp:button --></div>
     88<!-- /wp:buttons --></div>
     89<!-- /wp:column --></div>
     90<!-- /wp:columns --></div></div>
     91<!-- /wp:group --></div>
     92<!-- /wp:column -->
     93
     94<!-- wp:column {"width":25} -->
     95<div class="wp-block-column" style="flex-basis:25%"></div>
     96<!-- /wp:column --></div>
     97<!-- /wp:columns -->
     98
     99<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
     100<p class="has-text-align-center has-large-font-size"></p>
     101<!-- /wp:paragraph --></div></div>
     102<!-- /wp:cover -->';
    16103
    17104return array(

  • pattern/tags/1.0.4/includes/class-register-block-patterns.php

    r2369056 r2370765  
    5656            */
    5757            register_block_pattern_category(
    58                 $slug,
     58                'pricing',
    5959                array(
    6060                    'label' => __( 'Pricing', 'pattern' ),
     61                )
     62            );
     63
     64            /**
     65            * Register block pattern category
     66            */
     67            register_block_pattern_category(
     68                'faq',
     69                array(
     70                    'label' => __( 'FAQ', 'pattern' ),
    6171                )
    6272            );

  • pattern/tags/1.0.4/readme.txt

    r2369808 r2370765  
    11=== Pattern ===
    22Contributors:      blockhandbook, leeshadle
    3 Tags:              pattern, patterns, block patterns, section, sections
     3Tags:              pattern, patterns, block patterns, block pattern, section, sections
    44Requires at least: 5.5
    55Tested up to:      5.5
    6 Stable tag:        1.0.3
     6Stable tag:        1.0.4
    77Requires PHP:      7.0.0
    88License:           GPL-2.0-or-later
    … …  
    1515We are OBSESSED w/ block patterns and we're going to build a whole bunch of 'em.  To kick things off we're starting w/ a handful of pricing table section.  I don't know about you but I love a good pricing table.  It's so critical to your business and it needs to make a great impression when a customer is about to make a purchase.
    1616
     17## Categories
     18
     19- Pricing tables
     20- FAQs
     21- More coming soon!
     22
     23### Pricing Tables
     24
     25![Simple Pricing Table](https://blockhandbook.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-25-at-5.24.48-PM.png)
     26![Cover Pricing Table](https://blockhandbook.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-25-at-5.28.26-PM.png)
     27![Stacked Pricing Table](https://blockhandbook.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-25-at-5.28.48-PM.png)
     28![Floating Pricing Table](https://blockhandbook.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-25-at-5.29.11-PM.png)
     29
     30### Pricing Tables
     31
     32![Simple Pricing Table](https://blockhandbook.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-27-at-5.47.17-PM.png)
     33![Cover Pricing Table](https://blockhandbook.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-27-at-5.33.10-PM.png)
     34![Stacked Pricing Table](https://blockhandbook.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-27-at-5.47.38-PM.png)
     35![Floating Pricing Table](https://blockhandbook.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-27-at-5.48.04-PM.png)
     36
    1737== Screenshots ==
    1838
    … …  
    21413. A stacked pricing table
    22424. Another stylish pricing table pattern
     435. A FAQ section w/ a background image
    2344
    2445== Installation ==
    … …  
    3152== Frequently Asked Questions ==
    3253
    33 = How many patterns, or website sections, do you currently offer? =
     54= How many block patterns, or website sections, do you currently offer? =
    3455
    35 We currently have 4 professionally designed and built pricing tables.
     56We currently offer the following professionally designed and built patterns:
     57-  4 pricing tables
     58-  4 FAQ sections
     59
     60= How will these patterns look on my website? =
     61
     62Results WILL vary.  We have built these patterns to leverage both your theme's styling and the pattern plugin styling.  Right now, most of the font styles including sizing and font-family will be driven by the theme you're using.  The structural styling will be driven mostly by your theme as well as the Gutenberg editor styles.  Finally, most of the cosmetic styling such as box-shadows and border-radius will be done by the pattern plugin.  We would love any and all feedback on this approach.
    3663
    3764== Changelog ==
     65
     66= 1.0.4 =
     67* Adding FAQ patterns
     68
     69= 1.0.3 =
     70* Updating pricing table CSS styling
     71
     72= 1.0.2 =
     73* Updating pricing table placeholder language
    3874
    3975= 1.0.1 =

  • pattern/tags/1.0.4/vendor/autoload.php

    r2369808 r2370765  
    55require_once __DIR__ . '/composer/autoload_real.php';
    66
    7 return ComposerAutoloaderInitb125f7b09fa721789b7f4e37dae2fc07::getLoader();
     7return ComposerAutoloaderInitf50bfc7f45adbd580c0da2328e79e017::getLoader();

  • pattern/tags/1.0.4/vendor/composer/autoload_real.php

    r2369808 r2370765  
    33// autoload_real.php @generated by Composer
    44
    5 class ComposerAutoloaderInitb125f7b09fa721789b7f4e37dae2fc07
     5class ComposerAutoloaderInitf50bfc7f45adbd580c0da2328e79e017
    66{
    77    private static $loader;
    … …  
    2323        }
    2424
    25         spl_autoload_register(array('ComposerAutoloaderInitb125f7b09fa721789b7f4e37dae2fc07', 'loadClassLoader'), true, true);
     25        spl_autoload_register(array('ComposerAutoloaderInitf50bfc7f45adbd580c0da2328e79e017', 'loadClassLoader'), true, true);
    2626        self::$loader = $loader = new \Composer\Autoload\ClassLoader();
    27         spl_autoload_unregister(array('ComposerAutoloaderInitb125f7b09fa721789b7f4e37dae2fc07', 'loadClassLoader'));
     27        spl_autoload_unregister(array('ComposerAutoloaderInitf50bfc7f45adbd580c0da2328e79e017', 'loadClassLoader'));
    2828
    2929        $useStaticLoader = PHP_VERSION_ID >= 50600 && !defined('HHVM_VERSION') && (!function_exists('zend_loader_file_encoded') || !zend_loader_file_encoded());
    … …  
    3131            require_once __DIR__ . '/autoload_static.php';
    3232
    33             call_user_func(\Composer\Autoload\ComposerStaticInitb125f7b09fa721789b7f4e37dae2fc07::getInitializer($loader));
     33            call_user_func(\Composer\Autoload\ComposerStaticInitf50bfc7f45adbd580c0da2328e79e017::getInitializer($loader));
    3434        } else {
    3535            $map = require __DIR__ . '/autoload_namespaces.php';

  • pattern/tags/1.0.4/vendor/composer/autoload_static.php

    r2369808 r2370765  
    55namespace Composer\Autoload;
    66
    7 class ComposerStaticInitb125f7b09fa721789b7f4e37dae2fc07
     7class ComposerStaticInitf50bfc7f45adbd580c0da2328e79e017
    88{
    99    public static $prefixLengthsPsr4 = array (
    … …  
    3030    {
    3131        return \Closure::bind(function () use ($loader) {
    32             $loader->prefixLengthsPsr4 = ComposerStaticInitb125f7b09fa721789b7f4e37dae2fc07::$prefixLengthsPsr4;
    33             $loader->prefixDirsPsr4 = ComposerStaticInitb125f7b09fa721789b7f4e37dae2fc07::$prefixDirsPsr4;
    34             $loader->classMap = ComposerStaticInitb125f7b09fa721789b7f4e37dae2fc07::$classMap;
     32            $loader->prefixLengthsPsr4 = ComposerStaticInitf50bfc7f45adbd580c0da2328e79e017::$prefixLengthsPsr4;
     33            $loader->prefixDirsPsr4 = ComposerStaticInitf50bfc7f45adbd580c0da2328e79e017::$prefixDirsPsr4;
     34            $loader->classMap = ComposerStaticInitf50bfc7f45adbd580c0da2328e79e017::$classMap;
    3535
    3636        }, null, ClassLoader::class);

  • pattern/trunk/build/tailwind.css

    r2369808 r2370765  
    141141}
    142142
     143[class*="pattern"].h-full {
     144  height: 100% !important;
     145}
     146
    143147[class*="pattern"].list-none {
    144148  list-style-type: none !important;
    … …  
    181185[class*="pattern"].p-8 {
    182186  padding: 32px !important;
    183 }
    184 
    185 [class*="pattern"].p-16 {
    186   padding: 64px !important;
    187187}
    188188
    … …  
    269269    }
    270270  }
     271
     272  [class*="pattern"].sm\:p-10 {
     273    padding: 40px !important;
     274  }
    271275}
    272276

  • pattern/trunk/class-plugin.php

    r2369808 r2370765  
    33 * Plugin Name: Pattern
    44 * Description: A growing collection of beautiful block patterns, or website sections, that make it super easy to quickly build beautiful websites.
    5  * Version: 1.0.3
     5 * Version: 1.0.4
    66 * Plugin URI: https://blockhandbook.com
    77 * Author: Blockhandbook
    … …  
    9494            $this->slug_snake_case = 'pattern';
    9595            $this->textdomain      = 'pattern';
    96             $this->version         = '1.0.2';
     96            $this->version         = '1.0.4';
    9797        }
    9898

  • pattern/trunk/includes/block-patterns/pricing-table/cover.php

    r2369808 r2370765  
    66 */
    77
    8 // Tool to escape strings: https://onlinestringtools.com/escape-string.
    9 // If using Bootstrap or Tailwindcss classes, in order for them to get picked up during the build process place them either at the beginning of a class property or with a space after them at the end of the line before the quotes are escaped.
    10 // i.e. - <div class=\"p-16\">.
    11 // i.e. - <div class=\"p-16 has-background\">.
    12 // i.e. - <div class=\"has-background p-16 \">.
    13 // i.e. - This won't get picked up: <div class=\"has-background p-16\">.
    14 $img_url = '/wp-content/plugins/pattern/src/assets/img/cover-pattern-bg-img.jpg';
    15 $markup = "
    16 <!-- wp:cover {\"url\":\"$img_url\",\"id\":56,\"dimRatio\":0,\"customOverlayColor\":\"#ffffff\",\"align\":\"full\",\"className\":\"pattern my-0 py-10 h-auto \"} -->\n<div class=\"wp-block-cover alignfull pattern my-0 py-10 h-auto \" style=\"background-image:url($img_url);background-color:#ffffff\"><div class=\"wp-block-cover__inner-container\"><!-- wp:group {\"className\":\"test pattern p-8 md:p-16 rounded-xl shadow-xl \",\"style\":{\"color\":{\"gradient\":\"linear-gradient(135deg,rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.9) 100%)\"}}} -->\n<div class=\"wp-block-group test pattern p-8 md:p-16 rounded-xl shadow-xl has-background\" style=\"background:linear-gradient(135deg,rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.9) 100%)\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"align\":\"center\",\"className\":\"pattern mt-0 \",\"style\":{\"typography\":{\"fontSize\":72},\"color\":{\"text\":\"#ca8000\"}}} -->\n<h2 class=\"has-text-align-center pattern mt-0 has-text-color\" style=\"font-size:72px;color:#ca8000\">$249</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"className\":\"pattern my-0\",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"has-text-align-center pattern my-0 has-text-color\" style=\"color:#111111\"><strong>Template</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:group {\"className\":\"pattern pb-0 mb-0 \"} -->\n<div class=\"wp-block-group pattern pb-0 mb-0 \"><div class=\"wp-block-group__inner-container\"><!-- wp:paragraph {\"align\":\"center\",\"className\":\"pattern my-0 \",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"has-text-align-center pattern my-0 has-text-color\" style=\"color:#111111\">Unlimited Pricing Tables</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"className\":\"pattern my-0 \",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"has-text-align-center pattern my-0 has-text-color\" style=\"color:#111111\">Stylish Designs</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"className\":\"pattern my-0 \",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"has-text-align-center pattern my-0 has-text-color\" style=\"color:#111111\">Edit w/ Ease</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons {\"align\":\"center\",\"className\":\"pattern mt-0 pt-0 \"} -->\n<div class=\"wp-block-buttons aligncenter pattern mt-0 pt-0 \"><!-- wp:button {\"borderRadius\":50,\"style\":{\"color\":{\"background\":\"#ca8000\",\"text\":\"#ffffff\"}},\"className\":\"pattern mb-0 \"} -->\n<div class=\"wp-block-button pattern mb-0 \"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:50px;background-color:#ca8000;color:#ffffff\">Purchase</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div></div>\n<!-- /wp:group --></div></div>\n<!-- /wp:group --></div></div>\n<!-- /wp:cover -->";
     8$markup = '<!-- wp:cover {"url":"https://images.unsplash.com/photo-1499570023676-b0a761678e07?ixlib=rb-1.2.1\u0026ixid=eyJhcHBfaWQiOjE2MTIzN30","id":56,"dimRatio":0,"customOverlayColor":"#ffffff","align":"full","className":"pattern my-0 py-10 h-auto"} -->
     9<div class="wp-block-cover alignfull pattern my-0 py-10 h-auto" style="background-image:url(https://images.unsplash.com/photo-1499570023676-b0a761678e07?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjE2MTIzN30);background-color:#ffffff"><div class="wp-block-cover__inner-container"><!-- wp:group {"className":"test pattern p-8 md:p-16 rounded-xl shadow-xl","style":{"color":{"gradient":"linear-gradient(135deg,rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.9) 100%)"}}} -->
     10<div class="wp-block-group test pattern p-8 md:p-16 rounded-xl shadow-xl has-background" style="background:linear-gradient(135deg,rgba(255,255,255,0.9) 0%,rgba(255,255,255,0.9) 100%)"><div class="wp-block-group__inner-container"><!-- wp:heading {"align":"center","className":"pattern mt-0","style":{"typography":{"fontSize":72},"color":{"text":"#ca8000"}}} -->
     11<h2 class="has-text-align-center pattern mt-0 has-text-color" style="font-size:72px;color:#ca8000">$249</h2>
     12<!-- /wp:heading -->
     13
     14<!-- wp:paragraph {"align":"center","className":"pattern my-0","style":{"color":{"text":"#111111"}}} -->
     15<p class="has-text-align-center pattern my-0 has-text-color" style="color:#111111"><strong>Template</strong></p>
     16<!-- /wp:paragraph -->
     17
     18<!-- wp:group {"className":"pattern pb-0 mb-0"} -->
     19<div class="wp-block-group pattern pb-0 mb-0"><div class="wp-block-group__inner-container"><!-- wp:paragraph {"align":"center","className":"pattern my-0","style":{"color":{"text":"#111111"}}} -->
     20<p class="has-text-align-center pattern my-0 has-text-color" style="color:#111111">Unlimited Pricing Tables</p>
     21<!-- /wp:paragraph -->
     22
     23<!-- wp:paragraph {"align":"center","className":"pattern my-0","style":{"color":{"text":"#111111"}}} -->
     24<p class="has-text-align-center pattern my-0 has-text-color" style="color:#111111">Stylish Designs</p>
     25<!-- /wp:paragraph -->
     26
     27<!-- wp:paragraph {"align":"center","className":"pattern my-0","style":{"color":{"text":"#111111"}}} -->
     28<p class="has-text-align-center pattern my-0 has-text-color" style="color:#111111">Edit w/ Ease</p>
     29<!-- /wp:paragraph -->
     30
     31<!-- wp:buttons {"align":"center","className":"pattern mt-0 pt-0"} -->
     32<div class="wp-block-buttons aligncenter pattern mt-0 pt-0"><!-- wp:button {"borderRadius":50,"style":{"color":{"background":"#ca8000","text":"#ffffff"}},"className":"pattern mb-0"} -->
     33<div class="wp-block-button pattern mb-0"><a class="wp-block-button__link has-text-color has-background" style="border-radius:50px;background-color:#ca8000;color:#ffffff">Purchase</a></div>
     34<!-- /wp:button --></div>
     35<!-- /wp:buttons --></div></div>
     36<!-- /wp:group --></div></div>
     37<!-- /wp:group --></div></div>
     38<!-- /wp:cover -->';
    1739
    1840return array(

  • pattern/trunk/includes/block-patterns/pricing-table/floating.php

    r2369808 r2370765  
    66 */
    77
    8 // Tool to escape strings: https://onlinestringtools.com/escape-string.
    9 // If using Bootstrap or Tailwindcss classes, in order for them to get picked up during the build process place them either at the beginning of a class property or with a space after them at the end of the line before the quotes are escaped.
    10 // i.e. - <div class=\"p-16\">.
    11 // i.e. - <div class=\"p-16 has-background\">.
    12 // i.e. - <div class=\"has-background p-16 \">.
    13 // i.e. - This won't get picked up: <div class=\"has-background p-16\">.
    14 $markup = "
    15 <!-- wp:cover {\"customOverlayColor\":\"#f7f7f7\",\"align\":\"full\",\"className\":\"pattern md:py-16 my-0 h-auto \"} -->\n<div class=\"wp-block-cover alignfull has-background-dim pattern md:py-16 my-0 h-auto \" style=\"background-color:#f7f7f7\"><div class=\"wp-block-cover__inner-container\"><!-- wp:columns {\"align\":\"full\"} -->\n<div class=\"wp-block-columns alignfull\"><!-- wp:column {\"width\":25} -->\n<div class=\"wp-block-column\" style=\"flex-basis:25%\"></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":50,\"className\":\"pattern mb-0 px-10 md:px-0 \"} -->\n<div class=\"wp-block-column pattern mb-0 px-10 md:px-0 \" style=\"flex-basis:50%\"><!-- wp:heading {\"align\":\"center\",\"className\":\"pattern mt-0 \",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<h2 class=\"has-text-align-center pattern mt-0 has-text-color\" style=\"color:#111111\">Our Plans</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"has-text-align-center has-text-color\" style=\"color:#111111\">Affordable monthly plans that grow with you.</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 -->\n\n<!-- wp:column {\"width\":25} -->\n<div class=\"wp-block-column\" style=\"flex-basis:25%\"></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\",\"align\":\"full\",\"className\":\"pattern px-0 \"} -->\n<div class=\"wp-block-columns alignfull are-vertically-aligned-center pattern px-0 \"><!-- wp:column {\"verticalAlignment\":\"center\",\"width\":10,\"className\":\"pattern mb-0 \"} -->\n<div class=\"wp-block-column is-vertically-aligned-center pattern mb-0 \" style=\"flex-basis:10%\"></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"width\":30} -->\n<div class=\"wp-block-column is-vertically-aligned-center\" style=\"flex-basis:30%\"><!-- wp:group {\"className\":\"pattern p-4 pt-10 rounded-xl shadow-xl mb-2 text-center md:text-left \",\"style\":{\"color\":{\"background\":\"#ffffff\"}}} -->\n<div class=\"wp-block-group pattern p-4 pt-10 rounded-xl shadow-xl mb-2 text-center md:text-left has-background\" style=\"background-color:#ffffff\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"level\":4,\"className\":\"pattern mb-0 \",\"style\":{\"color\":{\"text\":\"#ca8000\"}}} -->\n<h4 class=\"pattern mb-0 has-text-color\" style=\"color:#ca8000\">$25</h4>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"className\":\"pattern mb-0 \",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"pattern mb-0 has-text-color\" style=\"color:#111111\">Personal Plan</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list {\"className\":\"pattern list-none ml-0 text-black text-opacity-50 \"} -->\n<ul class=\"pattern list-none ml-0 text-black text-opacity-50 \"><li>Powerful Patterns</li><li>Everything is Editable</li><li>Easy to Use</li></ul>\n<!-- /wp:list --></div></div>\n<!-- /wp:group -->\n\n<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"borderRadius\":50,\"style\":{\"color\":{\"background\":\"#f7f7f7\",\"text\":\"#111111\"}},\"className\":\"pattern my-0 is-style-fill\"} -->\n<div class=\"wp-block-button pattern my-0 is-style-fill\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:50px;background-color:#f7f7f7;color:#111111\">Select</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"width\":30} -->\n<div class=\"wp-block-column is-vertically-aligned-center\" style=\"flex-basis:30%\"><!-- wp:group {\"className\":\"pattern p-4 pt-10 rounded-xl shadow-xl mb-2 text-center md:text-left \",\"style\":{\"color\":{\"background\":\"#ffffff\"}}} -->\n<div class=\"wp-block-group pattern p-4 pt-10 rounded-xl shadow-xl mb-2 text-center md:text-left has-background\" style=\"background-color:#ffffff\"><div class=\"wp-block-group__inner-container\"><!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"className\":\"pattern mb-0 \",\"style\":{\"typography\":{\"fontSize\":72},\"color\":{\"text\":\"#ca8000\"}}} -->\n<h2 class=\"pattern mb-0 has-text-color\" style=\"font-size:72px;color:#ca8000\"><strong>$58</strong></h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"className\":\"pattern mb-0 \",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"pattern mb-0 has-text-color\" style=\"color:#111111\">Business Plan</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list {\"className\":\"pattern list-none ml-0 text-black text-opacity-50\"} -->\n<ul class=\"pattern list-none ml-0 text-black text-opacity-50\"><li>Powerful Patterns</li><li>Everything is Editable</li><li>Easy to Use</li></ul>\n<!-- /wp:list --></div></div>\n<!-- /wp:group -->\n\n<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"borderRadius\":50,\"style\":{\"color\":{\"text\":\"#ffffff\",\"background\":\"#111111\"}},\"className\":\"pattern my-0 is-style-fill\"} -->\n<div class=\"wp-block-button pattern my-0 is-style-fill\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:50px;background-color:#111111;color:#ffffff\">Select</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"width\":30} -->\n<div class=\"wp-block-column is-vertically-aligned-center\" style=\"flex-basis:30%\"><!-- wp:group {\"className\":\"pattern p-4 pt-10 rounded-xl shadow-xl text-center md:text-left \",\"style\":{\"color\":{\"background\":\"#ffffff\"}}} -->\n<div class=\"wp-block-group pattern p-4 pt-10 rounded-xl shadow-xl text-center md:text-left has-background\" style=\"background-color:#ffffff\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"level\":4,\"className\":\"pattern mb-0 \",\"style\":{\"color\":{\"text\":\"#ca8000\"}}} -->\n<h4 class=\"pattern mb-0 has-text-color\" style=\"color:#ca8000\">$92</h4>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"className\":\"pattern mb-0 \",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"pattern mb-0 has-text-color\" style=\"color:#111111\">Pro Plan</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:list {\"className\":\"pattern list-none ml-0 text-black text-opacity-50 \"} -->\n<ul class=\"pattern list-none ml-0 text-black text-opacity-50 \"><li>Powerful Patterns</li><li>Everything is Editable</li><li>Easy to Use</li></ul>\n<!-- /wp:list --></div></div>\n<!-- /wp:group -->\n\n<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"borderRadius\":50,\"style\":{\"color\":{\"background\":\"#f7f7f7\",\"text\":\"#111111\"}},\"className\":\"pattern my-0 is-style-fill\"} -->\n<div class=\"wp-block-button pattern my-0 is-style-fill\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:50px;background-color:#f7f7f7;color:#111111\">Select</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"width\":10,\"className\":\"pattern mb-0 \"} -->\n<div class=\"wp-block-column is-vertically-aligned-center pattern mb-0 \" style=\"flex-basis:10%\"></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"placeholder\":\"Write title…\",\"fontSize\":\"large\"} -->\n<p class=\"has-text-align-center has-large-font-size\"></p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:cover -->";
     8$markup = '<!-- wp:cover {"customOverlayColor":"#f7f7f7","align":"full","className":"pattern md:py-16 my-0 h-auto"} -->
     9<div class="wp-block-cover alignfull has-background-dim pattern md:py-16 my-0 h-auto" style="background-color:#f7f7f7"><div class="wp-block-cover__inner-container"><!-- wp:columns {"align":"full"} -->
     10<div class="wp-block-columns alignfull"><!-- wp:column {"width":25} -->
     11<div class="wp-block-column" style="flex-basis:25%"></div>
     12<!-- /wp:column -->
     13
     14<!-- wp:column {"width":50,"className":"pattern mb-0 px-10 md:px-0"} -->
     15<div class="wp-block-column pattern mb-0 px-10 md:px-0" style="flex-basis:50%"><!-- wp:heading {"align":"center","className":"pattern mt-0","style":{"color":{"text":"#111111"}}} -->
     16<h2 class="has-text-align-center pattern mt-0 has-text-color" style="color:#111111">Our Plans</h2>
     17<!-- /wp:heading -->
     18
     19<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#111111"}}} -->
     20<p class="has-text-align-center has-text-color" style="color:#111111">Affordable monthly plans that grow with you.</p>
     21<!-- /wp:paragraph -->
     22
     23<!-- wp:spacer {"height":20} -->
     24<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
     25<!-- /wp:spacer --></div>
     26<!-- /wp:column -->
     27
     28<!-- wp:column {"width":25} -->
     29<div class="wp-block-column" style="flex-basis:25%"></div>
     30<!-- /wp:column --></div>
     31<!-- /wp:columns -->
     32
     33<!-- wp:columns {"verticalAlignment":"center","align":"full","className":"pattern px-0"} -->
     34<div class="wp-block-columns alignfull are-vertically-aligned-center pattern px-0"><!-- wp:column {"verticalAlignment":"center","width":10,"className":"pattern mb-0"} -->
     35<div class="wp-block-column is-vertically-aligned-center pattern mb-0" style="flex-basis:10%"></div>
     36<!-- /wp:column -->
     37
     38<!-- wp:column {"verticalAlignment":"center","width":30} -->
     39<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:30%"><!-- wp:group {"className":"pattern p-4 pt-10 rounded-xl shadow-xl mb-2 text-center md:text-left","style":{"color":{"background":"#ffffff"}}} -->
     40<div class="wp-block-group pattern p-4 pt-10 rounded-xl shadow-xl mb-2 text-center md:text-left has-background" style="background-color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:heading {"level":4,"className":"pattern mb-0","style":{"color":{"text":"#ca8000"}}} -->
     41<h4 class="pattern mb-0 has-text-color" style="color:#ca8000">$25</h4>
     42<!-- /wp:heading -->
     43
     44<!-- wp:paragraph {"className":"pattern mb-0","style":{"color":{"text":"#111111"}}} -->
     45<p class="pattern mb-0 has-text-color" style="color:#111111">Personal Plan</p>
     46<!-- /wp:paragraph -->
     47
     48<!-- wp:paragraph -->
     49<p></p>
     50<!-- /wp:paragraph -->
     51
     52<!-- wp:list {"className":"pattern list-none ml-0 text-black text-opacity-50"} -->
     53<ul class="pattern list-none ml-0 text-black text-opacity-50"><li>Powerful Patterns</li><li>Everything is Editable</li><li>Easy to Use</li></ul>
     54<!-- /wp:list --></div></div>
     55<!-- /wp:group -->
     56
     57<!-- wp:buttons {"align":"center"} -->
     58<div class="wp-block-buttons aligncenter"><!-- wp:button {"borderRadius":50,"style":{"color":{"background":"#f7f7f7","text":"#111111"}},"className":"pattern my-0 is-style-fill"} -->
     59<div class="wp-block-button pattern my-0 is-style-fill"><a class="wp-block-button__link has-text-color has-background" style="border-radius:50px;background-color:#f7f7f7;color:#111111">Select</a></div>
     60<!-- /wp:button --></div>
     61<!-- /wp:buttons --></div>
     62<!-- /wp:column -->
     63
     64<!-- wp:column {"verticalAlignment":"center","width":30} -->
     65<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:30%"><!-- wp:group {"className":"pattern p-4 pt-10 rounded-xl shadow-xl mb-2 text-center md:text-left","style":{"color":{"background":"#ffffff"}}} -->
     66<div class="wp-block-group pattern p-4 pt-10 rounded-xl shadow-xl mb-2 text-center md:text-left has-background" style="background-color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
     67<p></p>
     68<!-- /wp:paragraph -->
     69
     70<!-- wp:heading {"className":"pattern mb-0","style":{"typography":{"fontSize":72},"color":{"text":"#ca8000"}}} -->
     71<h2 class="pattern mb-0 has-text-color" style="font-size:72px;color:#ca8000"><strong>$58</strong></h2>
     72<!-- /wp:heading -->
     73
     74<!-- wp:paragraph {"className":"pattern mb-0","style":{"color":{"text":"#111111"}}} -->
     75<p class="pattern mb-0 has-text-color" style="color:#111111">Business Plan</p>
     76<!-- /wp:paragraph -->
     77
     78<!-- wp:paragraph -->
     79<p></p>
     80<!-- /wp:paragraph -->
     81
     82<!-- wp:list {"className":"pattern list-none ml-0 text-black text-opacity-50"} -->
     83<ul class="pattern list-none ml-0 text-black text-opacity-50"><li>Powerful Patterns</li><li>Everything is Editable</li><li>Easy to Use</li></ul>
     84<!-- /wp:list --></div></div>
     85<!-- /wp:group -->
     86
     87<!-- wp:buttons {"align":"center"} -->
     88<div class="wp-block-buttons aligncenter"><!-- wp:button {"borderRadius":50,"style":{"color":{"text":"#ffffff","background":"#111111"}},"className":"pattern my-0 is-style-fill"} -->
     89<div class="wp-block-button pattern my-0 is-style-fill"><a class="wp-block-button__link has-text-color has-background" style="border-radius:50px;background-color:#111111;color:#ffffff">Select</a></div>
     90<!-- /wp:button --></div>
     91<!-- /wp:buttons --></div>
     92<!-- /wp:column -->
     93
     94<!-- wp:column {"verticalAlignment":"center","width":30} -->
     95<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:30%"><!-- wp:group {"className":"pattern p-4 pt-10 rounded-xl shadow-xl text-center md:text-left","style":{"color":{"background":"#ffffff"}}} -->
     96<div class="wp-block-group pattern p-4 pt-10 rounded-xl shadow-xl text-center md:text-left has-background" style="background-color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:heading {"level":4,"className":"pattern mb-0","style":{"color":{"text":"#ca8000"}}} -->
     97<h4 class="pattern mb-0 has-text-color" style="color:#ca8000">$92</h4>
     98<!-- /wp:heading -->
     99
     100<!-- wp:paragraph {"className":"pattern mb-0","style":{"color":{"text":"#111111"}}} -->
     101<p class="pattern mb-0 has-text-color" style="color:#111111">Pro Plan</p>
     102<!-- /wp:paragraph -->
     103
     104<!-- wp:paragraph -->
     105<p></p>
     106<!-- /wp:paragraph -->
     107
     108<!-- wp:list {"className":"pattern list-none ml-0 text-black text-opacity-50"} -->
     109<ul class="pattern list-none ml-0 text-black text-opacity-50"><li>Powerful Patterns</li><li>Everything is Editable</li><li>Easy to Use</li></ul>
     110<!-- /wp:list --></div></div>
     111<!-- /wp:group -->
     112
     113<!-- wp:buttons {"align":"center"} -->
     114<div class="wp-block-buttons aligncenter"><!-- wp:button {"borderRadius":50,"style":{"color":{"background":"#f7f7f7","text":"#111111"}},"className":"pattern my-0 is-style-fill"} -->
     115<div class="wp-block-button pattern my-0 is-style-fill"><a class="wp-block-button__link has-text-color has-background" style="border-radius:50px;background-color:#f7f7f7;color:#111111">Select</a></div>
     116<!-- /wp:button --></div>
     117<!-- /wp:buttons --></div>
     118<!-- /wp:column -->
     119
     120<!-- wp:column {"verticalAlignment":"center","width":10,"className":"pattern mb-0"} -->
     121<div class="wp-block-column is-vertically-aligned-center pattern mb-0" style="flex-basis:10%"></div>
     122<!-- /wp:column --></div>
     123<!-- /wp:columns -->
     124
     125<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
     126<p class="has-text-align-center has-large-font-size"></p>
     127<!-- /wp:paragraph --></div></div>
     128<!-- /wp:cover -->';
    16129
    17130return array(

  • pattern/trunk/includes/block-patterns/pricing-table/simple.php

    r2369808 r2370765  
    66 */
    77
    8 // Tool to escape strings: https://onlinestringtools.com/escape-string.
    9 // If using Bootstrap or Tailwindcss classes, in order for them to get picked up during the build process place them either at the beginning of a class property or with a space after them at the end of the line before the quotes are escaped.
    10 // i.e. - <div class=\"p-16\">.
    11 // i.e. - <div class=\"p-16 has-background\">.
    12 // i.e. - <div class=\"has-background p-16 \">.
    13 // i.e. - This won't get picked up: <div class=\"has-background p-16\">.
    14 $markup = "
    15 <!-- wp:cover {\"customOverlayColor\":\"#f7f7f7\",\"align\":\"full\",\"className\":\"pattern md:py-16 my-0 h-auto \"} -->\n<div class=\"wp-block-cover alignfull has-background-dim pattern md:py-16 my-0 h-auto \" style=\"background-color:#f7f7f7\"><div class=\"wp-block-cover__inner-container\"><!-- wp:columns {\"align\":\"wide\",\"className\":\"pattern mb-0 md:mb-10 \"} -->\n<div class=\"wp-block-columns alignwide pattern mb-0 md:mb-10 \"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":33.33,\"className\":\"pattern mb-0 \"} -->\n<div class=\"wp-block-column pattern mb-0 \" style=\"flex-basis:33.33%\"><!-- wp:heading {\"align\":\"center\",\"className\":\"pattern mt-0 \",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<h2 class=\"has-text-align-center pattern mt-0 has-text-color\" style=\"color:#111111\">Simple Pricing</h2>\n<!-- /wp:heading -->\n\n<!-- wp:separator {\"customColor\":\"#ca8000\",\"className\":\"pattern my-3 is-style-default\"} -->\n<hr class=\"wp-block-separator has-text-color has-background pattern my-3 is-style-default\" style=\"background-color:#ca8000;color:#ca8000\"/>\n<!-- /wp:separator -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"has-text-align-center has-text-color\" style=\"color:#111111\">Choose a plan.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:spacer {\"height\":40} -->\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:columns {\"verticalAlignment\":\"center\",\"align\":\"wide\",\"className\":\"pattern px-0 \"} -->\n<div class=\"wp-block-columns alignwide are-vertically-aligned-center pattern px-0\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:group {\"className\":\"pattern rounded-xl p-8 md:rounded-r-none shadow \",\"style\":{\"color\":{\"background\":\"#ffffff\"}}} -->\n<div class=\"wp-block-group pattern rounded-xl p-8 md:rounded-r-none shadow has-background\" style=\"background-color:#ffffff\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"level\":5,\"className\":\"pattern mt-0 \",\"style\":{\"color\":{\"text\":\"#e0b265\"}}} -->\n<h5 class=\"pattern mt-0 has-text-color\" style=\"color:#e0b265\">Plan 1</h5>\n<!-- /wp:heading -->\n\n<!-- wp:heading {\"style\":{\"color\":{\"text\":\"#ca8000\"}}} -->\n<h2 class=\"has-text-color\" style=\"color:#ca8000\">$29/mo</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"has-text-color\" style=\"color:#111111\">This plan is perfect for personal use or freelancers that are just getting started.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"borderRadius\":50,\"style\":{\"color\":{\"background\":\"#ffffff\",\"text\":\"#ca8000\"}},\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:50px;background-color:#ffffff;color:#ca8000\">Buy Now</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div></div>\n<!-- /wp:group --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"className\":\"pattern ml-0 \"} -->\n<div class=\"wp-block-column is-vertically-aligned-center pattern ml-0\"><!-- wp:group {\"className\":\"pattern p-8 rounded-xl shadow \",\"style\":{\"color\":{\"background\":\"#ca8000\"}}} -->\n<div class=\"wp-block-group pattern p-8 rounded-xl shadow has-background\" style=\"background-color:#ca8000\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"level\":5,\"className\":\"pattern mt-0 \",\"style\":{\"color\":{\"text\":\"#e0b265\"}}} -->\n<h5 class=\"pattern mt-0 has-text-color\" style=\"color:#e0b265\">Plan 2</h5>\n<!-- /wp:heading -->\n\n<!-- wp:heading {\"style\":{\"color\":{\"text\":\"#ffffff\"}}} -->\n<h2 class=\"has-text-color\" style=\"color:#ffffff\">$79/mo</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"style\":{\"color\":{\"text\":\"#ffffff\"}}} -->\n<p class=\"has-text-color\" style=\"color:#ffffff\">Our most popular plan is meant for small or fast growing businesses.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"style\":{\"color\":{\"text\":\"#ffffff\"}}} -->\n<p class=\"has-text-color\" style=\"color:#ffffff\">What are you waiting for? Pick this plan!</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"borderRadius\":50,\"style\":{\"color\":{\"background\":\"#ca8000\",\"text\":\"#ffffff\"}},\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:50px;background-color:#ca8000;color:#ffffff\">Buy Now</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div></div>\n<!-- /wp:group --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"className\":\"pattern ml-0 rounded-l-0 \"} -->\n<div class=\"wp-block-column is-vertically-aligned-center pattern ml-0 rounded-l-0 \"><!-- wp:group {\"className\":\"pattern rounded-xl p-8 md:rounded-l-none shadow \",\"style\":{\"color\":{\"background\":\"#ffffff\"}}} -->\n<div class=\"wp-block-group pattern rounded-xl p-8 md:rounded-l-none shadow has-background\" style=\"background-color:#ffffff\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"level\":5,\"className\":\"pattern mt-0 \",\"style\":{\"color\":{\"text\":\"#e0b265\"}}} -->\n<h5 class=\"pattern mt-0 has-text-color\" style=\"color:#e0b265\">Plan 3</h5>\n<!-- /wp:heading -->\n\n<!-- wp:heading {\"style\":{\"color\":{\"text\":\"#ca8000\"}}} -->\n<h2 class=\"has-text-color\" style=\"color:#ca8000\">$199/mo</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"has-text-color\" style=\"color:#111111\">This plan is our Enterprise level plan and is the perfect plan for big business.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-buttons aligncenter\"><!-- wp:button {\"borderRadius\":50,\"style\":{\"color\":{\"background\":\"#ffffff\",\"text\":\"#ca8000\"}},\"className\":\"is-style-outline\"} -->\n<div class=\"wp-block-button is-style-outline\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:50px;background-color:#ffffff;color:#ca8000\">Buy Now</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div></div>\n<!-- /wp:group --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"placeholder\":\"Write title…\",\"fontSize\":\"large\"} -->\n<p class=\"has-text-align-center has-large-font-size\"></p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:cover -->";
     8$markup = '<!-- wp:cover {"customOverlayColor":"#f7f7f7","align":"full","className":"pattern md:py-16 my-0 h-auto"} -->
     9<div class="wp-block-cover alignfull has-background-dim pattern md:py-16 my-0 h-auto" style="background-color:#f7f7f7"><div class="wp-block-cover__inner-container"><!-- wp:columns {"align":"wide","className":"pattern mb-0 md:mb-10"} -->
     10<div class="wp-block-columns alignwide pattern mb-0 md:mb-10"><!-- wp:column {"verticalAlignment":"center"} -->
     11<div class="wp-block-column is-vertically-aligned-center"></div>
     12<!-- /wp:column -->
     13
     14<!-- wp:column {"width":33.33,"className":"pattern mb-0"} -->
     15<div class="wp-block-column pattern mb-0" style="flex-basis:33.33%"><!-- wp:heading {"align":"center","className":"pattern mt-0","style":{"color":{"text":"#111111"}}} -->
     16<h2 class="has-text-align-center pattern mt-0 has-text-color" style="color:#111111">Simple Pricing</h2>
     17<!-- /wp:heading -->
     18
     19<!-- wp:separator {"customColor":"#ca8000","className":"pattern my-3 is-style-default"} -->
     20<hr class="wp-block-separator has-text-color has-background pattern my-3 is-style-default" style="background-color:#ca8000;color:#ca8000"/>
     21<!-- /wp:separator -->
     22
     23<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#111111"}}} -->
     24<p class="has-text-align-center has-text-color" style="color:#111111">Choose a plan.</p>
     25<!-- /wp:paragraph -->
     26
     27<!-- wp:spacer {"height":40} -->
     28<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
     29<!-- /wp:spacer --></div>
     30<!-- /wp:column -->
     31
     32<!-- wp:column {"verticalAlignment":"center"} -->
     33<div class="wp-block-column is-vertically-aligned-center"></div>
     34<!-- /wp:column --></div>
     35<!-- /wp:columns -->
     36
     37<!-- wp:columns {"verticalAlignment":"center","align":"wide","className":"pattern px-0"} -->
     38<div class="wp-block-columns alignwide are-vertically-aligned-center pattern px-0"><!-- wp:column {"verticalAlignment":"center"} -->
     39<div class="wp-block-column is-vertically-aligned-center"><!-- wp:group {"className":"pattern rounded-xl p-8 md:rounded-r-none shadow","style":{"color":{"background":"#ffffff"}}} -->
     40<div class="wp-block-group pattern rounded-xl p-8 md:rounded-r-none shadow has-background" style="background-color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:heading {"level":5,"className":"pattern mt-0","style":{"color":{"text":"#e0b265"}}} -->
     41<h5 class="pattern mt-0 has-text-color" style="color:#e0b265">Plan 1</h5>
     42<!-- /wp:heading -->
     43
     44<!-- wp:heading {"style":{"color":{"text":"#ca8000"}}} -->
     45<h2 class="has-text-color" style="color:#ca8000">$29/mo</h2>
     46<!-- /wp:heading -->
     47
     48<!-- wp:paragraph {"style":{"color":{"text":"#111111"}}} -->
     49<p class="has-text-color" style="color:#111111">This plan is perfect for personal use or freelancers that are just getting started.</p>
     50<!-- /wp:paragraph -->
     51
     52<!-- wp:buttons {"align":"center"} -->
     53<div class="wp-block-buttons aligncenter"><!-- wp:button {"borderRadius":50,"style":{"color":{"background":"#ffffff","text":"#ca8000"}},"className":"is-style-outline"} -->
     54<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-background" style="border-radius:50px;background-color:#ffffff;color:#ca8000">Buy Now</a></div>
     55<!-- /wp:button --></div>
     56<!-- /wp:buttons --></div></div>
     57<!-- /wp:group --></div>
     58<!-- /wp:column -->
     59
     60<!-- wp:column {"verticalAlignment":"center","className":"pattern ml-0"} -->
     61<div class="wp-block-column is-vertically-aligned-center pattern ml-0"><!-- wp:group {"className":"pattern p-8 rounded-xl shadow","style":{"color":{"background":"#ca8000"}}} -->
     62<div class="wp-block-group pattern p-8 rounded-xl shadow has-background" style="background-color:#ca8000"><div class="wp-block-group__inner-container"><!-- wp:heading {"level":5,"className":"pattern mt-0","style":{"color":{"text":"#e0b265"}}} -->
     63<h5 class="pattern mt-0 has-text-color" style="color:#e0b265">Plan 2</h5>
     64<!-- /wp:heading -->
     65
     66<!-- wp:heading {"style":{"color":{"text":"#ffffff"}}} -->
     67<h2 class="has-text-color" style="color:#ffffff">$79/mo</h2>
     68<!-- /wp:heading -->
     69
     70<!-- wp:paragraph {"style":{"color":{"text":"#ffffff"}}} -->
     71<p class="has-text-color" style="color:#ffffff">Our most popular plan is meant for small or fast growing businesses.</p>
     72<!-- /wp:paragraph -->
     73
     74<!-- wp:paragraph {"style":{"color":{"text":"#ffffff"}}} -->
     75<p class="has-text-color" style="color:#ffffff">What are you waiting for? Pick this plan!</p>
     76<!-- /wp:paragraph -->
     77
     78<!-- wp:buttons {"align":"center"} -->
     79<div class="wp-block-buttons aligncenter"><!-- wp:button {"borderRadius":50,"style":{"color":{"background":"#ca8000","text":"#ffffff"}},"className":"is-style-outline"} -->
     80<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-background" style="border-radius:50px;background-color:#ca8000;color:#ffffff">Buy Now</a></div>
     81<!-- /wp:button --></div>
     82<!-- /wp:buttons --></div></div>
     83<!-- /wp:group --></div>
     84<!-- /wp:column -->
     85
     86<!-- wp:column {"verticalAlignment":"center","className":"pattern ml-0 rounded-l-0"} -->
     87<div class="wp-block-column is-vertically-aligned-center pattern ml-0 rounded-l-0"><!-- wp:group {"className":"pattern rounded-xl p-8 md:rounded-l-none shadow","style":{"color":{"background":"#ffffff"}}} -->
     88<div class="wp-block-group pattern rounded-xl p-8 md:rounded-l-none shadow has-background" style="background-color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:heading {"level":5,"className":"pattern mt-0","style":{"color":{"text":"#e0b265"}}} -->
     89<h5 class="pattern mt-0 has-text-color" style="color:#e0b265">Plan 3</h5>
     90<!-- /wp:heading -->
     91
     92<!-- wp:heading {"style":{"color":{"text":"#ca8000"}}} -->
     93<h2 class="has-text-color" style="color:#ca8000">$199/mo</h2>
     94<!-- /wp:heading -->
     95
     96<!-- wp:paragraph {"style":{"color":{"text":"#111111"}}} -->
     97<p class="has-text-color" style="color:#111111">This plan is our Enterprise level plan and is the perfect plan for big business.</p>
     98<!-- /wp:paragraph -->
     99
     100<!-- wp:buttons {"align":"center"} -->
     101<div class="wp-block-buttons aligncenter"><!-- wp:button {"borderRadius":50,"style":{"color":{"background":"#ffffff","text":"#ca8000"}},"className":"is-style-outline"} -->
     102<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-background" style="border-radius:50px;background-color:#ffffff;color:#ca8000">Buy Now</a></div>
     103<!-- /wp:button --></div>
     104<!-- /wp:buttons --></div></div>
     105<!-- /wp:group --></div>
     106<!-- /wp:column --></div>
     107<!-- /wp:columns -->
     108
     109<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
     110<p class="has-text-align-center has-large-font-size"></p>
     111<!-- /wp:paragraph --></div></div>
     112<!-- /wp:cover -->';
    16113
    17114return array(

  • pattern/trunk/includes/block-patterns/pricing-table/stacked.php

    r2369808 r2370765  
    66 */
    77
    8 // Tool to escape strings: https://onlinestringtools.com/escape-string.
    9 // If using Bootstrap or Tailwindcss classes, in order for them to get picked up during the build process place them either at the beginning of a class property or with a space after them at the end of the line before the quotes are escaped.
    10 // i.e. - <div class=\"p-16\">.
    11 // i.e. - <div class=\"p-16 has-background\">.
    12 // i.e. - <div class=\"has-background p-16 \">.
    13 // i.e. - This won't get picked up: <div class=\"has-background p-16\">.
    14 $markup = "
    15 <!-- wp:cover {\"customOverlayColor\":\"#fff6e5\",\"align\":\"full\",\"className\":\"pattern md:py-16 my-0 h-auto \"} -->\n<div class=\"wp-block-cover alignfull has-background-dim pattern md:py-16 my-0 h-auto \" style=\"background-color:#fff6e5\"><div class=\"wp-block-cover__inner-container\"><!-- wp:columns {\"align\":\"full\",\"className\":\"pattern px-0 \"} -->\n<div class=\"wp-block-columns alignfull pattern px-0 \"><!-- wp:column {\"width\":25} -->\n<div class=\"wp-block-column\" style=\"flex-basis:25%\"></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":50} -->\n<div class=\"wp-block-column\" style=\"flex-basis:50%\"><!-- wp:heading {\"align\":\"center\",\"className\":\"pattern mt-0 \",\"style\":{\"color\":{\"text\":\"#ca8000\"}}} -->\n<h2 class=\"has-text-align-center pattern mt-0 has-text-color\" style=\"color:#ca8000\">Get Started Today</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"has-text-align-center has-text-color\" style=\"color:#111111\">Pay monthly. No Commitments.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:group {\"className\":\"pattern p-4 rounded-xl shadow mb-2 \",\"style\":{\"color\":{\"background\":\"#ffffff\"}}} -->\n<div class=\"wp-block-group pattern p-4 rounded-xl shadow mb-2 has-background\" style=\"background-color:#ffffff\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns {\"className\":\"pattern py-0 my-0 \",\"textColor\":\"primary\"} -->\n<div class=\"wp-block-columns pattern py-0 my-0 has-primary-color has-text-color\"><!-- wp:column {\"className\":\"pattern max-w-1/2 mb-0 \"} -->\n<div class=\"wp-block-column pattern max-w-1/2 mb-0 \"><!-- wp:paragraph {\"className\":\"pattern mb-0\",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"pattern mb-0 has-text-color\" style=\"color:#111111\">Shared Space</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"level\":4,\"className\":\"pattern my-0 \",\"style\":{\"color\":{\"text\":\"#ca8000\"}}} -->\n<h4 class=\"pattern my-0 has-text-color\" style=\"color:#ca8000\">$129/mo</h4>\n<!-- /wp:heading --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"className\":\"pattern max-w-1/2 text-right \"} -->\n<div class=\"wp-block-column is-vertically-aligned-center pattern max-w-1/2 text-right \"><!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"borderRadius\":12,\"style\":{\"color\":{\"text\":\"#ca8000\"}},\"className\":\"pattern my-0 is-style-outline\"} -->\n<div class=\"wp-block-button pattern my-0 is-style-outline\"><a class=\"wp-block-button__link has-text-color\" style=\"border-radius:12px;color:#ca8000\">Select</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->\n\n<!-- wp:group {\"className\":\"pattern p-4 rounded-xl shadow-xl mb-2 \",\"style\":{\"color\":{\"background\":\"#ca8000\"}}} -->\n<div class=\"wp-block-group pattern p-4 rounded-xl shadow-xl mb-2 has-background\" style=\"background-color:#ca8000\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns {\"className\":\"pattern py-0 my-0 \",\"style\":{\"color\":{\"text\":\"#ffffff\"}}} -->\n<div class=\"wp-block-columns pattern py-0 my-0 has-text-color\" style=\"color:#ffffff\"><!-- wp:column {\"className\":\"pattern max-w-1/2 mb-0 \"} -->\n<div class=\"wp-block-column pattern max-w-1/2 mb-0 \"><!-- wp:paragraph {\"className\":\"pattern mb-0\",\"style\":{\"color\":{\"text\":\"#e0b265\"}}} -->\n<p class=\"pattern mb-0 has-text-color\" style=\"color:#e0b265\">Private Space</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"level\":4,\"className\":\"pattern my-0\",\"style\":{\"color\":{\"text\":\"#ffffff\"}}} -->\n<h4 class=\"pattern my-0 has-text-color\" style=\"color:#ffffff\">$199/mo</h4>\n<!-- /wp:heading --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"className\":\"pattern max-w-1/2 text-right \"} -->\n<div class=\"wp-block-column is-vertically-aligned-center pattern max-w-1/2 text-right \"><!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"borderRadius\":12,\"style\":{\"color\":{\"background\":\"#ffffff\",\"text\":\"#ca8000\"}},\"className\":\"pattern my-0 is-style-fill\"} -->\n<div class=\"wp-block-button pattern my-0 is-style-fill\"><a class=\"wp-block-button__link has-text-color has-background\" style=\"border-radius:12px;background-color:#ffffff;color:#ca8000\">Select</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:group -->\n\n<!-- wp:group {\"className\":\"pattern p-4 rounded-xl shadow \",\"style\":{\"color\":{\"background\":\"#ffffff\"}}} -->\n<div class=\"wp-block-group pattern p-4 rounded-xl shadow has-background\" style=\"background-color:#ffffff\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns {\"className\":\"pattern py-0 my-0 \",\"textColor\":\"primary\"} -->\n<div class=\"wp-block-columns pattern py-0 my-0 has-primary-color has-text-color\"><!-- wp:column {\"className\":\"pattern max-w-1/2 mb-0 \"} -->\n<div class=\"wp-block-column pattern max-w-1/2 mb-0\"><!-- wp:paragraph {\"className\":\"pattern mb-0 \",\"style\":{\"color\":{\"text\":\"#111111\"}}} -->\n<p class=\"pattern mb-0 has-text-color\" style=\"color:#111111\">Big Office</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:heading {\"level\":4,\"className\":\"pattern my-0 \",\"style\":{\"color\":{\"text\":\"#ca8000\"}}} -->\n<h4 class=\"pattern my-0 has-text-color\" style=\"color:#ca8000\">$999/mo</h4>\n<!-- /wp:heading --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\",\"className\":\"pattern max-w-1/2 text-right\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center pattern max-w-1/2 text-right \"><!-- wp:buttons -->\n<div class=\"wp-block-buttons\"><!-- wp:button {\"borderRadius\":12,\"style\":{\"color\":{\"text\":\"#ca8000\"}},\"className\":\"pattern my-0 is-style-outline\"} -->\n<div class=\"wp-block-button pattern my-0 is-style-outline\"><a class=\"wp-block-button__link has-text-color\" style=\"border-radius:12px;color:#ca8000\">Select</a></div>\n<!-- /wp:button --></div>\n<!-- /wp:buttons --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":25} -->\n<div class=\"wp-block-column\" style=\"flex-basis:25%\"></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"placeholder\":\"Write title…\",\"fontSize\":\"large\"} -->\n<p class=\"has-text-align-center has-large-font-size\"></p>\n<!-- /wp:paragraph --></div></div>\n<!-- /wp:cover -->";
     8$markup = '<!-- wp:cover {"customOverlayColor":"#fff6e5","align":"full","className":"pattern md:py-16 my-0 h-auto"} -->
     9<div class="wp-block-cover alignfull has-background-dim pattern md:py-16 my-0 h-auto" style="background-color:#fff6e5"><div class="wp-block-cover__inner-container"><!-- wp:columns {"align":"full","className":"pattern px-0"} -->
     10<div class="wp-block-columns alignfull pattern px-0"><!-- wp:column {"width":25} -->
     11<div class="wp-block-column" style="flex-basis:25%"></div>
     12<!-- /wp:column -->
     13
     14<!-- wp:column {"width":50} -->
     15<div class="wp-block-column" style="flex-basis:50%"><!-- wp:heading {"align":"center","className":"pattern mt-0","style":{"color":{"text":"#ca8000"}}} -->
     16<h2 class="has-text-align-center pattern mt-0 has-text-color" style="color:#ca8000">Get Started Today</h2>
     17<!-- /wp:heading -->
     18
     19<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#111111"}}} -->
     20<p class="has-text-align-center has-text-color" style="color:#111111">Pay monthly. No Commitments.</p>
     21<!-- /wp:paragraph -->
     22
     23<!-- wp:group {"className":"pattern p-4 rounded-xl shadow mb-2","style":{"color":{"background":"#ffffff"}}} -->
     24<div class="wp-block-group pattern p-4 rounded-xl shadow mb-2 has-background" style="background-color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:columns {"className":"pattern py-0 my-0","textColor":"primary"} -->
     25<div class="wp-block-columns pattern py-0 my-0 has-primary-color has-text-color"><!-- wp:column {"className":"pattern max-w-1/2 mb-0"} -->
     26<div class="wp-block-column pattern max-w-1/2 mb-0"><!-- wp:paragraph {"className":"pattern mb-0","style":{"color":{"text":"#111111"}}} -->
     27<p class="pattern mb-0 has-text-color" style="color:#111111">Shared Space</p>
     28<!-- /wp:paragraph -->
     29
     30<!-- wp:heading {"level":4,"className":"pattern my-0","style":{"color":{"text":"#ca8000"}}} -->
     31<h4 class="pattern my-0 has-text-color" style="color:#ca8000">$129/mo</h4>
     32<!-- /wp:heading --></div>
     33<!-- /wp:column -->
     34
     35<!-- wp:column {"verticalAlignment":"center","className":"pattern max-w-1/2 text-right"} -->
     36<div class="wp-block-column is-vertically-aligned-center pattern max-w-1/2 text-right"><!-- wp:buttons -->
     37<div class="wp-block-buttons"><!-- wp:button {"borderRadius":12,"style":{"color":{"text":"#ca8000"}},"className":"pattern my-0 is-style-outline"} -->
     38<div class="wp-block-button pattern my-0 is-style-outline"><a class="wp-block-button__link has-text-color" style="border-radius:12px;color:#ca8000">Select</a></div>
     39<!-- /wp:button --></div>
     40<!-- /wp:buttons --></div>
     41<!-- /wp:column --></div>
     42<!-- /wp:columns --></div></div>
     43<!-- /wp:group -->
     44
     45<!-- wp:group {"className":"pattern p-4 rounded-xl shadow-xl mb-2","style":{"color":{"background":"#ca8000"}}} -->
     46<div class="wp-block-group pattern p-4 rounded-xl shadow-xl mb-2 has-background" style="background-color:#ca8000"><div class="wp-block-group__inner-container"><!-- wp:columns {"className":"pattern py-0 my-0","style":{"color":{"text":"#ffffff"}}} -->
     47<div class="wp-block-columns pattern py-0 my-0 has-text-color" style="color:#ffffff"><!-- wp:column {"className":"pattern max-w-1/2 mb-0"} -->
     48<div class="wp-block-column pattern max-w-1/2 mb-0"><!-- wp:paragraph {"className":"pattern mb-0","style":{"color":{"text":"#e0b265"}}} -->
     49<p class="pattern mb-0 has-text-color" style="color:#e0b265">Private Space</p>
     50<!-- /wp:paragraph -->
     51
     52<!-- wp:heading {"level":4,"className":"pattern my-0","style":{"color":{"text":"#ffffff"}}} -->
     53<h4 class="pattern my-0 has-text-color" style="color:#ffffff">$199/mo</h4>
     54<!-- /wp:heading --></div>
     55<!-- /wp:column -->
     56
     57<!-- wp:column {"verticalAlignment":"center","className":"pattern max-w-1/2 text-right"} -->
     58<div class="wp-block-column is-vertically-aligned-center pattern max-w-1/2 text-right"><!-- wp:buttons -->
     59<div class="wp-block-buttons"><!-- wp:button {"borderRadius":12,"style":{"color":{"background":"#ffffff","text":"#ca8000"}},"className":"pattern my-0 is-style-fill"} -->
     60<div class="wp-block-button pattern my-0 is-style-fill"><a class="wp-block-button__link has-text-color has-background" style="border-radius:12px;background-color:#ffffff;color:#ca8000">Select</a></div>
     61<!-- /wp:button --></div>
     62<!-- /wp:buttons --></div>
     63<!-- /wp:column --></div>
     64<!-- /wp:columns -->
     65
     66<!-- wp:paragraph -->
     67<p></p>
     68<!-- /wp:paragraph --></div></div>
     69<!-- /wp:group -->
     70
     71<!-- wp:group {"className":"pattern p-4 rounded-xl shadow","style":{"color":{"background":"#ffffff"}}} -->
     72<div class="wp-block-group pattern p-4 rounded-xl shadow has-background" style="background-color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:columns {"className":"pattern py-0 my-0","textColor":"primary"} -->
     73<div class="wp-block-columns pattern py-0 my-0 has-primary-color has-text-color"><!-- wp:column {"className":"pattern max-w-1/2 mb-0"} -->
     74<div class="wp-block-column pattern max-w-1/2 mb-0"><!-- wp:paragraph {"className":"pattern mb-0","style":{"color":{"text":"#111111"}}} -->
     75<p class="pattern mb-0 has-text-color" style="color:#111111">Big Office</p>
     76<!-- /wp:paragraph -->
     77
     78<!-- wp:heading {"level":4,"className":"pattern my-0","style":{"color":{"text":"#ca8000"}}} -->
     79<h4 class="pattern my-0 has-text-color" style="color:#ca8000">$999/mo</h4>
     80<!-- /wp:heading --></div>
     81<!-- /wp:column -->
     82
     83<!-- wp:column {"verticalAlignment":"center","className":"pattern max-w-1/2 text-right"} -->
     84<div class="wp-block-column is-vertically-aligned-center pattern max-w-1/2 text-right"><!-- wp:buttons -->
     85<div class="wp-block-buttons"><!-- wp:button {"borderRadius":12,"style":{"color":{"text":"#ca8000"}},"className":"pattern my-0 is-style-outline"} -->
     86<div class="wp-block-button pattern my-0 is-style-outline"><a class="wp-block-button__link has-text-color" style="border-radius:12px;color:#ca8000">Select</a></div>
     87<!-- /wp:button --></div>
     88<!-- /wp:buttons --></div>
     89<!-- /wp:column --></div>
     90<!-- /wp:columns --></div></div>
     91<!-- /wp:group --></div>
     92<!-- /wp:column -->
     93
     94<!-- wp:column {"width":25} -->
     95<div class="wp-block-column" style="flex-basis:25%"></div>
     96<!-- /wp:column --></div>
     97<!-- /wp:columns -->
     98
     99<!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
     100<p class="has-text-align-center has-large-font-size"></p>
     101<!-- /wp:paragraph --></div></div>
     102<!-- /wp:cover -->';
    16103
    17104return array(

  • pattern/trunk/includes/class-register-block-patterns.php

    r2369056 r2370765  
    5656            */
    5757            register_block_pattern_category(
    58                 $slug,
     58                'pricing',
    5959                array(
    6060                    'label' => __( 'Pricing', 'pattern' ),
     61                )
     62            );
     63
     64            /**
     65            * Register block pattern category
     66            */
     67            register_block_pattern_category(
     68                'faq',
     69                array(
     70                    'label' => __( 'FAQ', 'pattern' ),
    6171                )
    6272            );

  • pattern/trunk/readme.txt

    r2369808 r2370765  
    11=== Pattern ===
    22Contributors:      blockhandbook, leeshadle
    3 Tags:              pattern, patterns, block patterns, section, sections
     3Tags:              pattern, patterns, block patterns, block pattern, section, sections
    44Requires at least: 5.5
    55Tested up to:      5.5
    6 Stable tag:        1.0.3
     6Stable tag:        1.0.4
    77Requires PHP:      7.0.0
    88License:           GPL-2.0-or-later
    … …  
    1515We are OBSESSED w/ block patterns and we're going to build a whole bunch of 'em.  To kick things off we're starting w/ a handful of pricing table section.  I don't know about you but I love a good pricing table.  It's so critical to your business and it needs to make a great impression when a customer is about to make a purchase.
    1616
     17## Categories
     18
     19- Pricing tables
     20- FAQs
     21- More coming soon!
     22
     23### Pricing Tables
     24
     25![Simple Pricing Table](https://blockhandbook.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-25-at-5.24.48-PM.png)
     26![Cover Pricing Table](https://blockhandbook.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-25-at-5.28.26-PM.png)
     27![Stacked Pricing Table](https://blockhandbook.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-25-at-5.28.48-PM.png)
     28![Floating Pricing Table](https://blockhandbook.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-25-at-5.29.11-PM.png)
     29
     30### Pricing Tables
     31
     32![Simple Pricing Table](https://blockhandbook.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-27-at-5.47.17-PM.png)
     33![Cover Pricing Table](https://blockhandbook.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-27-at-5.33.10-PM.png)
     34![Stacked Pricing Table](https://blockhandbook.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-27-at-5.47.38-PM.png)
     35![Floating Pricing Table](https://blockhandbook.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-27-at-5.48.04-PM.png)
     36
    1737== Screenshots ==
    1838
    … …  
    21413. A stacked pricing table
    22424. Another stylish pricing table pattern
     435. A FAQ section w/ a background image
    2344
    2445== Installation ==
    … …  
    3152== Frequently Asked Questions ==
    3253
    33 = How many patterns, or website sections, do you currently offer? =
     54= How many block patterns, or website sections, do you currently offer? =
    3455
    35 We currently have 4 professionally designed and built pricing tables.
     56We currently offer the following professionally designed and built patterns:
     57-  4 pricing tables
     58-  4 FAQ sections
     59
     60= How will these patterns look on my website? =
     61
     62Results WILL vary.  We have built these patterns to leverage both your theme's styling and the pattern plugin styling.  Right now, most of the font styles including sizing and font-family will be driven by the theme you're using.  The structural styling will be driven mostly by your theme as well as the Gutenberg editor styles.  Finally, most of the cosmetic styling such as box-shadows and border-radius will be done by the pattern plugin.  We would love any and all feedback on this approach.
    3663
    3764== Changelog ==
     65
     66= 1.0.4 =
     67* Adding FAQ patterns
     68
     69= 1.0.3 =
     70* Updating pricing table CSS styling
     71
     72= 1.0.2 =
     73* Updating pricing table placeholder language
    3874
    3975= 1.0.1 =

  • pattern/trunk/vendor/autoload.php

    r2369808 r2370765  
    55require_once __DIR__ . '/composer/autoload_real.php';
    66
    7 return ComposerAutoloaderInitb125f7b09fa721789b7f4e37dae2fc07::getLoader();
     7return ComposerAutoloaderInitf50bfc7f45adbd580c0da2328e79e017::getLoader();

  • pattern/trunk/vendor/composer/autoload_real.php

    r2369808 r2370765  
    33// autoload_real.php @generated by Composer
    44
    5 class ComposerAutoloaderInitb125f7b09fa721789b7f4e37dae2fc07
     5class ComposerAutoloaderInitf50bfc7f45adbd580c0da2328e79e017
    66{
    77    private static $loader;
    … …  
    2323        }
    2424
    25         spl_autoload_register(array('ComposerAutoloaderInitb125f7b09fa721789b7f4e37dae2fc07', 'loadClassLoader'), true, true);
     25        spl_autoload_register(array('ComposerAutoloaderInitf50bfc7f45adbd580c0da2328e79e017', 'loadClassLoader'), true, true);
    2626        self::$loader = $loader = new \Composer\Autoload\ClassLoader();
    27         spl_autoload_unregister(array('ComposerAutoloaderInitb125f7b09fa721789b7f4e37dae2fc07', 'loadClassLoader'));
     27        spl_autoload_unregister(array('ComposerAutoloaderInitf50bfc7f45adbd580c0da2328e79e017', 'loadClassLoader'));
    2828
    2929        $useStaticLoader = PHP_VERSION_ID >= 50600 && !defined('HHVM_VERSION') && (!function_exists('zend_loader_file_encoded') || !zend_loader_file_encoded());
    … …  
    3131            require_once __DIR__ . '/autoload_static.php';
    3232
    33             call_user_func(\Composer\Autoload\ComposerStaticInitb125f7b09fa721789b7f4e37dae2fc07::getInitializer($loader));
     33            call_user_func(\Composer\Autoload\ComposerStaticInitf50bfc7f45adbd580c0da2328e79e017::getInitializer($loader));
    3434        } else {
    3535            $map = require __DIR__ . '/autoload_namespaces.php';

  • pattern/trunk/vendor/composer/autoload_static.php

    r2369808 r2370765  
    55namespace Composer\Autoload;
    66
    7 class ComposerStaticInitb125f7b09fa721789b7f4e37dae2fc07
     7class ComposerStaticInitf50bfc7f45adbd580c0da2328e79e017
    88{
    99    public static $prefixLengthsPsr4 = array (
    … …  
    3030    {
    3131        return \Closure::bind(function () use ($loader) {
    32             $loader->prefixLengthsPsr4 = ComposerStaticInitb125f7b09fa721789b7f4e37dae2fc07::$prefixLengthsPsr4;
    33             $loader->prefixDirsPsr4 = ComposerStaticInitb125f7b09fa721789b7f4e37dae2fc07::$prefixDirsPsr4;
    34             $loader->classMap = ComposerStaticInitb125f7b09fa721789b7f4e37dae2fc07::$classMap;
     32            $loader->prefixLengthsPsr4 = ComposerStaticInitf50bfc7f45adbd580c0da2328e79e017::$prefixLengthsPsr4;
     33            $loader->prefixDirsPsr4 = ComposerStaticInitf50bfc7f45adbd580c0da2328e79e017::$prefixDirsPsr4;
     34            $loader->classMap = ComposerStaticInitf50bfc7f45adbd580c0da2328e79e017::$classMap;
    3535
    3636        }, null, ClassLoader::class);
Note: See TracChangeset for help on using the changeset viewer.