#49 Rework: ACF Blocks

block-template-parts/entete-cours.html

@@ -1,18 +1,18 @@
 <!-- wp:group {"backgroundColor":"light-grey"} -->
-<div class="wp-block-group has-light-grey-background-color has-background"><!-- wp:group {"layout":{"inherit":false,"contentSize":"1200px"}} -->
+<div class="wp-block-group has-light-grey-background-color has-background"><!-- wp:group {"layout":{"inherit":false,"contentSize":"","type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:columns {"verticalAlignment":"center"} -->
 <div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
-<div class="wp-block-column is-vertically-aligned-center"><!-- wp:acf/bfs-course-tax {"id":"block_622f1ba917af6","name":"acf/bfs-course-tax","align":"","mode":"preview"} /-->
+<div class="wp-block-column is-vertically-aligned-center"><!-- wp:acf/bfs-course-tax {"name":"acf/bfs-course-tax","mode":"preview"} /-->
 
 <!-- wp:post-title {"level":1} /-->
 
 <!-- wp:group {"layout":{"type":"flex","allowOrientation":false}} -->
-<div class="wp-block-group"><!-- wp:acf/bfs-course-lessons {"id":"block_622f1e4a17af8","name":"acf/bfs-course-lessons","align":"","mode":"preview"} /-->
+<div class="wp-block-group"><!-- wp:acf/bfs-course-lessons {"name":"acf/bfs-course-lessons","mode":"preview"} /-->
 
-<!-- wp:acf/bfs-course-time {"id":"block_622f1e6e17af9","name":"acf/bfs-course-time","align":"","mode":"preview"} /--></div>
+<!-- wp:acf/bfs-course-time {"name":"acf/bfs-course-time","mode":"preview"} /--></div>
 <!-- /wp:group -->
 
-<!-- wp:acf/bfs-course-signup {"id":"block_6231e5d81b916","name":"acf/bfs-course-signup","data":[],"align":"","mode":"preview"} /--></div>
+<!-- wp:beflex/course-signup {"name":"beflex/course-signup","data":[],"mode":"preview"} /--></div>
 <!-- /wp:column -->
 
 <!-- wp:column {"verticalAlignment":"center"} -->

block-templates/archive-course.html

@@ -3,35 +3,35 @@
 <!-- /wp:group -->
 
 <!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|50"}}},"layout":{"type":"constrained","contentSize":"1100px"}} -->
-<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--50)"><!-- wp:query {"queryId":28,"query":{"perPage":3,"pages":0,"offset":0,"postType":"course","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"flex","columns":3},"className":"query-course wp-block-sensei-lms-course-list"} -->
-  <div class="wp-block-query query-course wp-block-sensei-lms-course-list"><!-- wp:post-template -->
-    <!-- wp:group {"align":"wide","style":{"border":{"width":"1px","style":"solid","color":"#c5c5c5"}}} -->
-    <div class="wp-block-group alignwide has-border-color" style="border-color:#c5c5c5;border-style:solid;border-width:1px"><!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
+<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--50)"><!-- wp:query {"queryId":28,"query":{"perPage":3,"pages":0,"offset":0,"postType":"course","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"className":"query-course wp-block-sensei-lms-course-list"} -->
+<div class="wp-block-query query-course wp-block-sensei-lms-course-list"><!-- wp:post-template {"layout":{"type":"grid","columnCount":3}} -->
+<!-- wp:group {"align":"wide","style":{"border":{"width":"1px","style":"solid","color":"#c5c5c5"}}} -->
+<div class="wp-block-group alignwide has-border-color" style="border-color:#c5c5c5;border-style:solid;border-width:1px"><!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
 
-      <!-- wp:group {"style":{"spacing":{"padding":{"top":"0em","right":"1em","bottom":"0em","left":"1em"}}}} -->
-      <div class="wp-block-group" style="padding-top:0em;padding-right:1em;padding-bottom:0em;padding-left:1em"><!-- wp:sensei-lms/course-categories {"options":{}} -->
-        <div class="wp-block-sensei-lms-course-categories"></div>
-        <!-- /wp:sensei-lms/course-categories -->
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"0em","right":"1em","bottom":"0em","left":"1em"}}}} -->
+<div class="wp-block-group" style="padding-top:0em;padding-right:1em;padding-bottom:0em;padding-left:1em"><!-- wp:sensei-lms/course-categories {"options":[]} -->
+<div class="wp-block-sensei-lms-course-categories"></div>
+<!-- /wp:sensei-lms/course-categories -->
 
