adding icons to buttons

build/button-extension/block.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 2,
+  "name": "carkeek-blocks/button-extension",
+  "version": "1.0.12",
+  "editorScript": "file:./index.js"
+}

build/button-extension/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-components', 'wp-compose', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '322f66c417eb1ec9e5b5');

build/icon-block/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-server-side-render'), 'version' => '95b4ea85249aee3c6ad5');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-server-side-render'), 'version' => 'fb80865e344304036de3');

carkeek-blocks-icon.php

@@ -7,7 +7,7 @@
  * Primary Branch: main
  * Requires at least: 5.9
  * Requires PHP:      7.0
- * Version:           1.0.14
+ * Version:           1.2.00
  * Author:            The Rhizome Collaborative
  * License:           GPL-2.0-or-later
  * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
@@ -33,25 +33,62 @@ function create_block_carkeek_blocks_icon_block_init() {
 	 * To update the icon set, download the whole font awesome package from https://fontawesome.com/download
 	 * Then copy the icons.json from the metadata folder into the src folder for the icon block.
 	 */
-	register_block_type(
-		__DIR__ . '/build/icon-block',
-		array(
-			'render_callback' => 'carkeek_blocks_render_icon_block',
-		)
-	);
+	register_block_type( __DIR__ . '/build/icon-block' );
 }
 add_action( 'init', 'create_block_carkeek_blocks_icon_block_init' );
 
 /**
- * Render the icon block.
- *
- * @param array $attributes The block attributes.
- *
- * @return string
+ * Enqueue Editor scripts and styles for the button plugin.
  */
-function carkeek_blocks_render_icon_block( $attributes ) {
-	ob_start();
-	require plugin_dir_path( __FILE__ ) . 'build/icon-block/template.php';
-	return ob_get_clean();
+function enable_button_icons_enqueue_block_editor_assets() {
+	$asset_file  = include plugin_dir_path( __FILE__ ) . 'build/button-extension/index.asset.php';
+
+	wp_enqueue_script(
+		'enable-button-icons-editor-scripts',
+		plugin_dir_url( __FILE__ ) . 'build/button-extension/index.js',
+		$asset_file['dependencies'],
+		$asset_file['version']
+	);
+
+	// wp_set_script_translations(
+	// 	'enable-button-icons-editor-scripts',
+	// 	'enable-button-icons',
+	// 	plugin_dir_path( __FILE__ ) . 'languages'
+	// );
+
+	wp_enqueue_style(
+		'enable-button-icons-editor-styles',
+		plugin_dir_url( __FILE__ ) . 'build/button-extension/index.css'
+	);
 }
+add_action( 'enqueue_block_editor_assets', 'enable_button_icons_enqueue_block_editor_assets' );
 
+
+/**
+ * Render icons on the frontend.
+ */
+function enable_button_icons_render_block_button( $block_content, $block ) {
+	if ( ! isset( $block['attrs']['icon'] ) ) {
+		return $block_content;
+	}
+
+	$icon         = $block['attrs']['icon'];
+	$positionLeft = isset( $block['attrs']['iconPositionLeft'] ) ? $block['attrs']['iconPositionLeft'] : false;
+	$variation	= isset( $block['attrs']['variation'] ) ? $block['attrs']['variation'] : 'regular';
+	$align = isset( $block['attrs']['iconPositionLeft'] ) && $block['attrs']['iconPositionLeft'] ? 'left' : 'right';
+	$icon_el   = '<i class="fa-' . $icon . ' fa-' . $variation . '"> </i>';
+	// Append the icon class to the block.
+	$p = new WP_HTML_Tag_Processor( $block_content );
+	if ( $p->next_tag() ) {
+		$p->add_class( 'has-icon-' . $align );
+	}
+	$block_content = $p->get_updated_html();
+
+	// Add the SVG icon either to the left of right of the button text.
+	$block_content = $positionLeft
+		? preg_replace( '/(<a[^>]*>)(.*?)(<\/a>)/i', '$1' . $icon_el . '$2$3', $block_content )
+		: preg_replace( '/(<a[^>]*>)(.*?)(<\/a>)/i', '$1$2' . $icon_el . '$3', $block_content );
+
+	return $block_content;
+}
+add_filter( 'render_block_core/button', 'enable_button_icons_render_block_button', 10, 2 );

readme.txt

@@ -26,6 +26,9 @@ This plugin uses Font Awesome v6. To use, Font Awesome needs to be installed on
 To update the font pack in the plugin. Go to Font Awesome and download the web font, use the json files in the download.
 
 == Changelog ==
+= 1.2.00  10/22/2024 =
+Added the ability to add an icon to a button
+
 = 1.0.12  6/16/2023 =
 Show selected icon term in the search bar
 

src/button-extension/block.json

@@ -0,0 +1,7 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "carkeek-blocks/button-extension",
+	"version": "1.0.12",
+	"editorScript": "file:./index.js"
+}

