Support

Account

Home Forums Bug Reports Register block type SVG icon not displayed

Solving

Register block type SVG icon not displayed

    • cr0ybot

    • March 26, 2020 at 2:20 am

    There was already an issue opened regarding this, but it was marked as resolved thanks to a community member providing a temporary plugin fix. See https://support.advancedcustomfields.com/forums/topic/gutenberg-block-custom-svg-icon-not-displaying/

    However, the issue still remains that adding an icon with an SVG string in acf_register_block_type() does not display the icon in the editor.

    User philf described the issue & solution:

    The issue is that the Gutenberg Block (essentially) accepts two types of inputs, 1) a string or 2) a JavaScript Object (in the form of a React element/component/fragment), see: https://wordpress.org/gutenberg/handbook/designers-developers/developers/components/icon/ . So if you pass svg code in the form of a string, like the documentation suggests, then WordPress thinks it’s a Dashicon. WordPress will then look for it in the components.js, but won’t find it, and return null. That null translates to no icon showing up. So what I did was check to see if the icon (or icon[‘src’]) starts with “<svg”, if so, then have PHP convert it to arbitrary JSON. Then have JavaScript hook into the acf ‘ready’ action, take that arbitrary JSON and convert it to a React element, and Voila! the svg icon is rendered. If the icon doesn’t start with “<svg”, then it just passes through with as normal.

    See their plugin for a fix: https://github.com/pfaciana/acf-block-icon

    • cr0ybot

    • March 27, 2020 at 2:34 am

    Just a small update, the acf-block-icon plugin is not actually working for me.

    I did a little digging into the ACF code and it looks like a string starting with <svg is being detected, but only for the icon property and not if you’ve set the icon via icon['src']. I was setting my icon like this because I want to have a custom foreground color:

    
    acf_register_block_type( array(
        // ...
        'icon' => array(
            'foreground' => '#7bb12d',
            'src' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0,0H24V24H0Z" fill="none"/><polygon points="20 18 4 18 4 20 20 20 20 18"/><path d="M22,3H2A1,1,0,0,0,1,4V15a1,1,0,0,0,1,1H22a1,1,0,0,0,1-1V4A1,1,0,0,0,22,3ZM21,5V9.92l-3.38-2.7a1,1,0,0,0-1.24,0L12,10.74,8.6,8.2a1,1,0,0,0-1.15,0L3,11.13V5ZM3,14v-.46l5-3.32L11.4,12.8a1,1,0,0,0,1.22,0L17,9.28l4,3.2V14Z"/></svg>',
    ),
    

    I’m looking to see if I can add a filter via JS on blocks.registerBlockType to handle the icon with foreground color for the time being.

    • cr0ybot

    • March 27, 2020 at 2:47 am

    I’ve successfully filtered the block registration to include the SVG icon with custom foreground color. Note that I had to bump up the priority of the enqueue action to 9 in order for the filter to apply; maybe there is a better way of doing it. Also note that the SVG element is not a string; you’ll need to have a workflow set up like what wp-scripts provides.

    The code below is within a custom plugin.

    acf-filter.js

    
    const { addFilter } = wp.hooks;
    
    /**
     * ACF Custom SVG Icon filter
     *
     * ACF detects an SVG string for icon but not icon['src']
     */
    addFilter(
    	'blocks.registerBlockType',
    	'cr0ybot/acf-block-icons',
    	( settings, name ) => {
    		if ( name === 'acf/my-block' ) {
    			settings.icon = {
    				foreground: '#7bb12d',
    				src: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0,0H24V24H0Z" fill="none"/><polygon points="20 18 4 18 4 20 20 20 20 18"/><path d="M22,3H2A1,1,0,0,0,1,4V15a1,1,0,0,0,1,1H22a1,1,0,0,0,1-1V4A1,1,0,0,0,22,3ZM21,5V9.92l-3.38-2.7a1,1,0,0,0-1.24,0L12,10.74,8.6,8.2a1,1,0,0,0-1.15,0L3,11.13V5ZM3,14v-.46l5-3.32L11.4,12.8a1,1,0,0,0,1.22,0L17,9.28l4,3.2V14Z"/></svg>,
    			};
    		}
    
    		return settings;
    	}
    );
    

    plugin.php

    
    function cr0ybot_block_editor_enqueue_assets() {
    	wp_enqueue_script(
    		'cr0ybot-block-filter',
    		plugins_url( '/acf-filter.js', __FILE__ ),
    	);
    }
    add_action( 'enqueue_block_editor_assets', 'cr0ybot_block_editor_enqueue_assets', 9 );
    
    
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.