Как импортировать/экспортировать блоки Gutenberg в WordPress

И снова я вас приветствую, друзья!

Сегодня я бы хотел рассказать интересную фишку, а именно: как импортировать/экспортировать блоки Gutenberg в WordPress. Почти все пользуются этим редактором, но не все знают что блоки можно переносить. Давайте восполним этот пробел в знаниях.

Как импортировать/экспортировать блоки Gutenberg в WordPress

Если вы читаете это, то вполне вероятно, что вы уже знаете о редакторе Гутенберга и о том, как он революционизировал процесс «закулисного» редактирования на всех веб-сайтах WordPress.

Причина, по которой я здесь сегодня, состоит в том, чтобы рассказать вам о довольно изящной особенности Гутенберга. Блоки контента, созданные на веб-сайте с использованием Gutenberg, могут быть импортированы и экспортированы на другой веб-сайт, который также должен быть построен на платформе WordPress. Анализируя возможности этой функциональности, я могу сказать, что это замечательная функция, которая может повысить производительность между сайтами.

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

Итак, давайте углубимся и я покажу, как легко импортировать или экспортировать блоки Гутенберга через веб-сайты WordPress.

Gutenberg Editor 101

Как вы уже знаете, Гутенберг является редактором WordPress на основе чистых блоков. Гутенберг начался с пятого обновления WordPress, и это изменило способ создания контента на веб-сайтах WordPress.

С Gutenberg каждый контент может быть вставлен в отдельный блок. Изображения, видео, баннеры, абзацы, галерея, кнопка, список, HTML и т. д. воплощаются в жизнь совершенно новым блоком. Эти блоки могут быть настроены по всей веб-странице в соответствии с пожеланиями создателя или клиента. И под регулировкой я не имею в виду только его размещение и выравнивание. Благодаря удивительным возможностям настройки вы также можете полностью контролировать его внешний вид.

Gutenberg Editor 101

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

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

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

Как экспортировать/импортировать блоки Гутенберга

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

Блоки редактирования не ограничиваются темой, которую он использует для общего восприятия сайта. Они могут быть перемещены среди других тем WordPress и переделаны под новый веб-сайт. Итак, давайте пройдемся по шагам, чтобы импортировать/экспортировать ваши блоки WordPress Gutenberg.

Шаг 1: Создание многоразового блока

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

Прежде всего, просто создайте новый блок, используя знак «+» слева от вас. Теперь выберите блок, добавьте к нему имя и сохраните его.

Создание многоразового блока

После этого вы можете настроить блок. После завершения настройки просто нажмите на 3 точки на панели инструментов и нажмите «Добавить в блоки многократного использования» в раскрывающемся списке. Это автоматически добавит ваш блок в группу многократно используемых блоков. Вы можете выбрать его в любое время и использовать в любом новом или старом посте, который вы создаете. Здесь показано, как это сделать.

Нажмите на 3 точки в правом верхнем углу панели инструментов. Выберите «Управление всеми повторно используемыми блоками» из выпадающего меню.

Где найти сохраненные блоки

Когда вы создаете блок, который можно использовать повторно, он автоматически сохраняется в вашем списке блоков многократного использования. Чтобы найти их, просто нажмите на знак «+», который вы используете для добавления нового блока. Теперь вы можете выбрать блок многократного использования, прокрутив вниз небольшое всплывающее окно или использовать поле поиска, чтобы найти его.

Вот два способа сделать это.

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

Шаг 2: Экспортируйте свои блоки Гутенберга

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

Экспортируйте свои блоки Гутенберга

Нажав на ссылку «Управление всеми повторно используемыми блоками», вы будете перенаправлены на страницу, показанную на снимке экрана ниже, со следующими параметрами — «Редактировать», «Корзина» и «Экспортировать как JSON».

Экспортировать как JSON

Теперь нажмите на опцию «Экспортировать как JSON». Это загрузит файл JSON вашего блока на ваш компьютер или ноутбук. Сохраните файл правильно. Вы можете использовать это на любом другом веб-сайте WordPress, которым вы управляете.

Шаг 3: Импортируйте блок Гутенберга

Перейдите на целевой веб-сайт WordPress, где вы хотите импортировать блоки Гутенберга, которые были загружены на ваш ноутбук/компьютер. Для этого перейдите на «Дисплей администрирования блока». Вы увидите кнопку «Импорт из JSON» в верхней части страницы отображения администрации блока.

Импортируйте блок Гутенберга

Нажмите на кнопку импорта, которая откроет всплывающее окно с кнопкой «Выбрать файл» с просьбой загрузить соответствующий файл. Загрузите файл JSON, который вы скачали с предыдущего сайта ранее. После завершения загрузки вы увидите кнопку «Импорт» в правом нижнем углу всплывающего диалогового окна. Нажмите на опцию импорта, чтобы продолжить.

Теперь WordPress автоматически загрузит файл для нового сайта. Чтобы проверить то же самое, обновите страницу после завершения процедуры загрузки. Затем вы сможете увидеть название блока, который вы загрузили (само имя, которое вы использовали, сохранив блок на первом веб-сайте).

Шаг 4: Доступ к блоку на новом сайте

На новом веб-сайте, когда вам нужно добавить блоки для редактирования, сначала вы должны выбрать «Добавить блок», перейти к «Повторное использование» и там вы сможете найти блок, который вы только что импортировали с предыдущего веб-сайта.

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

Важная заметка:

Функция импорта/экспорта блоков даст плодотворные результаты, только если блоки принадлежат оригинальному редактору Гутенберга.

Если блоки создаются с помощью плагина на родительском сайте, то для успешной процедуры импорта/экспорта целевым сайтам также потребуется тот же набор плагинов, который использовался для разработки блока. Опять же, дизайн блоков может варьироваться от темы к теме в зависимости от основного местоположения, где применяется CSS.

Вывод

Итак, вот оно. Полноценная прогулка по импорту/экспорту блоков Гутенберга. Ну, я никогда не перестаю восхищаться разработчиками, вовлеченными в создание редактора Гутенберга.

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

Для тех, кто не доволен этим новым способом редактирования, все, что я могу сказать, это то, что Гутенберг никуда не денется. Хотя WordPress по-прежнему дает возможность переключиться на классический редактор, это может продолжаться недолго. Так что лучше, если все начнут знакомиться с Гутенбергом ближе и ближе.

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

Надеюсь, вам понравился пост и он оказался полезным. Если да, то дайте мне знать в комментариях ниже. Я был бы рад услышать ваш опыт использования редактора Gutenberg.

А я на этом буду заканчивать — до скорых встреч и берегите себя!


Обо мне
Юрич:
Занимаюсь созданием сайтов на WordPress более 6 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на WordPress, шаблон для сайта или лендинг - не стесняйтесь - пишите. Рад буду помочь!
Заказать сайт