src/button-extension/editor.scss

@@ -0,0 +1,9 @@
+.wp-block-buttons > .wp-block-button.wp-block-button__link--icon {
+	display: flex;
+	align-items: center;
+	padding-top: 0;
+	padding-bottom: 0;
+	& .wp-block-button__link {
+		border: none;
+	}
+}

src/button-extension/index.js

@@ -0,0 +1,179 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { addFilter } from '@wordpress/hooks';
+import { useBlockProps, InspectorControls, __experimentalUseColorProps as useColorProps } from '@wordpress/block-editor';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+import { useMergeRefs, useRefEffect } from '@wordpress/compose';
+import { useState, useRef } from '@wordpress/element';
+
+import Inspector from '../icon-block/inspector';
+import "./editor.scss";
+
+/**
+ * Add the attributes needed for button icons.
+ *
+ * @since 0.1.0
+ * @param {Object} settings
+ */
+function addAttributes( settings ) {
+	if ( 'core/button' !== settings.name ) {
+		return settings;
+	}
+
+	// Add the block visibility attributes.
+	const iconAttributes = {
+		addIcon: {
+			type: 'boolean',
+			default: false
+		},
+		icon: {
+			type: 'string',
+		},
+		variation: {
+			type: 'string',
+		},
+		iconPositionLeft: {
+			type: 'boolean',
+			default: false,
+		}
+	};
+
+	const newSettings = {
+		...settings,
+		edit(props) {
+			const { attributes, setAttributes } = props;
+			const { icon, variation, iconPositionLeft } = attributes;
+			const colorProps = useColorProps( attributes );
+			let iconDiv = '';
+			let iconDivLeft = '';
+			let buttonClass = '';
+			if ( icon  ) {
+				const iconStyle = 'fa-' + icon + ' fa-' + variation;
+				if (iconPositionLeft) {
+					iconDivLeft = <i className={ iconStyle }></i>;
+
+				} else {
+					iconDiv = <i className={ iconStyle }></i>;
+				}
+
+				buttonClass = 'wp-block-button__link wp-block-button__link--icon';
+			}
+			const blockProps = useBlockProps(
+				{ className: buttonClass }
+			);
+			return (
+				<div
+				{ ...blockProps }
+				style = { colorProps.style }
+			>
+
+				{iconDivLeft}
+
+				{settings.edit(props)}
+
+				{iconDiv}
+
+			</div>
+
+			)
+		},
+		attributes: {
+			...settings.attributes,
+			...iconAttributes,
+		},
+	};
+
+	return newSettings;
+}
+
+addFilter(
+	'blocks.registerBlockType',
+	'enable-button-icons/add-attributes',
+	addAttributes
+);
+
+/**
+ * Filter the BlockEdit object and add icon inspector controls to button blocks.
+ *
+ * @since 0.1.0
+ * @param {Object} BlockEdit
+ */
+function addInspectorControls( BlockEdit ) {
+	return ( props ) => {
+		if ( props.name !== 'core/button' ) {
+			return <BlockEdit { ...props } />;
+		}
+
+		const { attributes, setAttributes } = props;
+		const { addIcon, icon, variation, iconPositionLeft } = attributes;
+
+		return (
+			<>
+				<BlockEdit { ...props } />
+				<InspectorControls>
+					<PanelBody title={ __( 'Icon settings', 'enable-button-icons' ) }>
+						<ToggleControl
+							label={ __( 'Add icon', 'enable-button-icons' ) }
+							checked={ addIcon }
+							onChange={ ( value ) => setAttributes( { addIcon: value } ) }
+						/>
+						{ addIcon && (
+						<ToggleControl
+							label={ __( 'Place Icon Left', 'enable-button-icons' ) }
+							checked={ iconPositionLeft }
+							onChange={ ( value ) => setAttributes( { iconPositionLeft: value } ) }
+						/>
+						)}
+					</PanelBody>
+				</InspectorControls>
+
+				{ addIcon && (
+				<Inspector { ...props } />
+			)}
+			</>
+		);
+	};
+}
+
+addFilter(
+	'editor.BlockEdit',
+	'enable-button-icons/add-inspector-controls',
+	addInspectorControls
+);
+
+/**
+ * Add icon and position classes in the Editor.
+ *
+ * @since 0.1.0
+ * @param {Object} BlockListBlock
+ */
+function addClasses( BlockListBlock ) {
+	return ( props ) => {
+		const { name, attributes } = props;
+
+		if ( 'core/button' !== name || ! attributes?.icon ) {
+			return <BlockListBlock { ...props } />;
+		}
+		console.log( 'attributes', attributes );
+		const classes = classnames( props?.className, {
+			[ `fa-${ attributes?.icon }` ]: attributes?.icon,
+			[ `fa-${ attributes?.variation }` ]: attributes?.variation,
+			'has-icon-position__left': attributes?.iconPositionLeft,
+		} );
+
+		return <BlockListBlock { ...props } className={ classes } />;
+	};
+}
+
+// addFilter(
+// 	'editor.BlockListBlock',
+// 	'enable-button-icons/add-classes',
+// 	addClasses
+// );

