Fix rendering and building the first block, T-25856

.gitignore

@@ -13,3 +13,4 @@ sass/navigation/_luxbar.scss
 html
 w3cErrors/
 .vscode
+blocks/*/node_modules

blocks/latest-articles/block.json → blocks/latest-articles/build/block.json

@@ -6,7 +6,7 @@
   "title": "Uusimmat ohjeet",
   "category": "air-light",
   "icon": "grid-view",
-  "description": "Näytä uusimmat ohjeet palstoissa.",
+  "description": "Show latest articles in a grid.",
   "example": {},
   "supports": {
     "html": false,

blocks/latest-articles/build/index-rtl.css

@@ -0,0 +1 @@
+.wp-block-create-block-latest-articles{border:1px dotted red}

blocks/latest-articles/build/index.asset.php

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

blocks/latest-articles/build/index.css

@@ -0,0 +1 @@
+.wp-block-create-block-latest-articles{border:1px dotted red}

blocks/latest-articles/build/view.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array(), 'version' => '56793e2317042ba5186a');

blocks/latest-articles/build/view.js

@@ -0,0 +1 @@
+console.log("Hello World! (from create-block-latest-articles block)");

blocks/latest-articles/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "latest-articles",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "wp-scripts build",
+    "start": "wp-scripts start"
+  },
+  "devDependencies": {
+    "@wordpress/scripts": "^30.11.0"
+  }
+}

blocks/latest-articles/src/block.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "air-light/latest-articles",
+  "version": "1.0.0",
+  "title": "Uusimmat ohjeet",
+  "category": "air-light",
+  "icon": "grid-view",
+  "description": "Show latest articles in a grid.",
+  "example": {},
+  "supports": {
+    "html": false,
+    "align": false
+  },
+  "textdomain": "air-light",
+  "editorScript": "file:./index.js",
+  "editorStyle": "file:./index.css",
+  "style": "file:./style-index.css",
+  "render": "file:./render.php",
+  "viewScript": "file:./view.js"
+}

blocks/latest-articles/edit.js → blocks/latest-articles/src/edit.js

@@ -43,15 +43,15 @@ export default function Edit() {
 	if (!posts) {
 		return (
 			<p {...blockProps}>
-				{__('Loading...', 'mastodonopas')}
+				{__('Loading...', 'air-light')}
 			</p>
 		);
 	}
 
 	if (posts.length === 0) {
 		return (
 			<p {...blockProps}>
-				{__('No posts found.', 'mastodonopas')}
+				{__('No posts found.', 'air-light')}
 			</p>
 		);
 	}

blocks/latest-articles/index.js → blocks/latest-articles/src/index.js

@@ -30,4 +30,11 @@ registerBlockType( metadata.name, {
 	 * @see ./edit.js
 	 */
 	edit: Edit,
+
+	/**
+	 * @return {null} Dynamic blocks have no content to save
+	 */
+	save: () => {
+		return null;
+	},
 } );

blocks/latest-articles/src/render.php

@@ -0,0 +1,41 @@
+<?php
+/**
+ * Render the latest articles block.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
+ * @package air-light
+ */
+
+$args = [
+	'post_type' => 'post',
+	'posts_per_page' => 3,
+	'orderby' => 'date',
+	'order' => 'DESC',
+];
+
+$latest_posts = new WP_Query( $args );
+
+if ( $latest_posts->have_posts() ) : ?>
+	<div <?php echo get_block_wrapper_attributes( ['class' => 'latest-articles'] ); // phpcs:ignore ?>>
+		<?php while ( $latest_posts->have_posts() ) :
+			$latest_posts->the_post(); ?>
+			<article class="latest-article">
+				<h3>
+					<a href="<?php echo esc_url( get_permalink() ); ?>">
+						<?php the_title(); ?>
+					</a>
+				</h3>
+
+				<time datetime="<?php echo get_the_date( 'c' ); ?>">
+					<?php echo get_the_date(); ?>
+				</time>
+
+				<div class="excerpt">
+					<?php the_excerpt(); ?>
+				</div>
+			</article>
+		<?php endwhile; ?>
+	</div>
+	<?php
+	wp_reset_postdata();
+endif;

