Support » Developing with WordPress » Default paragraph alignment with theme.json

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hi @ianatkins

    It is possible to set a default paragraph alignment in WordPress using the theme.json file. The core/paragraph block in the Gutenberg editor uses the align attribute to set the alignment of the text within the block. This attribute is default set to none, meaning no alignment is applied.

    You can override the default value for the align attribute by defining it in your theme.json file. However, it would be best if you did this in the block’s attributes object, not in the styles or settings object. Additionally, make sure that your theme.json is correctly formatted JSON.

    For example, the following code will set the default alignment for all core/paragraph blocks to center in your theme:

    "core/paragraph": {
        "attributes": {
            "align": {
                "type": "string",
                "default": "center"
            }
        }
    }

    Please ensure that you also include the theme.json file in your theme. It is important to note that this setting only affects new core/paragraph blocks added to the post or page after the theme is activated.

    ⚠️ Any existing core/paragraph blocks will not be affected by this setting. ⚠️

    Thread Starter ianatkins

    (@ianatkins)

    @faisalahammad Thanks for the detailed reply.

    Have updated and that doesn’t work either. Have tried in both the style and settings top level nodes.

    Here’s what I’ve got in a reduced test case:

    {
    	"version": 2,
    	"settings": {
    		"appearanceTools": false,
    		"blocks": {
    			"core/paragraph": {
    				"attributes": {
    					"align": {
    						"type": "string",
    						"default": "center"
    					}
    				},
    				"color" : {
    					"background" : false,
    					"text" : false
    				} 
    			}
    		}
    	},
    	"styles": {
    		"blocks": {
    			"core/paragraph" : {
    				"attributes": {
    					"align": {
    						"type": "string",
    						"default": "center"
    					}
    				}
    			}
    		}
    	}
    }

    Hi @ianatkins
    It looks like you are on the right track, but there is a small mistake in your theme.json file.

    In your example, the attributes object for the “core/paragraph” block is nested inside the “settings” object and also inside the “styles” object. Still, it should only be defined once, either in the “settings” object or the “styles” object, not both.

    Try to move the attributes object out of the “styles” object and put it under the “settings” object only.

    {
        "version": 2,
        "settings": {
            "appearanceTools": false,
            "blocks": {
                "core/paragraph": {
                    "attributes": {
                        "align": {
                            "type": "string",
                            "default": "center"
                        }
                    },
                    "color": {
                        "background": false,
                        "text": false
                    }
                }
            }
        }
    }

    Also, ensure that your theme.json is in the root of the theme directory.

    Additionally, It’s worth noting that the theme.json file can only change the default values of attributes on blocks defined within the theme. Blocks defined by the core or other plugins are not affected by the theme.json file.

    Please let me know if this works for you or if you have any other issues or queries.

    Thread Starter ianatkins

    (@ianatkins)

    Thanks. That has no effect either, note I’m trying to apply this to core/paragraph block.

    I’m not sure you’re correct about theme.json not affecting core blocks, as I can turn off the colour and background colour options on the core paragraph block. Perhaps just align and/or attributes are not supported – can’t see either listed here:

    https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/

    • This reply was modified 2 months, 2 weeks ago by ianatkins.
    Thread Starter ianatkins

    (@ianatkins)

    Ok have it working, but via PHP filter ‘block_type_metadata’

    /**
     * Gutenberg : Edit block metadata
     */
    if ( ! function_exists( 'addedlovely_edit_block_metadata' ) ) {
    	function addedlovely_edit_block_metadata($metadata) {
    		// Center core/paragraph
    		if ($metadata['name'] == 'core/paragraph') {
    			$metadata['attributes']['align']['default'] = 'center';
    		}		
    		return $metadata;
    	}
    }		
    add_filter('block_type_metadata', 'addedlovely_edit_block_metadata', 10, 2);

    Would be great if someone can confirm if this should be possible via theme.json

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.