[#105] Added support for more block types

wp-content/plugins/acf-blocks-toolkit/README.md

@@ -45,6 +45,21 @@ add_filter(
 );
 ```
 
+### `acfbt_supported_icon_blocks` (Filter)
+
+Filter the supported icon blocks. Note: the frontend and editor CSS may need to be manually added for additional blocks.
+
+```php
+<?php
+add_filter(
+	'acfbt_supported_icon_blocks',
+	function ( array $blocks ): array {
+		$blocks[] = 'core/heading';
+		return $blocks;
+	}
+);
+```
+
 ### `acfbt_button_icons_editor_css` (Filter)
 
 Filter the editor CSS for the button icons. This is useful when some icons do not use outline fill the fill property causes issues. Or can also be used to specify icon dimensions using `max-height`.

wp-content/plugins/acf-blocks-toolkit/build/editor.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '5f2ddef1c2a1a8ed7045');
+<?php return array('dependencies' => array(), 'version' => '31dd407f2e05602363d1');

wp-content/plugins/acf-blocks-toolkit/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-components', 'wp-hooks', 'wp-i18n'), 'version' => '4adf2fbb0a5c99be8a2d');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-components', 'wp-hooks', 'wp-i18n'), 'version' => '96ab41c2fc05810d6387');

wp-content/plugins/acf-blocks-toolkit/build/style.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '593029f68ba74678b270');
+<?php return array('dependencies' => array(), 'version' => 'f8cd9c985e587f95bc26');

wp-content/plugins/acf-blocks-toolkit/includes/button-icons.php

@@ -13,6 +13,22 @@
 global $acfbt_disable_filters;
 $acfbt_disable_filters = false;
 
+/**
+ * Get supported blocks for icons.
+ *
+ * @return string[]
+ */
+function acfbt_get_supported_icon_blocks(): array {
+	return apply_filters(
+		'acfbt_supported_icon_blocks',
+		[
+			'core/button',
+			'core/navigation-link',
+			'core/home-link',
+		]
+	);
+}
+
 /**
  * Enqueue Editor scripts and styles.
  */
@@ -30,9 +46,10 @@ function () {
 
 		wp_localize_script(
 			'acfbt-editor-scripts',
-			'acfbtIcons',
+			'acfbtVars',
 			[
-				'iconsJson' => acfbt_get_icons(),
+				'iconsJson'       => acfbt_get_icons(),
+				'supportedBlocks' => acfbt_get_supported_icon_blocks(),
 			]
 		);
 
@@ -60,19 +77,20 @@ function () {
  * Enqueue block styles
  * (Applies to both frontend and Editor)
  */
-
 add_action(
 	'init',
 	function () {
-		wp_enqueue_block_style(
-			'core/button',
-			array(
-				'handle' => 'acfbt-block-styles',
-				'src'    => ACFBT_PLUGIN_URL . '/build/style.css',
-				'ver'    => ACFBT_VERSION,
-				'path'   => ACFBT_PLUGIN_PATH . '/build/style.css',
-			)
-		);
+		foreach ( acfbt_get_supported_icon_blocks() as $block_name ) {
+			wp_enqueue_block_style(
+				$block_name,
+				array(
+					'handle' => 'acfbt-block-styles',
+					'src'    => ACFBT_PLUGIN_URL . '/build/style.css',
+					'ver'    => ACFBT_VERSION,
+					'path'   => ACFBT_PLUGIN_PATH . '/build/style.css',
+				)
+			);
+		}
 	}
 );
 
@@ -90,7 +108,9 @@ function acfbt_button_icons_editor_css(): string {
 		$content = 'data:image/svg+xml;utf8,' . rawurlencode( $icon['icon'] );
 
 		$css .= ".wp-block-button.has-icon__{$slug} .wp-block-button__link::after,";
-		$css .= ".wp-block-button.has-icon__{$slug} .wp-block-button__link::before {";
+		$css .= ".wp-block-button.has-icon__{$slug} .wp-block-button__link::before,";
+		$css .= ".wp-block-navigation-item.has-icon__{$slug} .wp-block-navigation-item__content::after,";
+		$css .= ".wp-block-navigation-item.has-icon__{$slug} .wp-block-navigation-item__content::before {";
 		$css .= 'height: 0.7em;';
 		$css .= 'width: 1em;';
 		$css .= "mask-image: url( $content );";
@@ -109,45 +129,55 @@ function acfbt_button_icons_editor_css(): string {
 /**
  * Render icons on the frontend.
  */
-add_filter(
-	'render_block_core/button',
-	function ( string $block_content, array $block ): string {
-		if ( ! isset( $block['attrs']['icon'] ) ) {
-			return $block_content;
-		}
+foreach ( acfbt_get_supported_icon_blocks() as $block_name ) {
+	add_filter( "render_block_{$block_name}", 'acfbt_render_frontend_icons', 10, 2 );
+}
+
+/**
+ * Render icons on frontend.
+ *
+ * @param string $block_content
+ * @param array $block
+ *
+ * @return string
+ */
+function acfbt_render_frontend_icons( string $block_content, array $block ): string {
+	if ( ! isset( $block['attrs']['icon'] ) ) {
+		return $block_content;
+	}
 
-		$icon = acfbt_get_icon( $block['attrs']['icon'] );
+	list( $namespace, $block_name ) = explode( '/', $block['blockName'] );
 
-		// Make sure the selected icon exists, otherwise bail.
-		if ( empty( $icon ) ) {
-			return $block_content;
-		}
+	$icon = acfbt_get_icon( $block['attrs']['icon'] );
 
-		$position_left = $block['attrs']['iconPositionLeft'] ?? false;
+	// Make sure the selected icon exists, otherwise bail.
+	if ( empty( $icon ) ) {
+		return $block_content;
+	}
 
-		// Append the icon class to the block.
-		$p = new WP_HTML_Tag_Processor( $block_content );
-		if ( $p->next_tag() ) {
-			$p->add_class( 'has-icon__' . $icon['value'] );
-		}
-		$block_content = $p->get_updated_html();
-		$block_content = str_replace( '$', '\$', $block_content );
-
-		$pattern = '/(<a[^>]*>)(.*?)(<\/a>)/i';
-		$markup  = sprintf(
-			'<span class="wp-block-button__link-icon has-icon__%s" aria-hidden="true">%s</span>',
-			esc_attr( $icon['value'] ),
-			$icon['icon']
-		);
+	$position_left = $block['attrs']['iconPositionLeft'] ?? false;
 
-		// Add the SVG icon either to the left of right of the button text.
-		return $position_left
-			? preg_replace( $pattern, '$1' . $markup . '$2$3', $block_content )
-			: preg_replace( $pattern, '$1$2' . $markup . '$3', $block_content );
-	},
-	10,
-	2
-);
+	// Append the icon class to the block.
+	$p = new WP_HTML_Tag_Processor( $block_content );
+	if ( $p->next_tag() ) {
+		$p->add_class( 'has-icon__' . $icon['value'] );
+	}
+	$block_content = $p->get_updated_html();
+	$block_content = str_replace( '$', '\$', $block_content );
+
+	$pattern = '/(<a[^>]*>)(.*?)(<\/a>)/i';
+	$markup  = sprintf(
+		'<span class="wp-block-%s__link-icon has-icon__%s" aria-hidden="true">%s</span>',
+		esc_attr( $block_name ),
+		esc_attr( $icon['value'] ),
+		$icon['icon']
+	);
+
+	// Add the SVG icon either to the left of right of the button text.
+	return $position_left
+		? preg_replace( $pattern, '$1' . $markup . '$2$3', $block_content )
+		: preg_replace( $pattern, '$1$2' . $markup . '$3', $block_content );
+}
 
 /**
  * Get all available icons.

wp-content/plugins/acf-blocks-toolkit/src/editor.scss

@@ -1,6 +1,8 @@
 // Add icons to Button blocks and style appropriately.
-.wp-block-button[class*="has-icon__"] {
-	.wp-block-button__link {
+.wp-block-button[class*="has-icon__"],
+.wp-block-navigation-item[class*="has-icon__"] {
+	.wp-block-button__link,
+	.wp-block-navigation-item__content {
 		&::after {
 			content: "";
 		}
@@ -22,7 +24,8 @@
 	}
 
 	&.has-icon-position__left {
-		.wp-block-button__link {
+		.wp-block-button__link,
+		.wp-block-navigation-item__content {
 			&::before {
 				content: "";
 			}

wp-content/plugins/acf-blocks-toolkit/src/index.js

@@ -1,4 +1,4 @@
-/** global acfbtIcons */
+/** global acfbtVars */
 
 /**
  * External dependencies
@@ -19,7 +19,7 @@ import {
 	__experimentalGrid as Grid, // eslint-disable-line
 } from '@wordpress/components';
 
-const icons = acfbtIcons.iconsJson;
+const icons = acfbtVars.iconsJson;
 
 /**
  * All available icons.
@@ -34,7 +34,7 @@ export const ICONS = icons;
  * @param {Object} settings
  */
 function addAttributes(settings) {
-	if ('core/button' !== settings.name) {
+	if (!acfbtVars.supportedBlocks.includes(settings.name)) {
 		return settings;
 	}
 
@@ -72,7 +72,7 @@ addFilter(
  */
 function addInspectorControls(BlockEdit) {
 	return (props) => {
-		if (props.name !== 'core/button') {
+		if (!acfbtVars.supportedBlocks.includes(props.name)) {
 			return <BlockEdit {...props} />;
 		}
 
@@ -147,7 +147,7 @@ function addClasses(BlockListBlock) {
 	return (props) => {
 		const { name, attributes } = props;
 
-		if ('core/button' !== name || !attributes?.icon) {
+		if (!acfbtVars.supportedBlocks.includes(name) || !attributes?.icon) {
 			return <BlockListBlock {...props} />;
 		}
 

wp-content/plugins/acf-blocks-toolkit/src/index.scss

@@ -1,18 +1,20 @@
-.wp-block-button[class*="has-icon__"] {
-	.wp-block-button__link {
+.wp-block-button[class*="has-icon__"],
+.wp-block-navigation-item[class*="has-icon__"] {
+	.wp-block-button__link,
+	.wp-block-navigation-item__content {
 		display: flex;
 		gap: 0.5em;
 		align-items: center;
 
-		span {
+		span[class$="__link-icon"] {
 			line-height: 0;
-		}
 
-		svg {
-			color: currentColor;
-			fill: currentColor;
-			height: 0.7em;
-			width: 1em;
+			svg {
+				color: currentColor;
+				fill: currentColor;
+				height: 0.7em;
+				width: 1em;
+			}
 		}
 	}
 }