-        <!-- wp:post-title {"level":3,"isLink":true,"style":{"typography":{"fontSize":"18px"},"elements":{"link":{"color":{"text":"var:preset|color|black"}}},"spacing":{"margin":{"top":"0.2em","right":"0em","bottom":"0em","left":"0em"}}}} /--></div>
-      <!-- /wp:group -->
+<!-- wp:post-title {"level":3,"isLink":true,"style":{"typography":{"fontSize":"18px"},"elements":{"link":{"color":{"text":"var:preset|color|black"}}},"spacing":{"margin":{"top":"0.2em","right":"0em","bottom":"0em","left":"0em"}}}} /--></div>
+<!-- /wp:group -->
 
-      <!-- wp:group {"style":{"spacing":{"padding":{"right":"1em","left":"1em"}}},"layout":{"type":"flex","allowOrientation":false}} -->
-      <div class="wp-block-group" style="padding-right:1em;padding-left:1em"><!-- wp:acf/bfs-course-lessons {"name":"acf/bfs-course-lessons","data":{},"mode":"preview"} /-->
+<!-- wp:group {"style":{"spacing":{"padding":{"right":"1em","left":"1em"}}},"layout":{"type":"flex","allowOrientation":false}} -->
+<div class="wp-block-group" style="padding-right:1em;padding-left:1em"><!-- wp:beflex/course-lesson {"name":"beflex/course-lesson","data":[],"mode":"preview"} /-->
 
-        <!-- wp:acf/bfs-course-time {"name":"acf/bfs-course-time","mode":"preview"} /--></div>
-      <!-- /wp:group -->
+<!-- wp:beflex/course-time {"name":"beflex/course-time","data":[],"mode":"preview"} /--></div>
+<!-- /wp:group -->
 
-      <!-- wp:sensei-lms/course-progress {"customBarColor":"#1be184","height":10,"borderRadius":0} /--></div>
-    <!-- /wp:group -->
-    <!-- /wp:post-template -->
+<!-- wp:sensei-lms/course-progress {"customBarColor":"#1be184","height":10,"borderRadius":0} /--></div>
+<!-- /wp:group -->
+<!-- /wp:post-template -->
 
-    <!-- wp:query-pagination {"paginationArrow":"arrow","align":"wide","layout":{"type":"flex","justifyContent":"center"}} -->
-    <!-- wp:query-pagination-previous {"label":"","fontSize":"small"} /-->
+<!-- wp:query-pagination {"paginationArrow":"arrow","align":"wide","layout":{"type":"flex","justifyContent":"center"}} -->
+<!-- wp:query-pagination-previous {"label":"","fontSize":"small"} /-->
 
-    <!-- wp:query-pagination-numbers /-->
+<!-- wp:query-pagination-numbers /-->
 
-    <!-- wp:query-pagination-next {"label":" ","fontSize":"small"} /-->
-    <!-- /wp:query-pagination --></div>
-  <!-- /wp:query --></div>
-<!-- /wp:group -->
+<!-- wp:query-pagination-next {"label":" ","fontSize":"small"} /-->
+<!-- /wp:query-pagination --></div>
+<!-- /wp:query --></div>
+<!-- /wp:group -->

functions.php