src/icon-block/edit.js

@@ -13,6 +13,10 @@ import svgs from './svgs';
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
+import { InspectorControls, URLInput } from '@wordpress/block-editor';
+
+import { PanelBody, ToggleControl } from '@wordpress/components';
 import { useBlockProps } from "@wordpress/block-editor";
 import ServerSideRender from '@wordpress/server-side-render';
 
@@ -21,26 +25,52 @@ import ServerSideRender from '@wordpress/server-side-render';
  */
 function Edit( props ) {
 	const {
-        attributes
+        attributes,
+		setAttributes
     } = props;
     const {
 		icon,
 		variation,
-		contentAlign
+		contentAlign,
+		href,
+		linkTarget,
     } = attributes;
 
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( );
 	const classes = classnames( blockProps.className, {
 		[ `has-text-align-${ contentAlign }` ]: contentAlign,
 	} );
 
 	const displayIcon = icon ? svgs[ icon ].variation[ variation ] : svgs.icons.icon;
+
+	const setLinkTarget = ( value ) => {
+		if ( ! value ) {
+			setAttributes( { linkTarget: '_self' } );
+		} else {
+			setAttributes( { linkTarget: '_blank' } );
+		}
+	}
 	return (
 		<div { ...blockProps }>
 
 				<Inspector
 					{ ...props }
 				/>
+				<InspectorControls>
+				<PanelBody
+					title={ __( 'Link settings', 'carkeek-blocks' ) }
+					initialOpen={ false } >
+					<URLInput
+						value={href}
+						onChange={ ( href ) => setAttributes( { href } ) }
+						label={__("Link URL", "carkeek-blocks")}
+					/>
+					<ToggleControl
+						label={ linkTarget ? __( 'Opening in new tab', 'carkeek-blocks' ) : __( 'Open in new tab', 'carkeek-blocks' ) }
+						onChange={ ( val ) => setLinkTarget( { val } ) }
+						checked={ linkTarget === '_blank' } />
+				</PanelBody>
+				</InspectorControls>
 
 
 				<Controls