Adding default border radius to a block style?

  • {
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "my-blocks/link-wrapper",
	"version": "0.1.0",
	"title": "Link wrapper",
	"category": "design",
	"icon": "admin-links",
	"description": "Wraps any block into a link block.",
	"example": {},
	"supports": {
		"html": false,
		"__experimentalBorder": {
			"color": false,
			"radius": true,
			"style": false,
			"width": false,
			"__experimentalDefaultControls": {
				"color": false,
				"radius": true,
				"style": false,
				"width": false
			}
		}
	},
	"textdomain": "my-blocks",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css",
	"viewScript": "file:./view.js",
	"attributes": {
		"link": {
			"type": "string",
			"default": ""
		},
		"style": {
			"type": "object",
			"default": {
				"__experimentalBorder": {
					"radius": "2.5rem",
					"__experimentalDefaultControls": {
						"radius": "2.5rem"
					}
				}
			}
		}
	}
}

    I have a code like this in my block.json. Why is my default style not applicable to the block?

Viewing 1 replies (of 1 total)

  • Chat GPT

    It seems like the issue might be related to the way you are trying to apply the default styles in your block. Let’s go through the code and see if we can identify any potential problems:

    1. The supports property doesn’t directly affect the default styles. It is used to declare features that the block supports but doesn’t define default styles.
    2. In the attributes section, you have defined a default style for the “style” attribute, which includes an “__experimentalBorder” property. However, the block itself needs to apply these styles, and it looks like you might be missing the logic to do so.
    3. You should check your view.js or other relevant scripts to ensure that you are applying the styles correctly. The default styles from the attributes section need to be applied in the block rendering logic.

    Here is a simplified example of how you might apply styles in your block rendering logic using React and the WordPress block editor:

    // In your view.js or block editor script

const MyBlock = ({ attributes }) => {
  const { link, style } = attributes;

  const blockStyle = {
    // Apply the default styles
    ...style,

    // Add additional styles or override default styles if needed
    // For example, you can add the link styles here
    textDecoration: 'none',
    color: '#000',
  };

  return (
    <a href={link} style={blockStyle}>
      {/* Your block content goes here */}
      {/* This will wrap any block into a link block */}
    </a>
  );
};

// Register the block
registerBlockType('my-blocks/link-wrapper', {
  // other properties...

  edit: MyBlock, // Use MyBlock as the editor component
  save: MyBlock, // Use MyBlock as the saved component
});
Viewing 1 replies (of 1 total)
  • The topic ‘Adding default border radius to a block style?’ is closed to new replies.