functions.php

@@ -159,6 +159,7 @@
         'core/textColumns',
       ],
       'page' => [
+        // Demo blocks
         'air-light/latest-articles',
       ],
       // 'page' => [

gulp/tasks/blocks.js

@@ -0,0 +1,47 @@
+const { exec } = require('child_process');
+const { watch } = require('gulp');
+const fs = require('fs');
+const path = require('path');
+
+// Build all blocks using wp-scripts
+function buildBlocks(done) {
+  // Get all block directories
+  const blocksDir = path.join(process.cwd(), 'blocks');
+  const blockFolders = fs.readdirSync(blocksDir)
+    .filter(file => fs.statSync(path.join(blocksDir, file)).isDirectory());
+
+  // Build each block that has package.json
+  const builds = blockFolders.map(blockName => {
+    const blockPath = path.join(blocksDir, blockName);
+    if (fs.existsSync(path.join(blockPath, 'package.json'))) {
+      return new Promise((resolve, reject) => {
+        exec('npm run build', { cwd: blockPath }, (err, stdout, stderr) => {
+          if (err) {
+            console.error(`Error building block ${blockName}:`, err);
+            reject(err);
+          }
+          console.log(stdout);
+          console.error(stderr);
+          resolve();
+        });
+      });
+    }
+    return Promise.resolve();
+  });
+
+  Promise.all(builds)
+    .then(() => done())
+    .catch(err => done(err));
+}
+
+// Watch blocks
+function watchBlocks() {
+  watch([
+    'blocks/*/src/**/*.js',
+    'blocks/*/src/**/*.scss',
+    'blocks/*/*.json'
+  ], buildBlocks);
+}
+
+exports.buildBlocks = buildBlocks;
+exports.watchBlocks = watchBlocks;

gulp/tasks/watch.js

@@ -8,6 +8,7 @@ const config = require('../config.js');
 const {
   handleError
 } = require('../helpers/handle-errors.js');
