Добавить поле с флажком в core/embed

Вопрос или проблема

wp.hooks.addFilter(
    'blocks.registerBlockType',  // Фильтр для модификации регистрации блока
    'misha/oembed',               // Уникальное имя для этого изменения
    (settings, name) => {
        // Проверяем, если имя блока 'core/embed'
        if ('core/embed' === name) {
            
            // Добавляем пользовательский атрибут 'custom_text_field'
            return lodash.assign({}, settings, {
                attributes: lodash.assign({}, settings.attributes, {
                    custom_text_field: {
                        type: 'string', // Тип атрибута (строка)
                        default: '',    // Значение по умолчанию для текстового поля (пустая строка)
                    }
                })
            });
        }
        
        // Возвращаем настройки без изменений, если это не 'core/embed'
        return settings;
    }
);

Ответ или решение

Чтобы добавить поле с флажком в компонент core/embed в редакторе блоков WordPress, необходимо корректно использовать хук, который позволяет модифицировать регистрацию блоков. Вы уже начали с правильного подхода, однако добавление поля с флажком требует немного другой логики и синтаксиса.

Шаги для добавления поля с флажком:

1. Использование wp.hooks.addFilter: Вы правильно начали с добавления фильтра для изменения блока core/embed. Убедитесь, что вы правильно создаете новый атрибут для поля с флажком.

2. Создание поля для флажка: Чтобы добавить поле с флажком, вам нужно изменить тип атрибута на boolean и задать значение по умолчанию как false.

3. Добавление к метаданных блока: После успешного добавления поля необходимо будет также настроить отрисовку этого поля в редакторе, что предполагает модификацию UI.

Пример кода для добавления поля с флажком:

wp.hooks.addFilter(
    'blocks.registerBlockType',  // Хук для модификации регистрацию блока
    'yournamespace/oembed-custom-checkbox', // Уникальное имя вашего изменения
    (settings, name) => {
        // Проверяем, что имя блока - 'core/embed'
        if ('core/embed' === name) {
            // Добавляем пользовательское поле-чекбокс
            return lodash.assign({}, settings, {
                attributes: lodash.assign({}, settings.attributes, {
                    custom_checkbox_field: {
                        type: 'boolean', // Тип атрибута (логическое значение)
                        default: false,  // Значение по умолчанию (ложь)
                    }
                }),
                // Добавляем нужный JSON для управления атрибутами
                edit: (props) => {
                    const { attributes, setAttributes } = props;
                    return (
                        <Fragment>
                            <InspectorControls>
                                <PanelBody title={__('Настройки поля чека', 'text-domain')}>
                                    <CheckboxControl
                                        label={__('Включить опцию', 'text-domain')}
                                        checked={attributes.custom_checkbox_field}
                                        onChange={(value) => setAttributes({ custom_checkbox_field: value })}
                                    />
                                </PanelBody>
                            </InspectorControls>
                            {/* И тут ваш оригинальный рендеринг блока */}
                            {/* Вернуть оригинальный рендеринг блока */}
                        </Fragment>
                    );
                }
            });
        }

        // Возвращаем настройки без изменений, если это не 'core/embed'
        return settings;
    }
);

Объяснение кода:

• Сначала мы добавляем фильтр, который прослушивает регистрацию блока core/embed.
• Проверяем, соответствует ли текущее имя блока названию core/embed.
• Затем добавляем новый атрибут custom_checkbox_field, который определен как boolean с значением по умолчанию false.
• Далее добавляется пользовательский интерфейс через InspectorControls, чтобы отобразить контрол для флажка, используя компонент CheckboxControl.
• По изменению значения флажка вызывается setAttributes, которое обновляет состояние атрибута.

Заключение:

Следуя этим шагам, вы сможете успешно добавить поле с флажком в блок core/embed. Не забудьте протестировать ваше решение внутри редактора, чтобы убедиться, что все работает как задумано. Также рекомендуется обратить внимание на SEO аспекты, включая использование правильно структурированных заголовков и мета-тегов, чтобы повысить видимость вашего решения в поисковых системах.