[#84] Parts Kit Integration (#101)

* [#84] Parts Kit (to be continued...)

* [#84] WIP Parts Kit Plugin using Standalone Editor

* [#84] Reverted back to rendering the blocks

* [#84] Probably as close as it's going to get.

* [#84] Disable links in Block rendered area.

.gitignore

@@ -234,6 +234,7 @@ wp-config.php
 # Explicitly Allowed Themes and Plugins
 !/wp-content/themes/wp-starter
 !/wp-content/plugins/acf-blocks-toolkit
+!/wp-content/plugins/viget-parts-kit
 !/wp-content/plugins/advanced-custom-fields-pro
 
 # Remove the theme.json file as it is built in the theme with Vite

bin/composer-scripts/ProjectEvents/PostInstallScript.php

@@ -62,6 +62,7 @@ class PostInstallScript extends ComposerScript {
 		],
 		'seo-by-rank-math' => 'Rank Math SEO',
 		'svg-support' => 'SVG Support',
+		'viget-parts-kit' => 'Viget Parts Kit',
 		'wordfence' => 'Wordfence',
 	];
 

wp-content/plugins/acf-blocks-toolkit/acf-blocks-toolkit.php

@@ -47,5 +47,8 @@
 // Timber functions.
 require_once 'includes/button-icons.php';
 
+// Parts Kit support.
+require_once 'includes/parts-kit.php';
+
 Block_Registration::init();
 Settings::init();

wp-content/plugins/acf-blocks-toolkit/includes/helpers.php

@@ -40,17 +40,31 @@ function block_attrs( array $block, string $custom_class = '', array $attrs = []
 			$attrs['data-supports-jsx'] = 'true';
 		}
 
+		// Prepare Extra attributes.
+		$extra = [
+			'class' => $attrs['class'],
+			'style' => $attrs['style'],
+		];
+		unset( $attrs['class'] );
+		unset( $attrs['style'] );
+		if ( ! empty( $attrs['id'] ) ) {
+			$extra['id'] = $attrs['id'];
+			unset( $attrs['id'] );
+		}
+
 		foreach ( $attrs as $key => $value ) {
 			echo ' ' . esc_attr( $key ) . '="' . esc_attr( $value ) . '"';
 		}
 
+		echo ' '; // Prep for additional block_attrs.
+
 		do_action( 'acfbt_block_attr', $block );
 
 		if ( is_preview() ) {
 			return;
 		}
 
-		echo wp_kses_data( get_block_wrapper_attributes() );
+		echo wp_kses_data( get_block_wrapper_attributes( $extra ) );
 	}
 }
 

wp-content/plugins/acf-blocks-toolkit/includes/parts-kit.php

@@ -0,0 +1,215 @@
+<?php
+/**
+ * Add ACF Blocks to Parts Kit
+ *
+ * @package ACFBlocksToolkit
+ */
+
+use Viget\ACFBlocksToolkit\Block_Registration;
+
+add_filter(
+	'viget_parts_kit_block_%',
+	function ( string $output, string $block_name ): string {
+		$block = Block_Registration::get_block( $block_name );
+
+		if ( ! $block ) {
+			return $output;
+		}
+
+		if ( ! empty( $block['path'] ) ) {
+			$include = $block['path'] . '/block.php';
+
+			// Autoload block.php within block directory
+			if ( file_exists( $include ) ) {
+				require_once $include;
+			}
+		}
+
+		return acfbt_parse_inner_blocks( $output );
+	},
+	10,
+	2
+);
+
+/**
+ * Parse InnerBlocks Template
+ *
+ * @param string $output
+ *
+ * @return string
+ */
+function acfbt_parse_inner_blocks( string $output ): string {
+	// Check if InnerBlocks tag has a template attribute with regular expression
+	if ( ! preg_match( '/<InnerBlocks[^>]*template="([^"]*)"[^>]*>/i', $output, $matches ) ) {
+		return $output;
+	}
+
+	// Get the template attribute value
+	$template = $matches[1];
+	$template = htmlspecialchars_decode( $template );
+	$template = json_decode( $template, true );
+
+	$content = '';
+
+	foreach ( $template as $block_array ) {
+		$block = [
+			'blockName'   => $block_array[0],
+			'attrs'       => $block_array[1] ?? [],
+			'innerBlocks' => $block_array[2] ?? [],
+		];
+
+		$block    = acfbt_add_sample_data( $block );
+		$content .= apply_filters( 'the_content', trim( render_block( $block ) ) );
+		$content  = acfbt_parse_inner_blocks( $content );
+		$content  = acfbt_fill_empty_tags( $content );
+	}
+
+	$content = str_replace( '$', '\$', $content );
+
+	// Replace the InnerBlocks tag with the parsed content
+	return preg_replace( '/<InnerBlocks[^>]*\/>/i', $content, $output );
+}
+
+/**
+ * Get Sample Block properties
+ *
+ * @param array $block
+ *
+ * @return array
+ */
+function acfbt_get_sample_props( array $block ): array {
+	$props  = [];
+	$fields = get_fields( $block['name'] );
+
+	if ( ! is_array( $fields ) ) {
+		return $props;
+	}
+
+	foreach ( $fields as $field ) {
+		$props[ $field['name'] ] = acfbt_get_sample_data( $field );
+	}
+
+	return $props;
+}
+
+/**
+ * Return Sample Parts Kit Data
+ *
+ * @param array $field
+ *
+ * @return string|array
+ */
+function acfbt_get_sample_data( array $field ): string|array {
+	if ( in_array( $field['type'], [ 'text', 'select' ], true ) ) {
+		return 'Lorem Ipsum';
+	}
+
+	if ( 'image' === $field['type'] ) {
+		return [
+			'ID'          => 000,
+			'id'          => 000,
+			'title'       => 'placeholder',
+			'filename'    => '600x400.svg',
+			'filesize'    => 3270,
+			'url'         => 'https://placehold.co/600x400/EEE/31343C',
+			'link'        => 'https://placehold.co/600x400/EEE/31343C',
+			'alt'         => '600x400 Placeholder',
+			'author'      => 1,
+			'description' => 'A 600x400 placeholder image.',
+			'caption'     => 'This is a placeholder',
+			'name'        => '600x400',
+			'status'      => 'inherit',
+			'uploaded_to' => 0,
+			'date'        => '2023-09-24 13:12:00',
+			'modified'    => '2023-09-24 13:12:00',
+			'menu_order'  => 0,
+			'mime_type'   => 'image/svg+xml',
+			'type'        => 'image',
+			'subtype'     => 'svg',
+			'icon'        => 'https://viget-wp-boilerplate.vgt.site/wp-includes/images/media/default.png',
+			'width'       => 600,
+			'height'      => 400,
+			'sizes'       => [
+				'thumbnail'           => 'https://placehold.co/150x150/EEE/31343C',
+				'thumbnail-width'     => 150,
+				'thumbnail-height'    => 150,
+				'medium'              => 'https://placehold.co/226x300/EEE/31343C',
+				'medium-width'        => 226,
+				'medium-height'       => 300,
+				'large'               => 'https://placehold.co/771x1024/EEE/31343C',
+				'large-width'         => 771,
+				'large-height'        => 1024,
+			],
+		];
+	}
+
+	if ( 'wysiwyg' === $field['type'] ) {
+		return '<p>Lorem Ipsum</p>';
+	}
+
+	return 'Unsupported.';
+}
+
+/**
+ * Add Sample Data to Block
+ *
+ * @param array $block
+ *
+ * @return array
+ */
+function acfbt_add_sample_data( array $block ): array {
+	$supported = [
+		'core/image'     => [
+			'url'    => acfbt_get_sample_data( [ 'type' => 'image' ] )[ 'url' ],
+			'width'  => acfbt_get_sample_data( [ 'type' => 'image' ] )[ 'width' ],
+			'height' => acfbt_get_sample_data( [ 'type' => 'image' ] )[ 'height' ],
+		],
+		'core/heading'   => [
+			'content' => acfbt_get_sample_data( [ 'type' => 'text' ] ),
+		],
+		'core/paragraph' => [
+			'content' => acfbt_get_sample_data( [ 'type' => 'text' ] ),
+		],
+		'core/button'    => [
+			'text' => acfbt_get_sample_data( [ 'type' => 'text' ] ),
+			'url'  => '#',
+		],
+		'core/details'   => [
+			'summary' => acfbt_get_sample_data( [ 'type' => 'text' ] ),
+		],
+	];
+
+	if ( ! array_key_exists( $block['blockName'], $supported ) ) {
+		return $block;
+	}
+
+	foreach ( $supported[ $block['blockName'] ] as $attr => $value ) {
+		if ( empty( $block['attrs'][ $attr ] ) ) {
+			$block['attrs'][ $attr ] = $value;
+		}
+	}
+
+	return $block;
+}
+
+/**
+ * Add sample content to empty paragraph, heading, summary, etc.
+ *
+ * @param string $content
+ *
+ * @return string
+ */
+function acfbt_fill_empty_tags( string $content ): string {
+	$sample_text = acfbt_get_sample_data( [ 'type' => 'text' ] );
+
+	$patterns = [
+		'/<(p[^>]*)><\/(p)>/i',
+		'/<(h[1-6][^>]*)><\/(h[1-6])>/i',
+	];
+
+	foreach ( $patterns as $pattern ) {
+		$content = preg_replace( $pattern, '<$1>' . $sample_text . '</$2>', $content );
+	}
+
+	return $content;
+}

wp-content/plugins/acf-blocks-toolkit/includes/register.php

@@ -45,7 +45,7 @@ function () {
 
 					// Autoload block.php within block directory
 					if ( file_exists( $include_path ) ) {
-						require $include_path;
+						require_once $include_path;
 					}
 
 					register_block_type( $block['path'] . '/block.json' );
@@ -71,7 +71,7 @@ function ( array $metadata ): array {
 					return $metadata;
 				}
 
-				$metadata['acf']['renderCallback'] = function ( array $block, string $content = '', bool $is_preview = false ): void {
+				$metadata['acf']['renderCallback'] = function ( array $block, string $content = '', bool $is_preview = false ) use ( $metadata ): void {
 					$block_name    = str_replace( 'acf/', '', $block['name'] );
 					$block['slug'] = sanitize_title( $block_name );
 					if ( empty( $block['path'] ) ) {
@@ -81,6 +81,9 @@ function ( array $metadata ): array {
 						$block['url'] = self::path_to_url( $block['path'] );
 					}
 
+					// Pass the block template data to the block.
+					$block['template'] = $metadata['acf']['innerBlocks'] ?? [];
+
 					$twig = $block['path'] . '/render.twig';
 
 					if ( class_exists( '\Timber\Timber' ) && file_exists( $twig ) ) {
@@ -281,7 +284,7 @@ function ( bool $wrap, string $name ): bool {
 	 * @return void
 	 */
 	public static function render_twig_block( string $template, array $block = [], string $content = '', bool $is_preview = false, int $post_id = 0 ): void {
-		$context = Timber::context();
+		$context = get_queried_object() ? Timber::context() : [];
 
 		// Store block attributes.
 		$context['attributes'] = $block;

wp-content/plugins/viget-parts-kit/.editorconfig

@@ -0,0 +1,27 @@
+# This file is for unifying the coding style for different editors and IDEs
+# It is based on https://core.trac.wordpress.org/browser/trunk/.editorconfig
+# See https://editorconfig.org for more information about the standard.
+# WordPress VIP documentation: https://docs.wpvip.com/technical-references/vip-codebase/editorconfig/
+
+# WordPress Coding Standards
+# https://make.wordpress.org/core/handbook/coding-standards/
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = tab
+indent_size = 4
+
+[{*.yml,*.json}]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.txt]
+end_of_line = crlf

wp-content/plugins/viget-parts-kit/.eslintrc

@@ -0,0 +1,5 @@
+{
+	"extends": [
+		"plugin:@wordpress/eslint-plugin/recommended"
+	]
+}