Block.json default attributes

• 

  • JollyRoger

  • October 12, 2022 at 10:14 pm

  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"
              }
          }
      }
  }
• 

  • JohnnyComeLately

  • October 12, 2022 at 10:46 pm

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

  • kasbrahan

  • October 15, 2022 at 4:21 pm

  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?
• 

  • JollyRoger

  • October 18, 2022 at 7:11 am

  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.
• 

  • madtownlems

  • April 12, 2024 at 12:22 pm

  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
• 

  • JollyRoger

  • April 14, 2024 at 8:30 pm

  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.