Register editor style.css, add theme.json and create block patterns

assets/admin/css/admin.css

@@ -0,0 +1,10 @@
+/*--------------------------------------------------------------
+admin.css
+Fix minor CSS issues in the backend editor screen
+See /inc/enqueue.php
+--------------------------------------------------------------*/
+
+/* Fix pattern prreview iframe */
+.block-editor-block-preview__content iframe {
+  max-width: 1200px;
+}

assets/scss/_bootscore-style.scss

@@ -22,4 +22,4 @@
 @import "bootscore/utilities";
 @import "bootscore/widgets";
 
-@import "bootscore/blocks/block-widgets";
+@import "bootscore/blocks/blocks";

assets/scss/bootscore/blocks/_block-widgets.scss → assets/scss/bootscore/blocks/_blocks.scss

@@ -2,7 +2,31 @@
 Block Widgets
 --------------------------------------------------------------*/
 
-// List groups
+// Reset WP margin-top
+ :where(body .is-layout-flow) > * {
+   margin-block-start: 0 !important;
+ }
+
+
+// Add rounded to block img if class added to img block
+.rounded img {
+  border-radius: var(--#{$prefix}border-radius);
+}
+
+// Add card-img-top to block img if class added to img block
+.card-img-top img {
+  border-top-left-radius: $card-inner-border-radius;
+  border-top-right-radius: $card-inner-border-radius;
+}
+
+
+// Separator
+.wp-block-separator {
+  border-top: var(--#{$prefix}border-width) solid;
+}
+
+
+// List-groups
 .bs-list-group {
   .list-group-item-action {
     a {
@@ -20,10 +44,10 @@ Block Widgets
         color: $list-group-active-color;
       }
     }
-
   }
 }
 
+// List-group in card
 .card {
   .bs-list-group.list-group-flush {
     .list-group-item:last-child {

inc/enqueue.php

@@ -51,6 +51,26 @@ function bootscore_scripts() {
 add_action('wp_enqueue_scripts', 'bootscore_scripts');
 
 
+
+/*
+ * Register compiled CSS to editor
+ */ 
+function bootscore_add_editor_styles() {
+  add_theme_support('editor-styles');
+  add_editor_style('assets/css/main.css');
+
+  // Check if the current page is the Gutenberg editor and enqueue CSS to tha main admin area to use variables in theme.json
+  $screen = get_current_screen();
+  if ($screen && $screen->is_block_editor) {
+    wp_enqueue_style('main-editor-style', get_stylesheet_directory_uri() . '/assets/css/main.css', array(), '1.0', 'all');
+    // Fix minor CSS issues in the backend editor screen
+    wp_enqueue_style('admin-style', get_template_directory_uri() . '/assets/admin/css/admin.css', array(), '1.0', 'all');
+  }
+}
+add_action('enqueue_block_editor_assets', 'bootscore_add_editor_styles');
+
+
+
 /**
  * Preload Font Awesome
  */

inc/theme-setup.php

@@ -74,7 +74,15 @@ function bootscore_setup() {
     /*
      * Add theme support for block template-parts.
     */
-    add_theme_support( 'block-template-parts' );    
+    add_theme_support( 'block-template-parts' );
+
+    /*
+     * Register pattern category
+     */ 
+    register_block_pattern_category(
+      'bootscore',
+      array( 'label' => __( 'Bootscore', 'bootscore' ) )
+    );
   }
 endif;
 add_action('after_setup_theme', 'bootscore_setup');

patterns/alert-danger.php

@@ -0,0 +1,18 @@
+<?php
+/**
+ * Title: alert-danger with icon and dismiss button
+ * Slug: bootscore/alert-danger
+ * Categories: bootscore
+ * https://developer.wordpress.org/themes/features/block-patterns/
+ * 
+ * @package Bootscore
+ * @version 6.0.0
+ */
+
+// Exit if accessed directly
+defined('ABSPATH') || exit;
+
+?>
+<!-- wp:paragraph {"metadata":{"name":"alert-danger"},"className":"alert alert-danger alert-icon alert-danger-icon alert-dismissible fade show"} -->
+<p class="alert alert-danger alert-icon alert-danger-icon alert-dismissible fade show">A dismissing danger alert with an icon and a <a href="#">link</a>.<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></p>
+<!-- /wp:paragraph -->

patterns/alert-info.php

@@ -0,0 +1,18 @@
+<?php
+/**
+ * Title: alert-info
+ * Slug: bootscore/alert-info
+ * Categories: bootscore
+ * https://developer.wordpress.org/themes/features/block-patterns/
+ * 
+ * @package Bootscore
+ * @version 6.0.0
+ */
+
+// Exit if accessed directly
+defined('ABSPATH') || exit;
+
+?>
+<!-- wp:paragraph {"metadata":{"name":"alert-info"},"className":"alert alert-info"} -->
+<p class="alert alert-info">A simple info alert with a <a href="#">link</a>.</p>
+<!-- /wp:paragraph -->

patterns/btn-danger-lg.php

@@ -0,0 +1,18 @@
+<?php
+/**
+ * Title: btn-danger-lg
+ * Slug: bootscore/btn-danger-lg
+ * Categories: bootscore
+ * https://developer.wordpress.org/themes/features/block-patterns/
+ * 
+ * @package Bootscore
+ * @version 6.0.0
+ */
+
+// Exit if accessed directly
+defined('ABSPATH') || exit;
+
+?>
+<!-- wp:paragraph {"metadata":{"name":"btn-danger-lg"}} -->
+<p><a class="btn btn-danger btn-lg" href="#">Button</a></p>
+<!-- /wp:paragraph -->

patterns/btn-outline-secondary-sm.php

@@ -0,0 +1,18 @@
+<?php
+/**
+ * Title: btn-outline-secondary-sm
+ * Slug: bootscore/btn-outline-secondary-sm
+ * Categories: bootscore
+ * https://developer.wordpress.org/themes/features/block-patterns/
+ * 
+ * @package Bootscore
+ * @version 6.0.0
+ */
+
+// Exit if accessed directly
+defined('ABSPATH') || exit;
+
+?>
+<!-- wp:paragraph {"metadata":{"name":"btn-outline-secondary-sm"}} -->
+<p><a class="btn btn-outline-secondary btn-sm" href="#">Button</a></p>
+<!-- /wp:paragraph -->

patterns/btn-primary.php

@@ -0,0 +1,18 @@
+<?php
+/**
+ * Title: btn-primary
+ * Slug: bootscore/btn-primary
+ * Categories: bootscore
+ * https://developer.wordpress.org/themes/features/block-patterns/
+ * 
+ * @package Bootscore
+ * @version 6.0.0
+ */
+
+// Exit if accessed directly
+defined('ABSPATH') || exit;
+
+?>
+<!-- wp:paragraph {"metadata":{"name":"btn-primary"}} -->
+<p><a class="btn btn-primary" href="#">Button</a></p>
+<!-- /wp:paragraph -->

patterns/card-advanced.php

@@ -0,0 +1,42 @@
+<?php
+/**
+ * Title: card advanced
+ * Slug: bootscore/card-advanced
+ * Categories: bootscore
+ * https://developer.wordpress.org/themes/features/block-patterns/
+ * 
+ * @package Bootscore
+ * @version 6.0.0
+ */
+
+// Exit if accessed directly
+defined('ABSPATH') || exit;
+
+?>
+<!-- wp:group {"metadata":{"name":"card advanced"},"className":"card"} -->
+<div class="wp-block-group card"><!-- wp:heading {"className":"card-header h6"} -->
+<h2 class="wp-block-heading card-header h6">Card header</h2>
+<!-- /wp:heading -->
+
+<!-- wp:image {"sizeSlug":"large","className":"mb-0"} -->
+<figure class="wp-block-image size-large mb-0"><img src="https://dummyimage.com/1200x900/6c757d/ffffff" alt=""/></figure>
+<!-- /wp:image -->
+
+<!-- wp:group {"className":"card-body","layout":{"type":"default"}} -->
+<div class="wp-block-group card-body"><!-- wp:heading {"level":3,"className":"card-title h5"} -->
+<h3 class="wp-block-heading card-title h5">Card title</h3>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"className":"card-text"} -->
+<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p><a class="btn btn-primary" href="#">Button</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->
+
+<!-- wp:paragraph {"className":"card-footer"} -->
+<p class="card-footer">Card footer</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->

patterns/card-basic.php

@@ -0,0 +1,34 @@
+<?php
+/**
+ * Title: card basic
+ * Slug: bootscore/card-basic
+ * Categories: bootscore
+ * https://developer.wordpress.org/themes/features/block-patterns/
+ * 
+ * @package Bootscore
+ * @version 6.0.0
+ */
+
+// Exit if accessed directly
+defined('ABSPATH') || exit;
+
+?>
+<!-- wp:group {"metadata":{"name":"card basic"},"className":"card"} -->
+<div class="wp-block-group card"><!-- wp:image {"sizeSlug":"large","className":"card-img-top mb-0"} -->
+<figure class="wp-block-image size-large card-img-top mb-0"><img src="https://dummyimage.com/1200x900/6c757d/ffffff" alt=""/></figure>
+<!-- /wp:image -->
+
+<!-- wp:group {"className":"card-body","layout":{"type":"default"}} -->
+<div class="wp-block-group card-body"><!-- wp:heading {"className":"card-title h5"} -->
+<h2 class="wp-block-heading card-title h5">Card title</h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p><a class="btn btn-primary" href="#">Button</a></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->

patterns/card-categories.php

@@ -0,0 +1,22 @@
+<?php
+/**
+ * Title: card categories
+ * Slug: bootscore/card-categories
+ * Categories: bootscore
+ * https://developer.wordpress.org/themes/features/block-patterns/
+ * 
+ * @package Bootscore
+ * @version 6.0.0
+ */
+
+// Exit if accessed directly
+defined('ABSPATH') || exit;
+
+?>
+<!-- wp:group {"metadata":{"name":"card with categories"},"className":"card"} -->
+<div class="wp-block-group card"><!-- wp:heading {"className":"card-header h6"} -->
+<h2 class="wp-block-heading card-header h6">Categories</h2>
+<!-- /wp:heading -->
+
+<!-- wp:categories {"showPostCounts":true,"className":"list-group-flush"} /--></div>
+<!-- /wp:group -->