Scaffold Hero Block

acf-json/group_6361413178825.json

@@ -0,0 +1,170 @@
+{
+    "key": "group_6361413178825",
+    "title": "Block: Hero",
+    "fields": [
+        {
+            "key": "field_636141317b9ad",
+            "label": "",
+            "name": "",
+            "aria-label": "",
+            "type": "message",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "message": "<h2>Hero Block<\/h2>",
+            "new_lines": "wpautop",
+            "esc_html": 0
+        },
+        {
+            "key": "field_636141317b9b5",
+            "label": "Overlay",
+            "name": "overlay",
+            "aria-label": "",
+            "type": "color_picker",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "enable_opacity": 1,
+            "return_format": "string",
+            "parent_repeater": "field_6328abf214941"
+        },
+        {
+            "key": "field_636141317f22f",
+            "label": "Image",
+            "name": "image",
+            "aria-label": "",
+            "type": "clone",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "clone": [
+                "group_61e58e490f037"
+            ],
+            "display": "seamless",
+            "layout": "block",
+            "prefix_label": 0,
+            "prefix_name": 0,
+            "parent_repeater": "field_6328abf214941"
+        },
+        {
+            "key": "field_636141317f235",
+            "label": "Eyebrow",
+            "name": "eyebrow",
+            "aria-label": "",
+            "type": "text",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "placeholder": "",
+            "prepend": "",
+            "append": "",
+            "maxlength": "",
+            "parent_repeater": "field_6328abf214941"
+        },
+        {
+            "key": "field_636141317f239",
+            "label": "Heading",
+            "name": "heading",
+            "aria-label": "",
+            "type": "text",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "placeholder": "",
+            "prepend": "",
+            "append": "",
+            "maxlength": "",
+            "parent_repeater": "field_6328abf214941"
+        },
+        {
+            "key": "field_636141317f23e",
+            "label": "Content",
+            "name": "content",
+            "aria-label": "",
+            "type": "textarea",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "placeholder": "",
+            "maxlength": "",
+            "rows": "",
+            "new_lines": "br",
+            "parent_repeater": "field_6328abf214941"
+        },
+        {
+            "key": "field_636141317f242",
+            "label": "Button",
+            "name": "button_args",
+            "aria-label": "",
+            "type": "clone",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "clone": [
+                "group_59416d894b7c7"
+            ],
+            "display": "seamless",
+            "layout": "block",
+            "prefix_label": 0,
+            "prefix_name": 0
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "block",
+                "operator": "==",
+                "value": "abs\/hero"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "modified": 1667319325
+}

src/blocks/hero/block.json

@@ -0,0 +1,32 @@
+{
+	"name": "abs/hero",
+	"title": "Hero",
+	"description": "Hero block to use at the top of your page.",
+	"editorStyle": "file:./editor.css",
+	"editorScript": "file:./editor.js",
+	"style": "file:./style-script.css",
+	"script": "file:./script.js",
+	"category": "WDS",
+	"icon": "cover-image",
+	"apiVersion": 2,
+	"keywords": [ "hero", "{{keyword}}", "block" ],
+	"acf": {
+		"mode": "auto",
+		"renderTemplate": "hero.php"
+	},
+	"supports": {
+		"align": false,
+		"anchor": true,
+		"color": true,
+		"customClassName": true,
+		"jsx": true
+	},
+	"example": {
+		"attributes": {
+			"mode": "preview",
+			"data": {
+				"_is_preview": "true"
+			}
+		}
+	}
+}

src/blocks/hero/editor.js

@@ -0,0 +1,3 @@
+import './editor.scss';
+
+// Editor JS here.

src/blocks/hero/editor.scss

@@ -0,0 +1 @@
+// Editor styles.

src/blocks/hero/hero.php

@@ -0,0 +1,50 @@
+<?php
+/**
+ * BLOCK - Renders a Hero
+ *
+ * @link https://developer.wordpress.org/block-editor/
+ *
+ * @package abs
+ */
+
+use function WebDevStudios\abs\get_acf_fields;
+use function WebDevStudios\abs\print_module;
+use function WebDevStudios\abs\setup_block_defaults;
+
+$abs_block = isset( $block ) ? $block : '';
+$abs_args  = isset( $args ) ? $args : '';
+
+$abs_defaults = [
+	'class'               => [ 'wds-block', 'wds-block-hero' ],
+	'show_arrows'         => true,
+	'show_pagination'     => true,
+	'allowed_innerblocks' => [ 'core/heading', 'core/paragraph' ],
+	'id'                  => ( isset( $block ) && ! empty( $block['anchor'] ) ) ? $block['anchor'] : '',
+	'fields'              => [], // Fields passed via the print_block() function.
+];
+
+// Returns updated $abs_defaults array with classes from Gutenberg or from the print_block() function.
+// Returns formatted attributes as $abs_atts array.
+[ $abs_defaults, $abs_atts ] = setup_block_defaults( $abs_args, $abs_defaults, $abs_block );
+
+// Pull in the fields from ACF, if we've not pulled them in using print_block().
+$abs_hero = ! empty( $abs_defaults['fields'] ) ? $abs_defaults['fields'] : get_acf_fields( [ 'overlay', 'image', 'heading', 'eyebrow', 'content', 'button_args' ], $block['id'] );
+?>
+
+<?php if ( ! empty( $block['data']['_is_preview'] ) ) : ?>
+	<figure>
+		<img
+			src="<?php echo esc_url( plugin_dir_url( __DIR__ ) . '../assets/images/block-previews/hero-preview.jpg' ); ?>"
+			alt="<?php esc_html_e( 'Preview of the Hero Block', 'abs' ); ?>"
+		>
+	</figure>
+<?php elseif ( $abs_hero['heading'] ) : ?>
+	<section <?php echo $abs_atts; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
+		<?php
+		print_module(
+			'hero',
+			$abs_hero
+		);
+		?>
+	</section>
+<?php endif; ?>

src/blocks/hero/script.js

@@ -0,0 +1,9 @@
+/**
+ * Block script.
+ *
+ * @package
+ * @since 2.0.0
+ */
+import './style.scss';
+
+// add JS here.

src/blocks/hero/style.scss

@@ -0,0 +1,25 @@
+// Frontend styles.
+.wds-block-hero {
+	@apply container;
+
+	.wds-module-hero {
+		@apply h-[400px];
+
+		.background {
+			@apply relative;
+
+			.wds-element-image,
+			.overlay {
+				@apply absolute w-full h-[400px] object-cover;
+			}
+
+			.overlay {
+				@apply z-10;
+			}
+		}
+
+		.hero-content {
+			@apply relative z-20 h-full flex items-center justify-center flex-col text-white;
+		}
+	}
+}

src/blocks/hero/tailwind.config.js

@@ -0,0 +1,13 @@
+const { tailwindPreset } = require( '../../../postcss.config' );
+const blockName = 'hero';
+
+const directoryFiles = [
+	`./src/blocks/${ blockName }/*.php`,
+	`./src/blocks/${ blockName }/*.scss`,
+	`./src/blocks/${ blockName }/*.js`,
+];
+
+module.exports = {
+	presets: [ require( tailwindPreset ) ],
+	content: directoryFiles,
+};

src/elements/button.php

@@ -17,7 +17,7 @@
 	'class'         => [ 'wds-element', 'wds-element-button' ],
 	'id'            => '',
 	'title'         => false,
-	'href'          => false,
+	'url'           => false,
 	'target'        => false,
 	'type'          => false,
 	'icon'          => [],
@@ -33,6 +33,9 @@
 
 $abs_args = get_formatted_args( $args, $abs_defaults );
 
+// Map the ACF link 'url' attribute to an 'href' attribute.
+$abs_args['href'] = $abs_args['url'];
+
 // Make sure element should render.
 if ( $abs_args['title'] || $abs_args['icon'] ) :