Гутенберг Все, що потрібно знати про останній редактор WordPress
Гутенберг - новий редактор для WordPress, який буде повністю замінити поточний редактор, що працює на TinyMCE. Це амбітний проект, який, можливо, змінить WordPress багатьма способами і вплине як на звичайних кінцевих користувачів, так і на розробників, зокрема, тих, хто залежить від екрану редактора для роботи над WordPress. Ось як це виглядає.
Гутенберг також вводить нову парадигму в WordPress “Блок”.
“Блок” це абстрактний термін, що використовується для опису одиниць розмітки які складаються з вмісту або макета веб-сторінки. Ідея поєднує в собі поняття того, що в WordPress сьогодні ми досягаємо з шорткодні коди, спеціальний HTML-код і вбудовування відкриття в єдиний послідовний API та користувальницький досвід.
Налаштування проекту
Знаючи той факт, що Гутенберг будується на вершині React, деякі розробники стурбовані тим, що Бар'єр занадто високий для розробників початкового рівня для розробки Гутенберга.
Налаштування React.js може зайняти багато часу і заплутати, якщо ви тільки починаєте роботу з ним. Вам знадобиться, принаймні, трансформатор JSX, Babel, залежно від вашого коду вам знадобляться деякі плагіни Babel, а Bundler - Webpack, Rollup або Parcel.
На щастя, деякі люди в спільноті WordPress активізувалися і намагаються зробити розвиток Гутенберга якомога простішим для всіх. Сьогодні у нас є інструмент, який дозволить генерувати таку модель Гутенберга ми можемо відразу почати писати код замість того, щоб здивуватися інструментами та конфігураціями.
Створити блок Guten
The create-guten-block є ініціативним проектом Ахмада Авайса. Це набір інструментів з нульовою конфігурацією (# 0CJS), що дозволить вам розробити блок Гутенберга з деякими сучасними стеками, що включають в себе React, Webpack, ESNext, Babel, ESLint і Sass. Виконайте інструкцію, щоб розпочати роботу зі створенням блоку Guten.
Використання ES5 (ECMAScript 5)
Використовуючи всі ці інструменти для створення простого “Привіт Світ” блок може здатися занадто багато. Якщо ви хочете тримати свої стеки нахиленими, ви можете розробити блок Гутенберга, використовуючи звичайний добрий старий ECMAScript 5, який ви, можливо, вже знайомі. Якщо у вас є WP-CLI 1.5.0, встановлений на вашому комп'ютері, можна просто запустити ...
wp scaffold block[--title = ] [--dashicon =<dashicon>] [--category =<category>] [- тема] [--plugin =<plugin>] [--force]</pre> <p>… До <strong>генерувати шаблон блоку Гутенберга до вашого плагіна або теми</strong>. Цей підхід є більш розумним, зокрема, для існуючих плагінів і тем, які ви розробили до епохи Гутенберга.</p> <p>Замість того, щоб створювати новий плагін для розміщення блоків Гутенберга, можна інтегрувати блоки у плагіни або теми. І зробити цей підручник легким для всіх, <strong>ми будемо використовувати ECMAScript 5 з WP-CLI</strong>.</p> <h4>Реєстрація нового блоку</h4> <p>Gutenberg в даний час розроблений як плагін і буде об'єднаний з WordPress 5.0, коли команда вважає, що вона готова. Отже, на даний момент вам потрібно встановити його з <strong>Сторінка плагінів у <code>wp-admin</code></strong>. Після встановлення та активації запустіть у терміналі або командний рядок наступну команду, якщо ви працюєте на машині Windows.</p> <pre name="code"> wp scaffold блок серії --title = "HTML5 Series" --тема</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')) потрібно 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 Gutenberg</h3> <p>Gutenberg представляє два набори API для реєстрації нового блоку. Якщо ми подивимося на <code>series.php</code>, ми знайдемо наступний код, який реєструє наш новий блок. Він також <strong>завантажує таблицю стилів і JavaScript на інтерфейс і редактор</strong>.</p> <pre name="code">register_block_type ('twentyseventeen / series', масив ('editor_script' => 'series-block-editor', 'editor_style' => 'серія-блок-редактор', 'стиль' => 'серія-блок',));</pre> <p>Як ми бачимо вище, наш блок названий <code>двадцять сімнадцять / серія</code>, Назва блоку повинна бути унікальною і простору імен, щоб уникнути зіткнення з іншими блоками, які приносять інші плагіни.</p> <p>Крім того, <strong>Gutenberg надає набір нових JavaScript API для взаємодії з “Блок” інтерфейс</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> як назва, категорія і кілька функцій для візуалізації інтерфейсу Block.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', title: __ ('Серія HTML5'), категорія: 'віджети', ключові слова: ['html'], редагувати: функція (реквізит) , зберегти: функція (реквізити) ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Ця функція дозволяє створювати елемент всередині “Блок” у редакторі повідомлень. The <code>wp.element.createElement</code> Функція є в основному абстракцією Реакції <code>createElement ()</code> Функція, таким чином, приймає один і той же набір аргументів. Перший аргумент приймає тип елемента, наприклад абзац, a <code>span</code>, або a <code>div</code> як показано нижче:</p> <pre name="code">wp.element.createElement ('div');</pre> <p>Ми можемо <strong>псевдонім функції в змінну</strong> тому краще писати. Наприклад:</p> <pre name="code"> var el = wp.element.createElement; el ('div');</pre> <p>Якщо ви <strong>надає перевагу використанню нового синтаксису ES6</strong>, Ви також можете зробити це так:</p> <pre name="code"> const createElement: el = wp.element; el ('div');</pre> <p>Ми також можемо <strong>додайте атрибути елемента</strong> наприклад, <code>клас</code> ім'я або <code>id</code> по другому параметру наступним чином:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001');</pre> <p>The <code>div</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>The <code>wp.components</code> містять колекцію, як випливає з назви, компонентів Гутенберга. Ці компоненти технічно є компонентами React custom, які включають кнопки, Popover, Spinner, Tooltip і купу інших. Ми можемо <strong>використовувати ці компоненти в нашому Блоку</strong>. У наступному прикладі ми додаємо компонент кнопки.</p> <pre name="code"> var Button = wp.components.Button; el (Кнопка, 'class': 'кнопка завантаження',, 'Завантажити');</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', вміст); </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', вміст),]; </pre> <h4>Збереження блоку</h4> <p>The <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', вміст),]; </pre> <h3>Що далі?</h3> <p>Гутенберг змінить екосистему WordPress на краще (або, можливо, гірше). Це дозволяє розробникам <strong>прийняти новий спосіб розробки плагінів і тем WordPress</strong>. Гутенберг - це лише початок. Незабаром “Блок” Парадигма буде розширена до інших областей WordPress, таких як API налаштувань і віджетів.</p> <p>Вивчайте JavaScript глибоко; це єдиний спосіб потрапити в Гутенберг і залишатися актуальним для майбутнього в галузі WordPress. Якщо ви вже знайомі з основами JavaScript, примхами, функціями, інструментами, товарами та басами, я дійсно впевнений, що ви доберетеся до Gutenberg.</p> <p>Як уже згадувалося, Гутенберг надає достатню кількість API, достатню для того, щоб зробити майже що завгодно для вашого блоку. Ви можете вибрати, чи потрібно <strong>кодуйте свій Блок звичайним старим JavaScript, JavaScript з синтаксисом ES6, React або навіть Vue</strong>.</p> <h4>Ідеї та натхнення</h4> <p>Я створив дуже (дуже) простий блок Гутенберга, який можна знайти в репозиторії нашого облікового запису Github. Крім того, я також зібрав ряд сховищ, звідки можна надихати на створення більш складного блоку.</p> <ul><li>Gutenblocks - колекція блоків, створених Mathieu Viet, написаних на 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 у компонентну стійку</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">Hack Окремо стару клавіатуру для створення користувальницького інтерфейсу управління</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 Task Manager - Частина 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">Hack $ 10 ліхтарик в ультра-яскравий Premium One</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 Task Manager - Частина 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>