Support

Account

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.

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

You must be logged in to reply to this topic.