Гутенберг Всичко, което трябва да знаете за последния редактор на WordPress
Гутенберг е нов редактор за WordPress, който ще бъде напълно замени текущия TinyMCE-задвижван редактор. Това е амбициозен проект, който вероятно ще промени WordPress по много начини и ще засегне както редовните крайни потребители, така и разработчиците, особено тези, които зависят от редакторския екран за работа с WordPress. Ето как изглежда.
Гутенберг въвежда и нова парадигма в WordPress “блок”.
“блок” е абстрактният термин, използван за описание единици за маркиране които са съставени от съдържанието или оформлението на дадена уеб страница. Идеята съчетава концепции за това какво в днешния WordPress постигаме кратки кодове, персонализиран HTML код и вграждане на откритие в единен последователен API и потребителски опит.
Създаване на проекта
Знаейки факта, че Гутенберг е построен на React, някои разработчици се притесняват, че бариерата е твърде висока за разработчиците на начално ниво за развитие на Гутенберг.
Създаването на React.js може да отнеме доста време и да обърква, ако току-що започнете. Ще трябва поне JSX трансформатор, Babel, в зависимост от кода ви, може да имате нужда от някои Babel приставки и Bundler като Webpack, Rollup или Parcel.
за щастие, някои хора в общността на WordPress се засилиха и се опитват да направят развитието на Гутенберг възможно най-лесно за всеки, който да го последва. Днес ние имаме инструмент, който ще генерира такъв модел на Гутенберг веднага можем да започнем да пишем код вместо да се заблуждават с инструментите и конфигурациите.
Създайте блок Guten
Най- създадат-Guten-блок е инициативен проект на Ахмад Авайс. Това е комплект инструменти с нулева конфигурация (# 0CJS), което ще ви позволи да развиете блока на Гутенберг с някои модерни стикове, включително React, Webpack, ESNext, Babel, ESLint и Sass. Следвайте инструкциите, за да започнете с Create Guten Block.
Използване на ES5 (ECMAScript 5)
Използване на всички тези инструменти за създаване на прост “Здравей свят” блок може да изглежда твърде много. Ако искате да запазите стековете си постно, всъщност можете да развиете блок на Гутенберг, използвайки обикновен добър ECMAScript 5, с който може би вече сте запознати. Ако имате WP-CLI 1.5.0 е инсталиран на вашия компютър, можете просто да стартирате ...
wp скеле блок[--Title = ] [--dashicon =<dashicon>] [--category =<category>] [- тема] [--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 scaffold block series --title = "Серия HTML5" - тема</pre> <p>Тази команда ще генерира блок към текущо активната тема. Нашият блок ще се състои от следните файлове:</p> <pre name="code"> . âА ?? а ?? âА ?? а ?? âА ?? а ?? серия âA? Â'Ã' Ã' âА ?? а ?? âА ?? а ?? âА ?? а ?? block.js âA? Â'Ã' Ã' âА ?? а ?? âА ?? а ?? âА ?? а ?? editor.css âA? Â'Ã' Ã' âА ?? а ?? âА ?? а ?? âА ?? а ?? 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, че нашият блок се зарежда само когато Gutenberg присъства</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>зарежда таблицата за стилове и JavaScript на предния край и в редактора</strong>.</p> <pre name="code">register_block_type ('twentyseventeen / series', масив ('editor_script' => 'series-block-editor', 'editor_style' => 'series-block-editor', 'style' => 'series-block',));</pre> <p>Както можем да видим по-горе, нашият блок се нарича <code>twentyseventeen / серия</code>, Името Block трябва да бъде уникално и пространствено за имена, за да се избегне сблъсък с другите блокове, донесени от другите приставки.</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 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>, или a <code>Разделение</code> както е показано по-долу:</p> <pre name="code">wp.element.createElement ( "Разделение");</pre> <p>Ние можем <strong>псевдоним функцията в променлива</strong> така че е по-кратко да пиша. Например:</p> <pre name="code"> var el = wp.element.createElement; Ел ( "Разделение");</pre> <p>Ако ти <strong>предпочитат да използват новия синтаксис ES6</strong>, можете да го направите и по следния начин:</p> <pre name="code"> const createElement: el = wp.element; Ел ( "Разделение");</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> съдържат колекция от компонентите на Гутенберг, както подсказва името. Тези компоненти технически са React custom components, които включват бутон, 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: 'Здравей, свят! Ето резервното съдържание.' ) var content = props.attributes.seriesContent; return [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', съдържание),]; </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', съдържание),]; </pre> <h3>Какво следва?</h3> <p>Гутенберг ще промени WordPress екосистемата към по-добро (или вероятно по-лошо). Това позволява на разработчиците да <strong>възприеме нов начин за разработване на WordPress плъгини и теми</strong>. Гутенберг е само началото. Скоро “блок” парадигмата ще бъде разширена до други области на WordPress, като например API за настройка и Widgets.</p> <p>Научете JavaScript Deeply; това е единственият начин да влезете в Гутенберг и да останете подходящи за бъдещето в индустрията на WordPress. Ако вече сте запознати с основите на JavaScript, странностите, функциите, инструментите, стоките и бадите, наистина съм сигурен, че ще успеете с Гутенберг.</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 в компонент Rack</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 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">Хакнете $ 10 фенерче в ултра-ярък Premium</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>