Support

Account

Register Login

Home › Forums › General Issues › Block.json default attributes

Solving

Block.json default attributes

  • When setting the default attributes in block.json, how can we set a default link color, default padding, etc?

    I managed to set default align, alignText, backgroundColor and textColor… but the same format doesn’t work for links:

    {
    "name": "test-block",
    "title": "Test Block",
    "style": "file:./test-block.css",
    "category": "custom",
    "icon": "carrot",
    "apiVersion": 2,
    "acf": {
        "mode": "preview",
        "renderTemplate": "test-block.php",
        "postTypes": [ "post" ]
    },
    "supports": {
        "align": true,
        "anchor": true,
        "alignContent": false,
        "color": {
            "text": true,
            "background": true,
            "link": true,
            "gradients": true
        },
        "alignText": true,
        "spacing": {
            "margin": [
                "top",
                "bottom"
            ],
            "padding": true
        },
        "typography": {
            "fontSize": true
        }
    },
    "attributes": {
        "backgroundColor": {
            "type": "string",
            "default": "black"
        },
        "textColor": {
            "type": "string",
            "default": "white"
        },
        "linkColor": {
            "type": "string",
            "default": "yellow"
        },
        "align": {
            "type": "string",
            "default": "wide"
        },
        "alignText": {
            "type": "string",
            "default": "center"
        }
    }
}

    I tried adding this to the attributes but it doesn’t work for padding:

    "spacing": {
	"padding": {
		"top": "3rem"
	}
}

    And I also tried adding the link colour to attributes like this, which also didn’t work:

    "style": {
    "elements": {
        "link": {
            "color": {
                "type": "string",
                "color": "yellow"
            }
        }
    }
}

  • I’d also be interested to see how this works.

  • It sounds like you might have some CSS overriding the textColor. I don’t see anywhere in the Gutenberg docs that there should be a linkColor – blocks.json it meant to align ACF with WP standards. So links will follow textColor or what you’ve defined in the CSS.

    Any reason why you don’t just make a CSS definition of the link color in that block?

  • All good.

    A default link colour can be defined in block.json under attributes like this:

    "style": {
	"type": "object",
	"default": {
		"elements": {
			"link": {
				"color": {
					"text": "var:preset|color|blue"
				}
			}
		}
	}
},

    Seems to follow a different format to textColor and backgroundColor.

  • When I use the approach above, it LOOKS like things are working in the editor, but if you publish the page and view it, none of the default colors are applied. I put this document together to help illustrate and explain: https://docs.google.com/document/d/1VJmUCFFGRieIgkJ4Jj0PZiRefCrJQr2EUbBlzaBsPb0/edit

  • Yes, assigning defaults via block.json under attributes, as the WordPress documentation describes, is not reliable at all.

    I really wish ACF would do more to explain what is supported and what isn’t.

    I have resorted to using block variations to assign default attributes to my ACF blocks, because specifying them in block.json is useless:

    wp.domReady(function () {

// USE BLOCK VARIATIONS TO ASSIGN DEFAULTS TO ACF BLOCKS

            wp.blocks.registerBlockVariation(
                'acf/map', [{
                    isDefault: true,
                    attributes: {
                        style: {
                            dimensions: {
								minHeight: '450px',
                            },
                        },
                    }
                }]
            );
});

    I place this in a .js file, then add this to functions:



    add_action('enqueue_block_editor_assets', 'block_modifications');
function block_modifications()
{
    wp_enqueue_script('block-modifications', get_template_directory_uri() . '/assets/js/block-modifications.js', array(
        'wp-blocks',
        'wp-dom-ready',
        'wp-edit-post'
    ), filemtime(get_template_directory() . '/assets/js/block-modifications.js'), true);
}

    There is probably a less hacky way of doing this. It would be so much simpler if we could just set the defaults inside the block’s json file in the way the official WP docs describe.

  • The document from @madtownlems is important because it clearly presents the problems here. When will it be updated? It is essential for building effective ACF blocks.

  • Thanks for the reminder, @webwrotter – I probably should have reported back earlier. I’ve actually been talking to ACF devs about this, who have been fantastic at researching and chatting about it. (Mad props to Liam G, especially.)

    It turns out that ACF is behaving exactly like native WordPress core blocks do at the moment. While I don’t love how core handles it, I wouldn’t expect ACF to do things any differently.

    This issue covers most of it: https://github.com/WordPress/gutenberg/issues/7342

    But basically, WP core sees default values to be used at runtime, rather than when the block is inserted. Feel free to voice your opinion for change in the Github issue along with mine and some others

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.