updated plugin to integrate with icon block plugin

[colinduwe]

Thanks for the Icon Block and this plugin. They've both been very useful for me. I wanted to make the editing experience a little more consistent for my users so I copied some of the guts from the Icon Block into this plugin. With these changes, users add icons in the toolbar

And it's the same set of icons as The Icon Block. It uses the same filter to pull in 3rd-party icons provided by themes or plugins too so users always get the same set of icons

Thanks again!

[bmx269]

This is awesome functionality, just needs some conflicts fixed.

[culturerich]

This would be incredibly powerful if fixed & merged...

[colinduwe]

@ndiego what are your thoughts on merging this into your project? I’d be happy to put some more effort into it if there’s interest.

[eduwass]

Hey @colinduwe! 👋

Thanks so much for this integration work, I tested it and it works great!

I did find a small issue with stroke-based icons (e.g., Lucide): some appeared filled on the frontend. That’s because hasNoIconFill wasn’t fully wired through.

Fix Details

Register hasNoIconFill in src/index.js:

hasNoIconFill: { type: 'boolean', default: false }

Read it in enable-button-icons.php and add the class:

$hasNoIconFill = isset( $block['attrs']['hasNoIconFill'] ) ? $block['attrs']['hasNoIconFill'] : false;
if ( $hasNoIconFill ) { $icon_color_class .= ' has-no-icon-fill'; }

Style it in src/index.scss:

span.has-no-icon-fill svg { fill: none; stroke: currentColor; }

Robust fallbacks (so existing content works without re-saving):

PHP: auto-detect stroke-only SVGs and add the class if fill="none" is present:

if ( ! $hasNoIconFill && is_string( $icon ) && strpos( $icon, 'fill="none"' ) !== false ) {
  $hasNoIconFill = true;
}

CSS: also handle SVGs with fill="none" directly:

.wp-block-button__link svg[fill="none"] { fill: none; stroke: currentColor; }

With these, stroke icons render correctly on both editor and frontend. Would love to see this merged! 🙌

[bmx269]

The fork is great, but loses some features, like padding for example. The buttons no longer have padding available.

[ajoah]

@colinduwe for the padding issue , maybe the build is not up to date because i see spacing:{blockGap:!0} in the builded index.js but not in src/index.js

Builded :

(0, l.addFilter) (
          'blocks.registerBlockType',
          'enable-button-icons/add-attributes',
          (
            function (e) {
              return 'core/button' !== e.name ? e : {
                ...e,
                attributes: {
                  ...e.attributes,
                  icon: {
                    type: 'string'
                  },
                  iconPositionLeft: {
                    type: 'boolean',
                  default:
                    !1
                  },
                  iconName: {
                    type: 'string'
                  },
                  iconColor: {
                    type: 'string'
                  },
                  customIconColor: {
                    type: 'string'
                  }
                },
                supports: {
                  ...e.supports,
                  spacing: {
                    blockGap: !0
                  }
                }
              }
            }
          )
        );

Source

function addAttributes( settings ) {
	if ( 'core/button' !== settings.name ) {
		return settings;
	}


	// Add the icon attributes.
	const iconAttributes = {
		icon: {
			//string of icon svg (custom, media library)
			type: 'string',
		},
		iconPositionLeft: {
			type: 'boolean',
			default: false,
		},
		iconName: {
			//name prop of icon (WordPress icon library, etc)
			type: 'string',
		},
		iconColor: {
			type: 'string'
		},
		customIconColor: {
			type: 'string'
		}
	};

	const newSettings = {
		...settings,
		attributes: {
			...settings.attributes,
			...iconAttributes,
		},
	};

	return newSettings;
}

It would be really cool if this PR was merged