Add example block

blocks/content-image/block.json

@@ -0,0 +1,37 @@
+{
+  "apiVersion": 3,
+  "name": "airblocks/content-image",
+  "title": "Sisältö ja kuva",
+  "category": "airdev",
+  "description": "A Gutenberg block!",
+  "icon": "block-default",
+  "editorScript": "file:./editor.js",
+  "render": "file:./render.php",
+  "attributes": {
+    "title": {
+      "type": "string",
+      "default": "",
+      "air_label": "title",
+      "air_location": "rich-text",
+      "air_type": "string"
+    },
+    "content": {
+      "type": "string",
+      "default": "",
+      "air_label": "content",
+      "air_location": "rich-text",
+      "air_type": "string"
+    },
+    "image": {
+      "type": "string",
+      "default": "",
+      "air_label": "image",
+      "air_location": "rich-text",
+      "air_type": "string"
+    }
+  },
+  "supports": {
+    "html": false,
+    "customClassName": false
+  }
+}

blocks/content-image/block.php

@@ -0,0 +1,42 @@
+<?php
+  /**
+   * Name:              content-image
+   * Title:             Sisältö ja kuva
+   * Category:          airdev
+   * Description:       A Gutenberg block!
+   * Icon:              block-default
+   *
+   * @package air-light
+   */
+
+  // Register attributes
+  register_rich_text( 'title' );
+  register_rich_text( 'content' );
+  register_rich_text( 'image' );
+  // register_attribute( 'attribute_name', 'Attribute Label', 'string', 'Default Value!' );
+  // register_rich_text( 'attribute_name', 'Default Value!' );
+
+  // Get fields
+  $title = attr( 'title' );
+  $content = attr( 'content' );
+  $image = attr( 'image' );
+  ?>
+
+  <section class="block block-content-image">
+    <div class="container">
+
+      <div class="items">
+        <div class="item">
+          <h2 wp-rich="title">
+            <?php echo esc_html( $title ); ?>
+          </h2>
+
+          <?php echo wp_kses_post( $content ); ?>
+        </div>
+
+        <div class="item">
+
+        </div>
+      </div>
+    </div>
+  </section>

blocks/content-image/editor.asset.php

@@ -0,0 +1 @@
+<?php return array( 'dependencies' => array( 'react', 'wp-blocks', 'wp-i18n', 'wp-block-editor' ), 'version' => '10312243362054402459' );

blocks/content-image/render.php

@@ -0,0 +1,48 @@
+<?php
+/**
+ * WP Block Builder "framework"
+ * @package air-blocks
+ */
+
+// Workaround to access local variables inside functions
+global $get_attribute_local_scope;
+$get_attribute_local_scope = function ( $key ) use ( $attributes ) {
+  if ( ! isset( $attributes[ $key ] ) ) {
+    return '';
+  }
+  return $attributes[ $key ];
+};
+
+if ( ! function_exists( 'register_attribute' ) ) {
+  function register_attribute( $key, $name, $type = "string", $default_value = "" ) {}
+}
+
+if ( ! function_exists( 'register_rich_text' ) ) {
+  function register_rich_text( $key, $default_value = "" ) {}
+}
+
+if ( ! function_exists( 'attr' ) ) {
+  function attr( $key ) {
+    global $get_attribute_local_scope;
+    return $get_attribute_local_scope( $key );
+  }
+}
+
+// End WP Block Builder "framework"
+
+ob_start();
+require 'block.php';
+$html = ob_get_clean();
+
+$is_editor = defined( 'REST_REQUEST' ) && true === REST_REQUEST && 'edit' === filter_input( INPUT_GET, 'context', FILTER_SANITIZE_STRING );
+
+if ( ! $is_editor ) {
+  // Replace innerblocks
+  $html = preg_replace( '(<InnerBlocks[^>]*\/{0,1}>)', $content, $html );
+
+  // Remove attributes
+  $html = preg_replace( '( wp-[a-z\-]+="[^"]+")', '', $html );
+}
+
+// We're just parsing content coming from blocks, so no escaping is necessary.
+echo $html; // phpcs:ignore

functions.php

@@ -141,7 +141,9 @@
     // Accepts both string (all*/none-options only) and array (options + specific blocks)
     'allowed_blocks' => [
       'post' => 'all-core-blocks',
-      'page' => 'all',
+      'page' => [
+        'airdev/content-image',
+      ],
       // 'page' => [
       //   'all-acf-blocks',
       //   'core/paragraph',
@@ -208,3 +210,10 @@ function debug_print_all_blocks() {
 
 add_action( 'after_air_helper_init', __NAMESPACE__ . '\rebuild_taxonomies' );
 add_action( 'after_air_helper_init', __NAMESPACE__ . '\rebuild_post_types' );
+
+/**
+ * Register air-blocks-buildtool blocks
+ */
+add_action('init', function() {
+  register_block_type( __DIR__ . '/blocks/content-image/block.json' );
+});

package.json

@@ -66,8 +66,9 @@
   },
   "dependencies": {
     "airbnb-browser-shims": "^3.3.0",
+    "bun": "^1.1.40",
     "moveto": "^1.8.2",
     "reframe.js": "^4.0.0",
     "vnu-jar": "^24.10.17"
   }
-}
+}

phpcs.xml

@@ -88,6 +88,7 @@
         <exclude name="WordPress.WhiteSpace.DisallowInlineTabs.NonIndentTabsUsed" />
         <exclude name="Squiz.PHP.CommentedOutCode.Found" />
         <exclude name="Universal.WhiteSpace.PrecisionAlignment.Found" />
+        <exclude name="WordPress.Files.FileName.NotHyphenatedLowercase" />
     </rule>
 
     <!-- Verify that the text_domain is set to the desired text-domain.

sass/gutenberg/_blocks.scss

@@ -29,5 +29,6 @@
   @import 'gutenberg/blocks/error';
 
   // ACF blocks
+  @import 'gutenberg/blocks/content-image';
   // @import 'gutenberg/blocks/your-new-acf-block';
 }

sass/gutenberg/blocks/_content-image.scss

@@ -0,0 +1,3 @@
+.block-content-image {
+  // Your block styles here
+}