Edit и Save - Wordpress Gutenberg - новости, руководства, оптимизация WordPress

При регистрации блока, то editи saveфункции обеспечивают интерфейс для того, как блок будет вынесен в редакторе, как он будет работать и манипулировать, и как она будет сохранена.

Редактировать

editФункция описывает структуру вашего блока в контексте редактора. Это представляет то, что редактор будет отображать при использовании блока.

// Defining the edit interface
edit() {
    return <hr />;
}

Функция получает следующие свойства через аргумент объекта:

атрибуты

Это свойство отображает все доступные атрибуты и их соответствующие значения, как описано в attributesсвойстве при регистрации типа блока. В этом случае, если мы определили атрибут contentпри регистрации блока, мы получим и используем это значение в нашей функции редактирования:

// Defining the edit interface
edit( { attributes } ) {
    return <div>{ attributes.content }</div>;
}

Значение attributes.contentбудет отображаться внутри divпри вставке блока в редакторе.

className

Это свойство возвращает имя класса для элемента оболочки. Это автоматически добавляется в saveметод, но не включается edit, поскольку корневой элемент может не соответствовать тому, что визуально является основным элементом блока. Вы можете запросить его, чтобы добавить его к правильному элементу в вашей функции.

// Defining the edit interface
edit( { attributes, className } ) {
    return <div className={ className }>{ attributes.content }</div>;
}

isSelected

Свойство isSelected — это объект, который сообщает, выбран ли блок в данный момент.

// Defining the edit interface
edit( { attributes, className, isSelected } ) {
    return (
        <div className={ className }>
            { attributes.content }
            { isSelected &&
                <span>Shows only when the block is selected.</span>
            }
        </div>
    );
}

setAttributes

Эта функция позволяет блоку обновлять отдельные атрибуты на основе взаимодействия с пользователем.

// Defining the edit interface
edit( { attributes, setAttributes, className, isSelected } ) {
    // Simplify access to attributes
    const { content, mySetting } = attributes;

    // Toggle a setting when the user clicks the button
    const toggleSetting = () => setAttributes( { mySetting: ! mySetting } );
    return (
        <div className={ className }>
            { content }
            { isSelected &&
                <button onClick={ toggleSetting }>Toggle setting</button>
            }
        </div>
    );
}

При использовании атрибутов, которые являются объектами или массивами, рекомендуется скопировать или клонировать атрибут перед его обновлением:

// Good - here a new array is created from the old list attribute and a new list item:
const { list } = attributes;
const addListItem = ( newListItem ) => setAttributes( { list: [ ...list, newListItem ] } );

// Bad - here the list from the existing attribute is modified directly to add the new list item:
const { list } = attributes;
const addListItem = ( newListItem ) => {
    list.push( newListItem );
    setAttributes( { list } );
};

Зачем это делать? В JavaScript массивы и объекты передаются по ссылке, поэтому эта практика гарантирует, что изменения не затронут другой код, который может содержать ссылки на те же данные. Кроме того, Гутенберг следует философии библиотеки Redux, согласно которой состояние должно быть неизменным — данные не должны изменяться напрямую, а должна создаваться новая версия данных, содержащая изменения

Сохранить

saveФункция определяет способ , в котором различные атрибуты должны быть объединены в окончательные разметки, который затем сериализации Гутенберга в post_content.ES5ESNext

save() {
    return wp.element.createElement( 'hr' );
}

Для большинства блоков возвращаемое значение saveдолжно быть экземпляром WordPress Element, представляющим, как блок должен отображаться в передней части сайта.

Примечание. Хотя можно вернуть строковое значение из него save, оно будет экранировано . Если строка содержит разметку HTML, разметка будет отображаться в передней части дословно, а не как эквивалентное содержимое узла HTML. Если вы должны вернуть необработанный HTML-код save, используйте wp.element.RawHTML. Как следует из названия, это склонно к межсайтовому скриптингу и поэтому не рекомендуется в пользу иерархии элементов WordPress, когда это возможно.

