Merge pull request #317 from moderntribe/task/MOOSE-344/update-create-block-script

[MOOSE-344] FE: Update `create-block` Script Template Files

Author: GeoffDusome

CHANGELOG.md

@@ -11,6 +11,7 @@ item (Added, Changed, Depreciated, Removed, Fixed, Security).
 - Updated: Expected PHP version to v8.4, Node version to v24 LTS
 - Updated: WordPress to v6.9.1
 - Updated: All plugins, composer dependencies, and npm packages to latest versions.
+- Updated: `npm run create-block` script template files updated.
 - Added: New Accordion block styling
 - Removed: Details block styling
 - Fixed: pre-push git hooks running properly again.

dev/templates/block/Block_Controller.php.mustache

@@ -0,0 +1,34 @@
+{{#isDynamicVariant}}
+<?php declare(strict_types=1);
+
+namespace Tribe\Plugin\Components\Blocks;
+
+use Tribe\Plugin\Components\Abstracts\Abstract_Block_Controller;
+
+/**
+ * TODO:
+ * - Rename class & file name to match the block name.
+ * - Move file to wp-content/plugins/core/src/Components/Blocks/
+ * - If this is a card block, update the Abstract_Block_Controller class to Abstract_Card_Controller.
+ * - If this block contains post data:
+ *     - Use `use Tribe\Plugin\Components\Traits\Post_Data;`.
+ *     - Add `use Post_Data;` within this class to inherit the post data trait + methods.
+ * - Extend / update to include any block specific logic & fields
+ */
+
+class Block_Controller extends Abstract_Block_Controller {
+
+	protected string $example_text_control;
+
+	public function __construct( array $args = [] ) {
+		parent::__construct( $args );
+
+		$this->example_text_control = $this->attributes['exampleTextControl'] ?? '';
+	}
+
+	public function get_example_text_control(): string {
+		return $this->example_text_control;
+	}
+
+}
+{{/isDynamicVariant}}

dev/templates/block/edit.js.mustache

@@ -15,7 +15,10 @@ export default function Edit( { attributes, setAttributes, isSelected } ) {
 	return (
 		<div { ...blockProps }>
 			{{#isDynamicVariant}}
-			<ServerSideRender block="{{namespace}}/{{slug}}" attributes={ attributes } />
+			<ServerSideRender
+				block="tribe/test-dynamic"
+				attributes={ attributes }
+			/>
 			{{/isDynamicVariant}}
 			{{#isStaticVariant}}
 			<p>{ __( '{{title}} – hello from the editor!', '{{namespace}}' ) }</p>

dev/templates/block/editor.pcss.mustache

@@ -4,6 +4,6 @@
  *
  * ------------------------------------------------------------------------- */
 
-{{#isDynamicVariant}}section{{/isDynamicVariant}}.wp-block-{{namespace}}-{{slug}} {
+{{#isDynamicVariant}}.b-{{slug}}{{/isDynamicVariant}}{{#isStaticVariant}}.wp-block-{{namespace}}-{{slug}}{{/isStaticVariant}} {
 	border: 1px dotted #f00;
 }

dev/templates/block/render.php.mustache

@@ -1,12 +1,17 @@
 {{#isDynamicVariant}}
 <?php declare(strict_types=1);
 
-$example_text_control = $attributes['exampleTextControl']; // @phpstan-ignore-line
+/**
+ * @var array $attributes
+ */
+
+$c = Block_Controller::factory( [
+	'attributes'    => $attributes,
+	'block_classes' => 'b-{{slug}}',
+] );
 ?>
-<section <?php echo get_block_wrapper_attributes(); ?>>
+<section <?php echo get_block_wrapper_attributes( [ 'class' => esc_attr( $c->get_block_classes() ), 'style' => $c->get_block_styles() ] ); ?>>
 	<p><?php esc_html_e( '{{title}} – hello from a dynamic block!', '{{namespace}}' ); ?></p>
-	<?php if ( $example_text_control ) : ?>
-		<p><?php echo esc_html( $example_text_control ); ?></p>
-	<?php endif; ?>
+	<p><?php echo esc_html( $c->get_example_text_control() ); ?></p>
 </section>
 {{/isDynamicVariant}}

dev/templates/block/style.pcss.mustache

@@ -4,7 +4,7 @@
  *
  * ------------------------------------------------------------------------- */
 
-.wp-block-{{namespace}}-{{slug}} {
+{{#isDynamicVariant}}.b-{{slug}}{{/isDynamicVariant}}{{#isStaticVariant}}.wp-block-{{namespace}}-{{slug}}{{/isStaticVariant}} {
 	background-color: #21759b;
 	color: #fff;
 	padding: 2px;