iconify-button.php

<?php
/**
 * Plugin Name:         Iconify Button
 * Description:         Extends the core Button block with an option to add icons.
 * Author:              code-mat
 * Version:             0.1.0
 * Requires at least:   6.7
 * Requires PHP:        7.4
 * License:             GPL-2.0+
 * Text Domain:         iconify-button
 *
 * @package iconify-button
 */

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

define( 'ICONIFY_BUTTON_URL', plugin_dir_url( __FILE__ ) );
define( 'ICONIFY_BUTTON_DIR', plugin_dir_path( __FILE__ ) );

/**
 * Enqueue block editor scripts and styles.
 */
add_action(
	'enqueue_block_editor_assets',
	function () {
		wp_enqueue_script(
			'iconify-button-editor',
			ICONIFY_BUTTON_URL . 'build/index.js',
			array( 'wp-hooks', 'wp-i18n', 'wp-element', 'wp-components', 'wp-blocks', 'wp-block-editor' ),
			filemtime( ICONIFY_BUTTON_DIR . 'build/index.js' ),
			true
		);

		wp_enqueue_style(
			'iconify-button-editor',
			ICONIFY_BUTTON_URL . 'build/editor.css',
			array(),
			filemtime( ICONIFY_BUTTON_DIR . 'build/editor.css' )
		);

		wp_enqueue_style( 'dashicons' );
	}
);

/**
 * Enqueue frontend styles.
 */
add_action(
	'wp_enqueue_scripts',
	function () {
		wp_enqueue_style(
			'iconify-button-style',
			ICONIFY_BUTTON_URL . 'build/style.css',
			array(),
			filemtime( ICONIFY_BUTTON_DIR . 'build/style.css' )
		);

		wp_enqueue_style( 'dashicons' );
	}
);

/**
 * Load and cache custom SVG icons from the plugin's /icons directory.
 *
 * @return array slug => sanitized inline SVG markup
 */
function iconify_button_load_custom_svgs() {
	static $cache = null;
	if ( null !== $cache ) {
		return $cache;
	}

	$dir = trailingslashit( ICONIFY_BUTTON_DIR ) . 'icons';
	if ( ! is_dir( $dir ) ) {
		$cache = array();
		return $cache;
	}

	$files = glob( $dir . '/*.svg' );
	$map   = array();

	foreach ( $files as $file ) {
		$slug = strtolower( preg_replace( '/[^a-z0-9\-]+/i', '-', basename( $file, '.svg' ) ) );
		$slug = preg_replace( '/-+/', '-', $slug );
		if ( '' === $slug ) {
			continue;
		}
		$svg = @file_get_contents( $file );
		if ( false === $svg ) {
			continue;
		}
		$map[ $slug ] = iconify_button_sanitize_inline_svg( $svg );
	}

	$cache = $map;
	return $cache;
}

/**
 * Minimal sanitization for inline SVG.
 * - removes <script>...</script>
 * - strips on* event attributes
 * - strips javascript: xlink:href
 *
 * @param string $svg Raw SVG markup.
 * @return string Sanitized SVG markup.
 */
function iconify_button_sanitize_inline_svg( $svg ) {
	$svg = preg_replace( '#<script\b[^>]*>.*?</script>#is', '', $svg );
	$svg = preg_replace( '/\s+on[a-z]+="[^"]*"/i', '', $svg );
	$svg = preg_replace( "/\s+on[a-z]+='[^']*'/i", '', $svg );
	$svg = preg_replace( '/xlink:href="javascript:[^"]*"/i', '', $svg );
	$svg = preg_replace( '/>\s+</', '><', $svg );
	return trim( $svg );
}

/**
 * Add (if needed) a CSS class to an opening tag string.
 *
 * @param string $tag_open Opening tag string (e.g., '<a ...>').
 * @param string $class_to_add Class name to ensure.
 * @return string
 */
function iconify_button_ensure_class( $tag_open, $class_to_add ) {
	if ( preg_match( '/\bclass=("|\')(.*?)\1/i', $tag_open, $m ) ) {
		if ( preg_match( '/\b' . preg_quote( $class_to_add, '/' ) . '\b/', $m[2] ) ) {
			return $tag_open;
		}
		return preg_replace(
			'/\bclass=("|\')(.*?)\1/i',
			'class="$2 ' . esc_attr( $class_to_add ) . '"',
			$tag_open
		);
	}
	return preg_replace( '/>$/', ' class="' . esc_attr( $class_to_add ) . '">', $tag_open, 1 );
}