Для динамических блоков возвращаемое значение saveможет представлять кэшированную копию содержимого блока, которая будет показана только в том случае, если плагин, реализующий блок, когда-либо отключен. В качестве альтернативы можно вернуть null(пустое) значение, чтобы не сохранять разметку в содержимом публикации для динамического блока, вместо этого откладывая это вычисление всегда, когда блок отображается в передней части сайта.

атрибуты

Как и в случае edit, saveфункция также получает аргумент объекта, включая атрибуты, которые могут быть вставлены в разметку.ES5ESNext

save( props ) {
    return wp.element.createElement(
        'div',
        null,
        props.attributes.content
    );
}

Проверка

Когда редактор загружается, все блоки в содержимом публикации проверяются, чтобы определить их точность для защиты от потери содержимого. Это тесно связано с сохранением реализации блока, поскольку пользователь может непреднамеренно удалить или изменить свое содержимое, если редактор не может правильно восстановить блок. Во время инициализации редактора сохраненная разметка для каждого блока регенерируется с использованием атрибутов, которые были проанализированы из содержимого публикации. Если вновь созданная разметка не соответствует тому, что уже было сохранено в содержимом публикации, блок помечается как недействительный. Это связано с тем, что мы предполагаем, что если пользователь не вносит изменения, разметка должна оставаться идентичной сохраненному содержимому.

Если блок будет признан недействительным, пользователю будет предложено выбрать способ обработки недействительности:

Перезаписать : игнорирует предупреждение и обрабатывает вновь созданную разметку как правильную. Как отмечено в описанном выше поведении, это может привести к потере содержимого, поскольку оно будет перезаписывать разметку, сохраненную в содержимом публикации.
Преобразовать в классический формат: защищает исходную разметку от сохраненного содержимого публикации как правильную. Поскольку блок будет преобразован из его исходного типа в тип классического блока, больше не будет возможности редактировать содержимое, используя элементы управления, доступные для исходного типа блока.
Редактировать как блок HTML : аналогично преобразованию в классический , это защитит исходную разметку от сохраненного содержимого публикации и преобразует блок из исходного типа в тип блока HTML, позволяя пользователю напрямую изменять разметку HTML.

FAQ по валидации

Как блоки становятся недействительными?

Два наиболее распространенных источника недействительности блоков:

Ошибка в коде блока может привести к непреднамеренным изменениям содержимого. Смотрите вопрос ниже о том, как отлаживать аннулирование блока как автора плагина.
Вы или внешний редактор изменили HTML-разметку блока таким образом, что он больше не считается правильным.

Я автор плагина. Что я должен сделать, чтобы отладить, почему мои блоки помечены как недействительные?

Перед началом отладки обязательно ознакомьтесь с описанным выше этапом проверки, документирующим процесс обнаружения недействительного блока. Блок недействителен, если его регенерированная разметка не соответствует тому, что сохранено в содержимом публикации, поэтому часто это может быть вызвано неправильным анализом атрибутов блока из сохраненного содержимого.

Если вы используете источники атрибутов , убедитесь, что атрибуты, полученные из разметки, сохраняются точно так, как вы ожидаете, и в правильном типе (обычно a 'string'или 'number').

Когда блок обнаружен как недействительный, предупреждение будет зарегистрировано в консоли инструментов разработчика вашего браузера. Предупреждение будет содержать конкретные сведения о точном месте, в котором произошла разница в разметке. Обязательно внимательно посмотрите на любые различия в ожидаемых и фактических наценках, чтобы увидеть, где возникают проблемы.

Я изменил saveповедение своего блока, и старый контент теперь содержит недопустимые блоки. Как я могу это исправить?

Обратитесь к руководству по устаревшим блокам, чтобы узнать больше о том, как приспособить устаревший контент к преднамеренным изменениям разметки.