Гутенберг все, что нужно знать о последнем редакторе WordPress
Гутенберг - это новый редактор для WordPress, который полностью заменить текущий редактор на базе TinyMCE. Это амбициозный проект, который, возможно, изменит WordPress во многих отношениях и затронет как обычных конечных пользователей, так и разработчиков, в частности тех, кто зависит от экрана редактора для работы над WordPress. Вот как это выглядит.
Гутенберг также представляет новую парадигму в WordPress под названием “блок”.
“блок” это абстрактный термин, используемый для описания единицы наценки которые составлены из содержимого или макета веб-страницы. Идея объединяет концепции того, что в WordPress сегодня мы достигаем с шорткоды, пользовательский HTML и встраивание обнаружения в единый согласованный API и пользовательский опыт.
Настройка проекта
Зная о том, что Gutenberg построен на основе React, некоторые разработчики обеспокоены тем, что Слишком высокий барьер для разработчиков начального уровня для развития Гутенберга.
Настройка React.js может быть довольно трудоемкой и запутанной, если вы только начинаете с ней работать. Вам понадобится, по крайней мере, JSX-преобразователь Babel, в зависимости от вашего кода вам могут понадобиться некоторые плагины Babel и такой пакет, как Webpack, Rollup или Parcel..
к счастью, некоторые люди в сообществе WordPress усилились и пытаемся сделать разработку Гутенберга как можно более легкой для всех. Сегодня у нас есть инструмент, который будет генерировать шаблон Гутенберга так мы можем начать писать код прямо сейчас вместо того, чтобы сбивать с толку инструментами и конфигурациями.
Создать блок Гутен
создание-Гутен-блок является начальным проектом Ахмада Авайса. Это набор инструментов с нулевой конфигурацией (# 0CJS), что позволит вам разработать блок Гутенберга с некоторыми современными предустановками стеков, включая React, Webpack, ESNext, Babel, ESLint и Sass. Следуйте инструкциям, чтобы начать работу с блоком Guten..
Использование ES5 (ECMAScript 5)
Используя все эти инструменты для создания простого “Привет, мир” блок может показаться слишком много. Если вы хотите, чтобы ваши стеки были скудными, вы можете разработать блок Гутенберга, используя простой старый ECMAScript 5, с которым вы, возможно, уже знакомы. Если у вас есть WP-CLI 1.5.0 установлен на вашем компьютере, Вы можете просто бежать ...
блок строительных лесов[--Title = ] [--dashicon =<dashicon>] [--category =<category>] [--theme] [--plugin =<plugin>] [--force]</pre> <p>… Чтобы <strong>создать шаблонный блок Gutenberg для вашего плагина или темы</strong>. Этот подход более целесообразен, особенно для существующих плагинов и тем, которые вы разработали до эпохи Гутенберга..</p> <p>Вместо того, чтобы создавать новый плагин для размещения блоков Гутенберга, вы можете интегрировать блоки в свои плагины или темы. И сделать этот урок простым для всех, <strong>мы будем использовать ECMAScript 5 с WP-CLI</strong>.</p> <h4>Регистрация нового блока</h4> <p>Гутенберг в настоящее время разрабатывается как плагин и будет добавлен в WordPress 5.0, когда команда почувствует, что она готова. Итак, на данный момент вам нужно будет установить его с <strong>Страница плагинов в <code>WP-администратора</code></strong>. После того, как вы установили и активировали его, запустите следующую команду в терминале или в командной строке, если вы работаете на компьютере с Windows.</p> <pre name="code"> серия блоков лесов WP --title = "Серия HTML5" - тема</pre> <p>Эта команда сгенерирует блок для текущей активной темы. Наш Блок состоит из следующих файлов:</p> <pre name="code"> . â ??  ?? â ??  ?? â ??  ?? серия М¢Â ?? Â'Ã' Ã' â ??  ?? â ??  ?? â ??  ?? block.js â ?? Â'Ã' Ã' â ??  ?? â ??  ?? â ??  ?? editor.css â ?? Â'Ã' Ã' â ??  ?? â ??  ?? â ??  ?? style.css â ??  ?? â ??  ?? â ??  ?? series.php </pre> <p>Давайте загрузим основной файл наших блоков в <code>functions.php</code> нашей темы:</p> <pre name="code"> if (function_exists ('register_block_type')) require get_template_directory (). '/Blocks/series.php'; </pre> <p>Обратите внимание, что мы прилагаем загрузку файла с условным условием. Это обеспечивает <strong>совместимость с предыдущей версией WordPress, что наш блок загружается только при наличии Гутенберга</strong>. Наш Блок теперь должен быть доступен в интерфейсе Гутенберга.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>Вот как это выглядит, когда мы вставляем блок.</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>API Гутенберга</h3> <p>Гутенберг представляет два набора API для регистрации нового блока. Если мы посмотрим на <code>series.php</code>, мы найдем следующий код, который регистрирует наш новый блок. Это также <strong>загружает таблицу стилей и скрипты Java на интерфейс и редактор</strong>.</p> <pre name="code">register_block_type ('двадцать семнадцать / серия', массив ('editor_script' => 'series-block-editor', 'editor_style' => 'series-block-editor', 'style' => 'series-block',));</pre> <p>Как мы видим выше, наш Блок называется <code>twentyseventeen / серия</code>, имя блока должно быть уникальным и иметь пространство имен, чтобы избежать столкновения с другими блоками, добавленными другими плагинами.</p> <p>более того, <strong>Гутенберг предоставляет набор новых API-интерфейсов JavaScript для взаимодействия с “блок” интерфейс</strong> в редакторе. Поскольку API довольно много, мы сосредоточимся на некоторых особенностях, которые, я думаю, вы должны знать, чтобы получить простой, но работающий блок Гутенберга..</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>Во-первых, мы будем изучать <code>wp.blocks.registerBlockType</code>. Эта функция используется для <strong>зарегистрировать новый “блок” редактору Гутенберга</strong>. Это требует двух аргументов. Первый аргумент - это имя блока, которое должно следовать за именем, зарегистрированным в <code>register_block_type</code> функция в сторону PHP. Второй аргумент <strong>Объект, определяющий свойства блока</strong> как заголовок, категория и пара функций для визуализации интерфейса блока.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType (Twentyseventeen / series ', title: __ (' HTML5 Series '), категория:' widgets ', ключевые слова: [' html '], edit: function (props) , save: function (props) ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Эта функция позволяет вам создать элемент внутри “блок” в редакторе постов. <code>wp.element.createElement</code> функция в основном абстракция Реакта <code>createElement ()</code> Функция, таким образом, принимает тот же набор аргументов. Первый аргумент принимает тип элемента, например, абзац, <code>пролет</code>, или <code>ДИВ</code> как показано ниже:</p> <pre name="code">wp.element.createElement ( 'DIV');</pre> <p>Мы можем <strong>псевдоним функции в переменную</strong> так что короче писать. Например:</p> <pre name="code"> var el = wp.element.createElement; Эль ( 'DIV');</pre> <p>если ты <strong>предпочитаю использовать новый синтаксис ES6</strong>, Вы также можете сделать это следующим образом:</p> <pre name="code"> const createElement: el = wp.element; Эль ( 'DIV');</pre> <p>Мы также можем <strong>добавить атрибуты элемента</strong> такой как <code>учебный класс</code> имя или <code>Я бы</code> по второму параметру следующим образом:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001');</pre> <p> <code>ДИВ</code> то, что мы создали, не имело бы смысла без содержания. Мы можем <strong>добавить содержимое аргумента третьего параметра</strong>:</p> <pre name="code"> var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001', 'Эта статья является частью нашей "серии руководств по HTML5 / CSS3" - посвящена чтобы помочь вам стать лучшим дизайнером и / или разработчиком. Нажмите здесь, чтобы увидеть больше статей из этой серии ');</pre> <h4><code>wp.components</code></h4> <p> <code>wp.components</code> содержат коллекцию, как следует из названия, компонентов Gutenberg. Эти компоненты технически являются пользовательскими компонентами React, которые включают Button, Popover, Spinner, Tooltip и многие другие. Мы можем <strong>повторно использовать эти компоненты в наш собственный блок</strong>. В следующем примере мы добавляем компонент кнопки.</p> <pre name="code"> var Button = wp.components.Button; el (Button, 'class': 'download-button',, 'Download');</pre> <h4>Атрибуты</h4> <p>Атрибуты - это способ хранения данных в нашем блоке, эти данные могут быть похожи на содержимое, цвета, выравнивания, URL и т. Д. Мы можем получить атрибуты из свойств, передаваемых в <code>редактировать()</code> функция следующим образом:</p> <pre name="code"> edit: function (props) var content = props.attributes.seriesContent; return el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', content); </pre> <p>Для обновления атрибутов мы используем <code>SetAttributes ()</code> функция. Обычно мы меняем содержимое определенного действия, например, когда нажимается кнопка, ввод заполнен, выбран параметр и т. Д. В следующем примере мы используем его для добавления <strong>отступать</strong> содержание нашего Блока на случай, если с нашим <code>seriesContent</code> атрибут.</p> <pre name="code"> edit: function (props) if (typeof props.attributes.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: 'Hello World! Вот резервный контент.' ) var content = props.attributes.seriesContent; return [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', content),]; </pre> <h4>Сохранение блока</h4> <p> <code>спасти()</code> функция работает аналогично <code>редактировать()</code>, за исключением того, что он определяет содержимое нашего блока для сохранения в почтовой базе данных. Сохранить содержимое блока довольно просто, как мы видим ниже:</p> <pre name="code"> save: function (props) if (! props ||! props.attributes.seriesContent) return; var content = props.attributes.seriesContent; return [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', content),]; </pre> <h3>Что дальше?</h3> <p>Гутенберг изменит экосистему WordPress к лучшему (или, возможно, к худшему). Это позволяет разработчикам <strong>принять новый способ разработки плагинов и тем WordPress</strong>. Гутенберг это только начало. Скоро “блок” Парадигма будет расширена на другие области WordPress, такие как API настроек и виджеты.</p> <p>Изучите JavaScript глубоко; Это единственный способ попасть в Гутенберг и оставаться актуальным для будущего в индустрии WordPress. Если вы уже знакомы с основами JavaScript, причудами, функциями, инструментами, товарами и недостатками, я действительно уверен, что вы освоитесь с Гутенбергом.</p> <p>Как уже упоминалось, Гутенберг предоставляет множество API-интерфейсов, которых достаточно, чтобы сделать что-нибудь для вашего Блока. Вы можете выбрать, следует ли <strong>кодируйте свой блок с помощью старого старого JavaScript, JavaScript с синтаксисом ES6, React или даже Vue</strong>.</p> <h4>Идеи и вдохновение</h4> <p>Я создал очень (очень) простой блок Гутенберга, который вы можете найти в репозитории нашего аккаунта на Github. Кроме того, я также собрал несколько репозиториев, из которых вы можете получить вдохновение для создания более сложного блока..</p> <ul><li>Gutenblocks - коллекция блоков, написанных Матье Вьет на JavaScript с синтаксисом ES5</li> <li>Jetpack Gutenblocks Project - коллекция блоков, включенных в Jetpack</li> <li>Список примеров реализации Гутенберга, в том числе с Vue.js</li> </ul><h3>Дальнейшая ссылка</h3> <ul><li>Официальный репозиторий Гутенберга</li> <li>Справочник Гутенберга</li> </ul> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> </div> </div> <div class="col-md-4"> <div class="bar"> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6284591903398394" data-ad-slot="6432271471" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/hack-an-ikea-lack-table-into-a-component-rack.html"><img src="//savtec.org/img/images_8/hack-an-ikea-lack-table-into-a-component-rack_2.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/hack-an-ikea-lack-table-into-a-component-rack.html">Взломать IKEA Lack Table в стойку для компонентов</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/howto/hack-apart-an-old-keyboard-to-create-custom-control-interface.html"><img src="//savtec.org/img/images_8/hack-apart-an-old-keyboard-to-create-custom-control-interface_2.jpg" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/howto/hack-apart-an-old-keyboard-to-create-custom-control-interface.html">Взломать старую клавиатуру для создания пользовательского интерфейса управления</a> </div> </div> <div class="barpost"> <div class="bar-post-img"><a href="/articles/windows/guide-to-windows-10-task-manager-part-ii.html"><img src="//savtec.org/img/images/guide-to-windows-10-task-manager-part-ii_2.png" alt=""></a></div> <div class="bar-post-h1"> <a href="/articles/windows/guide-to-windows-10-task-manager-part-ii.html">Руководство по диспетчеру задач Windows 10 - часть II</a> </div> </div> </div> </div> </div> </div> <div class="prevnext"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Следующая статья</div> <div class="post-img"><a href="/articles/howto/hack-a-10-flashlight-into-an-ultra-bright-premium-one.html"> <img src="//savtec.org/img/images_9/hack-a-10-flashlight-into-an-ultra-bright-premium-one_2.jpg" alt=""> </a></div> <div class="post-h1"> <a href="/articles/howto/hack-a-10-flashlight-into-an-ultra-bright-premium-one.html">Взломайте $ 10 фонарик в ультра-яркий премиум один</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Предыдущая статья</div> <div class="post-img"><a href="/articles/windows/guide-to-windows-10-task-manager-part-iii.html"> <img src="//savtec.org/img/images/guide-to-windows-10-task-manager-part-iii.png" alt=""> </a></div> <div class="post-h1"> <a href="/articles/windows/guide-to-windows-10-task-manager-part-iii.html">Руководство по диспетчеру задач Windows 10 - часть III</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="langs-block"> <ul class="langs-list"> <li class="site-lang"><a href="https://www.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-TH"></i></a></li> <li class="site-lang"><a href="https://de.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-DE"></i></a></li> <li class="site-lang"><a href="https://ar.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-AE"></i></a></li> <li class="site-lang"><a href="https://bg.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-BG"></i></a></li> <li class="site-lang"><a href="https://cs.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-CZ"></i></a></li> <li class="site-lang"><a href="https://da.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-DK"></i></a></li> <li class="site-lang"><a href="https://el.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-GR"></i></a></li> <li class="site-lang"><a href="https://es.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-ES"></i></a></li> <li class="site-lang"><a href="https://et.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-EE"></i></a></li> <li class="site-lang"><a href="https://fi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-FI"></i></a></li> <li class="site-lang"><a href="https://fr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-FR"></i></a></li> <li class="site-lang"><a href="https://he.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IL"></i></a></li> <li class="site-lang"><a href="https://hi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IN"></i></a></li> <li class="site-lang"><a href="https://hr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-HR"></i></a></li> <li class="site-lang"><a href="https://hu.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-HU"></i></a></li> <li class="site-lang"><a href="https://id.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-ID"></i></a></li> <li class="site-lang"><a href="https://it.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-IT"></i></a></li> <li class="site-lang"><a href="https://ja.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-JP"></i></a></li> <li class="site-lang"><a href="https://ko.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-KR"></i></a></li> <li class="site-lang"><a href="https://lt.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-LT"></i></a></li> <li class="site-lang"><a href="https://lv.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-LV"></i></a></li> <li class="site-lang"><a href="https://ms.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-MY"></i></a></li> <li class="site-lang"><a href="https://nl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-NL"></i></a></li> <li class="site-lang"><a href="https://no.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-NO"></i></a></li> <li class="site-lang"><a href="https://pl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-PL"></i></a></li> <li class="site-lang"><a href="https://pt.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-PT"></i></a></li> <li class="site-lang"><a href="https://ro.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RO"></i></a></li> <li class="site-lang"><a href="https://ru.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RU"></i></a></li> <li class="site-lang"><a href="https://sk.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SK"></i></a></li> <li class="site-lang"><a href="https://sl.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SI"></i></a></li> <li class="site-lang"><a href="https://sr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-RS"></i></a></li> <li class="site-lang"><a href="https://sv.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-SE"></i></a></li> <li class="site-lang"><a href="https://tr.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-TR"></i></a></li> <li class="site-lang"><a href="https://ua.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-UA"></i></a></li> <li class="site-lang"><a href="https://vi.savtec.org/articles/wordpress/gutenberg-all-you-need-to-know-about-wordpress-latest-editor.html"><i class="flag flag-VN"></i></a></li> </ul> </div> <div class="row align-items-center"> <div class="col-md-3"> © <script> var currentTime = new Date(); var year = currentTime.getFullYear(); document.write(year); </script> <a href="/">Savtec</a> </div> <div class="col-md-9"> Полезная информация и советы по веб-разработке. Программирование, веб-дизайн, CSS, HTML, JAVASCRIPT. Настройка и переустановка WINDOWS. Создание сайтов и приложений с нуля. </div> </div> </div> </footer> <link rel="stylesheet" href="css/flags.css"> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> </body> </html>