+const { watchBlocks } = require('./blocks');
 
 // Watch task
 function watchFiles(done) {
@@ -39,6 +40,9 @@ function watchFiles(done) {
   // Lint styles
   watch(config.styles.watch.development, series('lintstyles'));
 
+  // Add block watching
+  watchBlocks();
+
   // Finish task
   done();
 };

gulpfile.js

@@ -6,3 +6,4 @@ exports.devstyles = require('./gulp/tasks/devstyles.js').devstyles;
 exports.prodstyles = require('./gulp/tasks/prodstyles.js').prodstyles;
 exports.watch = require('./gulp/tasks/watch.js').watch;
 exports.default = require('./gulp/tasks/watch.js').watch;
+exports.blocks = require('./gulp/tasks/blocks.js').buildBlocks;

inc/hooks/native-gutenberg-blocks.php

@@ -16,7 +16,6 @@ function register_block_categories( $categories ) {
     [
       [
         'slug'  => 'air-light',
-        // Translators: Block category name
         // This can be something like "Customer's blocks"
         'title' => __( 'Air-light blocks', 'air-light' ),
       ],
@@ -34,10 +33,15 @@ function register_native_gutenberg_blocks() {
   $block_folders = array_filter( glob( $blocks_dir . '/*' ), 'is_dir' );
 
   foreach ( $block_folders as $block_folder ) {
-		// Check if block.json exists in the folder
-		if ( file_exists( $block_folder . '/block.json' ) ) {
-		  register_block_type( $block_folder );
-			}
+    // Check if block.json exists in the build folder
+    if ( file_exists( $block_folder . '/build/block.json' ) ) {
+      // Add error logging to debug block registration
+      $registration_result = register_block_type( $block_folder . '/build' );
+
+      if ( is_wp_error( $registration_result ) ) {
+        error_log( 'Block registration error for ' . basename( $block_folder ) . ': ' . $registration_result->get_error_message() );
+      }
+    }
   }
 }
 add_action( 'init', __NAMESPACE__ . '\register_native_gutenberg_blocks' );
@@ -51,19 +55,19 @@ function enqueue_block_editor_assets() {
   $block_folders = array_filter( glob( $blocks_dir . '/*' ), 'is_dir' );
 
   foreach ( $block_folders as $block_folder ) {
-		$block_name = basename( $block_folder );
-		$asset_file = get_theme_file_path( "build/{$block_name}/index.asset.php" );
+    $block_name = basename( $block_folder );
+    $asset_file = get_theme_file_path( "blocks/{$block_name}/build/index.asset.php" );
 
-		if ( file_exists( $asset_file ) ) {
-		  $asset = require $asset_file;
+    if ( file_exists( $asset_file ) ) {
+      $asset = require $asset_file;
 
-		  wp_enqueue_script(
-			"mastodonopas-{$block_name}",
-			get_theme_file_uri( "build/{$block_name}/index.js" ),
-			$asset['dependencies'] ?? [ 'wp-blocks', 'wp-element', 'wp-editor' ],
-			$asset['version'] ?? filemtime( get_theme_file_path( "build/{$block_name}/index.js" ) ),
-			true
-		  );
+      wp_enqueue_script(
+        "air-light-{$block_name}",
+        get_theme_file_uri( "blocks/{$block_name}/build/index.js" ),
+        $asset['dependencies'] ?? [ 'wp-blocks', 'wp-element', 'wp-editor' ],
+        $asset['version'] ?? filemtime( get_theme_file_path( "blocks/{$block_name}/build/index.js" ) ),
+        true
+      );
     }
   }
 }

package.json

@@ -3,21 +3,6 @@
   "version": "9.5.0",
   "description": "A minimalist WordPress starter theme.",
   "author": "Digitoimisto Dude Oy (moro@dude.fi)",
-  "scripts": {
-    "build": "wp-scripts build --config=blocks/latest-articles/webpack.config.js",
-    "check-engines": "wp-scripts check-engines",
-    "check-licenses": "wp-scripts check-licenses",
-    "format": "wp-scripts format",
-    "lint:css": "wp-scripts lint-style",
-    "lint:js": "wp-scripts lint-js",
-    "lint:md:docs": "wp-scripts lint-md-docs",
-    "lint:pkg-json": "wp-scripts lint-pkg-json",
-    "packages-update": "wp-scripts packages-update",
-    "plugin-zip": "wp-scripts plugin-zip",
-    "start": "wp-scripts start --config=blocks/latest-articles/webpack.config.js",
-    "test:e2e": "wp-scripts test-e2e",
-    "test:unit": "wp-scripts test-unit-js"
-  },
   "devDependencies": {
     "@babel/core": "^7.23.7",
     "@babel/eslint-parser": "^7.25.9",
@@ -85,4 +70,4 @@
     "reframe.js": "^4.0.0",
     "vnu-jar": "^24.10.17"
   }
-}
+}

phpcs.xml

@@ -16,16 +16,17 @@
      -->
      <arg value="psvn"/>
 
-     <!-- Only check the PHP, CSS and SCSS files. JS files are checked separately with JSCS and JSHint. -->
-     <arg name="extensions" value="php,css,scss/css"/>
+     <!-- Only check the PHP files. -->
+     <arg name="extensions" value="php"/>
 
      <!-- Check all files in this directory and the directories below it. -->
      <file>.</file>
 
+     <!-- Exclude asset.php files (Gutenberg build files) -->
+     <exclude-pattern>*.asset.php</exclude-pattern>
+
      <!-- Include the WordPress ruleset, with exclusions. -->
      <rule ref="WordPress">
-
-        <!-- Strict intendation rules we want to exclude -->
         <exclude name="Generic.WhiteSpace.ScopeIndent.IncorrectExact" />
         <exclude name="Generic.WhiteSpace.ScopeIndent.Incorrect" />
         <exclude name="Generic.WhiteSpace.DisallowSpaceIndent.SpacesUsed" />
@@ -88,6 +89,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.