Вопрос или проблема
У меня проблемы с установкой свойства blockGap или blockSpacing для моего core/columns блока, который я использую для шаблона внутреннего блока.
Вот мой JSON ниже. Всё работает, как ожидалось, однако свойство blockGap для части core/columns не функционирует. Я пробую как свойство “spacing” -> “blockGap”, так и просто свойство “blockGap”. Должен ли я определять другое свойство или это пока что невозможно для блока?
[
["core/columns",
{
"spacing":
{
"blockGap": "0px"
},
"blockGap": "0px"
},
[
["core/column",
{
"width": "50%",
"className": "main-block"
},
[
["core/heading",
{
"level": 1,
"content": "Заголовок здесь"
}],
["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": "Вторичный заголовок",
"textColor": "white"
}]
]
]
]
]
]
]
]
Этот пример отлично работает для меня…
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': 'Добавьте заголовок H2...', 'level': 2 }
],
[
'core/paragraph',
{ 'placeholder': 'Добавьте текст абзаца...' }
],
[
'core/gallery'
]
],
]
]
]
];
Ответ или решение
Для решения проблемы установки свойств blockGap или blockSpacing для блока core/columns в шаблоне innerblocks, давайте проанализируем ваш JSON-код и предоставим рекомендации для корректной настройки этих параметров.
Проблема с Настройкой blockGap
Вы упомянули, что ожидаете, что свойства blockGap и blockSpacing будут функционировать должным образом, однако это не наблюдается в вашем проекте. Ваша JSON-структура показала, что вы пытались задать как spacing -> blockGap, так и blockGap напрямую, но это не привело к желаемому результату.
Правильная Структура JSON
Для того чтобы blockGap работал корректно, необходимо убедиться, что вы используете правильную структуру и параметры. Пример вашей JSON-структуры:
[
["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..."
}]
]
],
["core/column",
{
"className": "secondary-block"
},
[
["core/cover", [],
[
["core/heading",
{
"level": 3,
"content": "A Secondary Heading",
"textColor": "white"
}]
]
]
]
]
]
]
]Ваша проблема может быть связана с определением blockGap. На данный момент свойство blockGap должно определяться только внутри объекта spacing. Следовательно, структура может выглядеть следующим образом:
[
["core/columns",
{
"spacing": {
"blockGap": "0px" // Используйте только это свойство для задание промежутка
}
},
[ /* колонки и блоки */ ]
]
]Ожидаемое Поведение
Обратите внимание, что если вы установили blockGap в "0px", то ваши колонки не будут иметь промежутка между собой. Если вы хотите создать промежуток, попробуйте установить значение, например, "20px" или другое, в зависимости от ваших требований по дизайну.
Проверка Версии и Совместимости
Также важно убедиться, что версия WordPress, которую вы используете, поддерживает эти свойства. blockGap и blockSpacing могут не работать в более ранних версиях. Убедитесь, что вы используете актуальную версию плагинов и ядра WordPress, которые поддерживают внутренние блоки и настройки расстояний.
Рекомендуемое Решение
Если вышеизложенные рекомендации не помогают, рассмотрите возможность:
- Проверки кэша: иногда изменения могут не отображаться из-за кэширования. Очистите кэш и проверьте результаты снова.
- Просмотра документации: ознакомьтесь с документацией WordPress по блокам, чтобы удостовериться в актуальности используемых свойств.
Заключение
Проблема с настройкой блока gap заключается в его правильной структуре и свойствах. Следуя предложенным рекомендациям и убедившись в правильности ваших настроек, вы сможете создать внешний вид, соответствующий вашим требованиям. Если у вас есть дополнительные вопросы, пожалуйста, не стесняйтесь задать их!