4

I am having trouble setting the blockGap or blockSpacing property for my core/columns block which I am using for an Innerblock template.

This is my JSON below. Everything is working as expected, however, the blockGap property for the core/columns part is not working. I am trying both the "spacing" -> "blockGap" property as well as just the "blockGap" property. Should I be defining a different property or is this not yet possible for the block?

[
["core/columns",
    {
        "spacing":
        {
            "blockGap": "0px"
        },
        "blockGap": "0px"
    },
    [
        ["core/column",
            {
                "width": "50%",
                "className": "main-block"
            },
            [
                ["core/heading",
                {
                    "level": 1,
                    "content": "Title Goes Here"
                }],
                ["core/paragraph",
                {
                    "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                }]
            ]
        ],
        ["core/column",
            {
                "className": "secondary-block"
            },
            [
                ["core/cover", [],
                    [
                        ["core/heading",
                        {
                            "level": 3,
                            "content": "A Secondary Heading",
                            "textColor": "white"
                        }]
                    ]
                ]
            ]
        ]
    ]
]
]

1 Answer 1

0

This example works fine for me...

const TEMPLATE = [
['core/columns', {
    verticalAlignment: 'center',
    isStackedOnMobile: true,
    templateLock: 'all',
    width: '100%'
},
    [
        [
            'core/column',
            {
                verticalAlignment: 'top',
                isStackedOnMobile: false,
                templateLock: 'all',
                width: '66.66%'
            },
            [
                ['core/image']
            ]
        ],
        [
            'core/column',
            {
                verticalAlignment: 'top',
                isStackedOnMobile: false,
                templateLock: 'all',
                width: '33.33%'
            },
            [
                [
                    'core/heading',
                    { 'placeholder': 'Add H2 Title...', 'level': 2 }
                ],
                [
                    'core/paragraph',
                    { 'placeholder': 'Add paragraph text...' }
                ],
                [
                    'core/gallery'
                ]
            ],
        ]
    ]
]
];
2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.