@@ -99,6 +99,6 @@ function beflex_add_custom_classes_to_body( $classes ) {
 // Block patterns.
 require_once 'inc/block-patterns.php';
 // Theme blocks
-require_once 'inc/block-blocks.php';
+require_once 'inc/blocks.php';
 // Sensei functions
 require_once 'sensei/functions.php';

gulpfile.js

@@ -12,7 +12,7 @@ var scss_paths = [
   'assets/scss/**/*.scss',
 
   'inc/blocks/bfs-course-tax/assets/scss/**/*.scss',
-  'inc/blocks/bfs-course-lessons/assets/scss/**/*.scss',
+  'inc/blocks/bfs-course-lesson/assets/scss/**/*.scss',
   'inc/blocks/bfs-course-time/assets/scss/**/*.scss',
   'inc/blocks/bfs-course-completion/assets/scss/**/*.scss',
   'inc/blocks/bfs-login/assets/scss/**/*.scss'

inc/blocks.php

@@ -0,0 +1,37 @@
+<?php
+/**
+ * Blocks added to theme
+ *
+ * @package Beflex
+ * @since 4.0.0
+ */
+
+if ( class_exists( 'Sensei_Main', true ) ) {
+	require get_stylesheet_directory() . '/inc/blocks/bfs-course-signup/bfs-course-signup.php';
+	require get_stylesheet_directory() . '/inc/blocks/bfs-course-tax/bfs-course-tax.php';
+	require get_stylesheet_directory() . '/inc/blocks/bfs-course-lesson/bfs-course-lesson.php';
+	require get_stylesheet_directory() . '/inc/blocks/bfs-course-time/bfs-course-time.php';
+	require get_stylesheet_directory() . '/inc/blocks/bfs-login/bfs-login.php';
+}
+
+/**
+ * Create custom block category
+ * @param $block_categories
+ * @param $editor_context
+ * @return mixed
+ */
+function beflex_create_block_category( $block_categories, $editor_context ) {
+	if ( ! empty( $editor_context->post ) ) {
+		array_unshift(
+			$block_categories,
+			array(
+				'slug'  => 'beflex',
+				'title' => __( 'Beflex', 'custom-plugin' ),
+				'icon'  => 'admin-appearance',
+			)
+		);
+	}
+	return $block_categories;
+}
+
+add_filter( 'block_categories_all', 'beflex_create_block_category', 10, 2 );

inc/blocks/bfs-course-lesson/assets/css/style.css

@@ -0,0 +1,14 @@
+/**
+ * Style CSS de bfs-course-lesson
+*/
+.bfs-course-lesson {
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 14px;
+}
+.bfs-course-lesson .bfs-course-lesson__icon {
+  width: 16px;
+  vertical-align: text-top;
+}
+.bfs-course-lesson span {
+  vertical-align: text-bottom;
+}

inc/blocks/bfs-course-lesson/assets/js/bfs-course-lesson.js

@@ -0,0 +1,27 @@
+(function($){
+    /**
+     * initializeBlock
+     *
+     * Adds custom JavaScript to the block HTML.
+     *
+     * @param   object $block The block jQuery element.
+     * @param   object attributes The block attributes (only available when editing).
+     * @return  void
+     */
+    var initializeBlock = function( $block ) {
+    }
+
+    // Initialize each block on page load (front end).
+    $(document).ready(function(){
+        $('.bfs-course-lesson').each(function(){
+            initializeBlock( $(this) );
+        });
+    });
+
+    // Initialize dynamic block preview (editor).
+    if( window.acf ) {
+        window.acf.addAction( 'render_block_preview/type=bfs-course-lesson', initializeBlock );
+    }
+
+})(jQuery);
+

inc/blocks/bfs-course-lesson/assets/json/block.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "name": "beflex/course-lesson",
+  "title": "BFS Course lessons",
+  "description": "Display lessons associated to a course",
+  "style": [ "block-bfs-course-lesson-style" ],
+  "viewScript": [],
+  "category": "beflex",
+  "icon": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M4 4v1.5h16V4H4zm8 8.5h8V11h-8v1.5zM4 20h16v-1.5H4V20zm4-8c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2z\"></path></svg>",
+  "apiVersion": 2,
+  "textdomain": "beflex",
+  "keywords": [
+    "beflex",
+    "sensei",
+    "bfs",
+    "lesson",
+    "count",
+    "course-lesson"
+  ],
+  "supports": {
+  },
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "../../view.php"
+  }
+}

inc/blocks/bfs-course-lessons/assets/scss/style.scss → inc/blocks/bfs-course-lesson/assets/scss/style.scss

@@ -1,13 +1,15 @@
-.bfs-course-lessons {
+/**
+ * Style CSS de bfs-course-lesson
+*/
+.bfs-course-lesson {
   color: rgba(0,0,0,0.6);
   font-size: 14px;
 
-  .bfs-course-lessons__icon {
+  .bfs-course-lesson__icon {
     width: 16px;
     vertical-align: text-top;
   }
   span {
     vertical-align: text-bottom;
   }
 }
-