/**
 * Merge inline style declarations into a tag's style attribute.
 *
 * @param string               $tag_open Opening tag string.
 * @param array<string,string> $styles key => value (e.g. ['gap' => '8px']).
 * @return string
 */
function iconify_button_merge_inline_style( $tag_open, array $styles ) {
	$current = array();

	if ( preg_match( '/\bstyle=("|\')(.*?)\1/i', $tag_open, $m ) ) {
		foreach ( explode( ';', $m[2] ) as $decl ) {
			$decl = trim( $decl );
			if ( '' === $decl ) {
				continue; }
			$parts = explode( ':', $decl, 2 );
			if ( 2 === count( $parts ) ) {
				$current[ strtolower( trim( $parts[0] ) ) ] = trim( $parts[1] );
			}
		}
	}

	foreach ( $styles as $k => $v ) {
		$current[ strtolower( $k ) ] = $v;
	}

	$style_str = '';
	foreach ( $current as $k => $v ) {
		$style_str .= $k . ':' . $v . ';';
	}

	if ( preg_match( '/\bstyle=("|\')(.*?)\1/i', $tag_open ) ) {
		return preg_replace(
			'/\bstyle=("|\')(.*?)\1/i',
			'style="' . esc_attr( $style_str ) . '"',
			$tag_open
		);
	}
	return preg_replace( '/>$/', ' style="' . esc_attr( $style_str ) . '">', $tag_open, 1 );
}

/**
 * Render icons on the frontend by injecting a <span> with inline SVG.
 *
 * Behaviour:
 * - Reads selected icon slug from block attributes (icon, iconPosition, iconGap).
 * - Loads available SVGs from /icons (sanitized).
 * - Injects icon before or after the button text.
 * - Works with <a> and <div class="wp-block-button__link"> structures.
 *
 * @param string $block_content Rendered HTML of the block.
 * @param array  $block Parsed block, as passed by 'render_block' filter.
 * @return string Possibly-modified HTML.
 */
function iconify_button_render_core_button_with_icon( $block_content, $block ) {
	if ( ( $block['blockName'] ?? '' ) !== 'core/button' ) {
		return $block_content;
	}

	$attrs = $block['attrs'] ?? array();
	$icon  = isset( $attrs['icon'] ) ? (string) $attrs['icon'] : '';
	if ( '' === $icon ) {
		return $block_content;
	}

	$position = ( isset( $attrs['iconPosition'] ) && 'right' === $attrs['iconPosition'] ) ? 'right' : 'left';
	$gap_px   = isset( $attrs['iconGap'] ) ? max( 0, (int) $attrs['iconGap'] ) : 8;

	$icons = iconify_button_load_custom_svgs();
	if ( empty( $icons[ $icon ] ) ) {
		// Unknown slug – do not alter output.
		return $block_content;
	}

	$svg       = $icons[ $icon ];
	$span_icon = '<span class="iconify-button__icon" aria-hidden="true">' . $svg . '</span>';

	/**
	 * Find the link element produced by core/button.
	 * It can be <a class="wp-block-button__link ...">…</a>
	 * or <div class="wp-block-button__link ...">…</div> in some editor views.
	 */
	$pattern = '#(<(?:a|div)\b[^>]*\bwp-block-button__link\b[^>]*>)(.*?)(</(?:a|div)>)#si';
	if ( ! preg_match( $pattern, $block_content, $m ) ) {
		return $block_content;
	}

	$open  = $m[1];
	$inner = $m[2];
	$close = $m[3];

	// Add classes and styles to the link open tag.
	$open = iconify_button_ensure_class( $open, 'has-iconify' );
	$open = iconify_button_ensure_class( $open, ( 'left' === $position ) ? 'has-iconify--left' : 'has-iconify--right' );
	$open = iconify_button_merge_inline_style(
		$open,
		array(
			'gap' => $gap_px . 'px',
		)
	);

	// Insert icon before or after the inner content.
	$new_inner = ( 'left' === $position ) ? ( $span_icon . ' ' . $inner ) : ( $inner . ' ' . $span_icon );

	// Replace only the first match for this block.
	return preg_replace( $pattern, addcslashes( $open . $new_inner . $close, '\\$' ), $block_content, 1 );
}
add_filter( 'render_block', 'iconify_button_render_core_button_with_icon', 10, 2 );