Gutenberg todo lo que necesita saber sobre el último editor de WordPress
Gutenberg es un nuevo editor para WordPress que lo hará totalmente. Reemplace el editor actual de TinyMCE. Es un proyecto ambicioso que podría cambiar WordPress de muchas maneras y afectaría tanto a los usuarios finales regulares como a los desarrolladores, específicamente, a aquellos que dependen de la pantalla del editor para trabajar en WordPress. Así es como se ve.
Gutenberg también introduce un nuevo paradigma en WordPress llamado “Bloquear”.
“Bloquear” es el término abstracto usado para describir unidades de marcado que están compuestas por el contenido o diseño de una página web. La idea combina conceptos de lo que en WordPress hoy conseguimos con códigos cortos, HTML personalizado e incrustación en una única API consistente y experiencia de usuario.
Configuración del proyecto
Sabiendo el hecho de que Gutenberg está construido sobre React, algunos desarrolladores están preocupados de que La barrera es demasiado alta para los desarrolladores de nivel de entrada para desarrollar Gutenberg.
Configurar React.js puede llevar bastante tiempo y ser confuso si recién comienza a usarlo. Necesitará al menos, JSX transformer, Babel, dependiendo de su código, es posible que necesite algunos complementos de Babel y un Bundler como Webpack, Rollup o Parcel.
por suerte, algunas personas dentro de la comunidad de WordPress intensificaron y están tratando de hacer que el desarrollo de Gutenberg sea lo más fácil posible para que todos lo sigan. Hoy en día, tenemos una herramienta que generará un modelo de Gutenberg para Podemos empezar a escribir el código de inmediato. En lugar de confundir con las herramientas y las configuraciones.
Crear Guten Block
los crear-guten-block Es un proyecto iniciado por Ahmad Awais. Es un kit de herramientas de configuración cero (# 0CJS) que te permitirá desarrollar el bloque Gutenberg con algunos presets modernos, incluyendo React, Webpack, ESNext, Babel, ESLint y Sass. Sigue las instrucciones para empezar a crear Guten Block..
Utilizando ES5 (ECMAScript 5)
Usando todas estas herramientas para crear un simple “Hola Mundo” Bloquear puede parecer demasiado. Si te gusta mantener tus pilas escasas, puedes desarrollar un bloque Gutenberg usando un simple ECMAScript 5 con el que puedas estar familiarizado. Si usted tiene WP-CLI 1.5.0 instalado en su computadora, simplemente puedes correr ...
bloque de andamio wp[--título = ] [--dashicon =<dashicon>] [--category =<category>] [--theme] [--plugin =<plugin>] [--force]</pre> <p>… a <strong>genere el bloque de Gutenberg para su plugin o tema</strong>. Este enfoque es más sensato, en particular, para los complementos y temas existentes que haya desarrollado antes de la era de Gutenberg..</p> <p>En lugar de crear un nuevo complemento para acomodar los bloques de Gutenberg, es posible que desee integrar los bloques a sus complementos o los temas. Y para que este tutorial sea fácil de seguir para todos., <strong>utilizaremos ECMAScript 5 con WP-CLI</strong>.</p> <h4>Registro de un nuevo bloque</h4> <p>Gutenberg se desarrolla actualmente como un complemento y se fusionará con WordPress 5.0 cuando el equipo sienta que está listo. Así que, por el momento, deberá instalarlo desde el <strong>Página de complementos en <code>wp-admin</code></strong>. Una vez que lo haya instalado y activado, ejecute el siguiente comando en la Terminal o en el símbolo del sistema si está en una máquina con Windows.</p> <pre name="code"> serie de bloques de andamio wp --title = "HTML5 Series" --theme</pre> <p>Este comando generará un Bloque al tema actualmente activo. Nuestro bloque consistirá en los siguientes archivos:</p> <pre name="code"> . UNA¢¿??? ???¢¿??? ???¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? serie â¿?????????¢¿??? ???¢¿??? ???¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? block.js â¿?????????¢¿??? ???¢¿??? ???¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? editor.css â¿?????????¢¿??? ???¢¿??? ???¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? style.css â¿??? ???¢¿??? ???¢¿¿AUTOMÓVIL CLUB BRITÁNICO?? series.php </pre> <p>Carguemos el archivo principal de nuestros bloques en el <code>funciones.php</code> de nuestro tema:</p> <pre name="code"> if (function_exists ('register_block_type')) require get_template_directory (). '/blocks/series.php'; </pre> <p>Observe que adjuntamos la carga del archivo con un condicional. Esto garantiza <strong>compatibilidad con la versión anterior de WordPress que nuestro bloque solo se carga cuando Gutenberg está presente</strong>. Nuestro bloque ahora debería estar disponible dentro de la interfaz de Gutenberg..</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_2.jpg"></figure><p>Así se ve cuando insertamos el bloque..</p> <figure> <img src="//savtec.org/img/images/gutenberg-all-you-need-to-know-about-wordpress-latest-editor_3.jpg"></figure><h3>APIs de Gutenberg</h3> <p>Gutenberg introduce dos conjuntos de API para registrar un nuevo Bloque. Si miramos el <code>series.php</code>, Encontraremos el siguiente código que registra nuestro nuevo Bloque. También <strong>carga la hoja de estilo y los scripts de Java en el front-end y el editor</strong>.</p> <pre name="code">register_block_type ('twentyseventeen / series', array ('editor_script' => 'series-block-editor', 'editor_style' => 'series-block-editor', 'style' => 'series-block',));</pre> <p>Como podemos ver arriba, nuestro bloque se llama <code>veintisiete / serie</code>, el nombre del Bloque debe ser único y tener un espacio de nombre para evitar la colisión con los otros Bloques que traen los otros complementos.</p> <p>además, <strong>Gutenberg proporciona un conjunto de nuevas API de JavaScript para interactuar con el “Bloquear” interfaz</strong> en el editor. Ya que la API es bastante abundante, nos enfocaremos en algunos aspectos específicos que creo que deberías saber para obtener un Bloque de Gutenberg simple pero que funcione..</p> <h4><code>wp.blocks.registerBlockType</code></h4> <p>Primero, estaremos investigando <code>wp.blocks.registerBlockType</code>. Esta función se utiliza para <strong>registrar un nuevo “Bloquear” al editor de Gutenberg</strong>. Requiere dos argumentos. El primer argumento es el nombre del bloque que debe seguir al nombre registrado en el <code>register_block_type</code> Funciona en el lado de PHP. El segundo argumento es un <strong>Objeto que define las propiedades del bloque</strong> como título, categoría y un par de funciones para representar la interfaz de Bloque.</p> <pre name="code"> var registerBlockType = wp.blocks.registerBlockType; registerBlockType ('twentyseventeen / series', title: __ ('HTML5 Series'), categoría: 'widgets', palabras clave: ['html'], edit: function (props) , save: function (props) ); </pre> <h4><code>wp.element.createElement</code></h4> <p>Esta función le permite crear el elemento dentro de la “Bloquear” en el editor de posts. los <code>wp.element.createElement</code> La función es básicamente una abstracción del React. <code>createElement ()</code> La función así acepta el mismo conjunto de argumentos. El primer argumento toma el tipo de elemento, por ejemplo, un párrafo, un <code>lapso</code>, o un <code>div</code> Como se muestra abajo:</p> <pre name="code">wp.element.createElement ('div');</pre> <p>Podemos <strong>alias la función en una variable</strong> por lo que es más corto para escribir. Por ejemplo:</p> <pre name="code"> var el = wp.element.createElement; el ('div');</pre> <p>Si tu <strong>Prefiero usar la nueva sintaxis de ES6</strong>, También puedes hacerlo de esta manera:</p> <pre name="code"> const createElement: el = wp.element; el ('div');</pre> <p>También podemos <strong>agregar los atributos del elemento</strong> tales como el <code>clase</code> nombre o <code>carné de identidad</code> en el segundo parámetro de la siguiente manera:</p> <pre name="code"> var el = wp.element.createElement; el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001');</pre> <p>los <code>div</code> que creamos no tendría sentido sin el contenido. Podemos <strong>Añadir el contenido en el argumento del tercer parámetro.</strong>:</p> <pre name="code"> var el = wp.element.createElement; el ('p', 'class': 'series-html5', 'id': 'series-html-post-id-001', 'Este artículo es parte de nuestra "Serie de tutoriales HTML5 / CSS3" - dedicado para ayudarlo a ser un mejor diseñador y / o desarrollador. Haga clic aquí para ver más artículos de la misma serie ');</pre> <h4><code>wp.components</code></h4> <p>los <code>wp.components</code> Contiene una colección de, como su nombre lo indica, los componentes de Gutenberg. Técnicamente, estos componentes son componentes personalizados de React que incluyen Button, Popover, Spinner, Tooltip y muchos otros. Podemos <strong>reutilizar estos componentes en nuestro propio Bloque</strong>. En el siguiente ejemplo, agregamos un componente de botón.</p> <pre name="code"> Botón var = wp.components.Button; el (Button, 'class': 'download-button',, 'Download');</pre> <h4>Atributos</h4> <p>Los Atributos son la forma de almacenar los datos en nuestro Bloque, estos datos podrían ser como el contenido, los colores, las alineaciones, la URL, etc. Podemos obtener los atributos de las Propiedades pasadas en el <code>editar()</code> función, de la siguiente manera:</p> <pre name="code"> edit: function (props) var content = props.attributes.seriesContent; return el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', contenido); </pre> <p>Para actualizar los atributos, usamos el <code>setAttributes ()</code> función. Por lo general, cambiaríamos el contenido en ciertas acciones, como cuando se hace clic en un botón, se completa una entrada, se selecciona una opción, etc. En el siguiente ejemplo, lo usamos para agregar una <strong>retroceder</strong> contenido de nuestro Bloque en caso de que algo inesperado le sucediera a nuestro <code>seriesContenido</code> Atributo.</p> <pre name="code"> edit: function (props) if (typeof props.attributes.seriesContent === 'undefined' ||! props.attributes.seriesContent) props.setAttribute (seriesContent: 'Hello World! Aquí está el contenido alternativo.' ) var content = props.attributes.seriesContent; return [el ('div', 'class': 'series-html5', 'id': 'series-html-post-id-001', content),]; </pre> <h4>Salvando el bloque</h4> <p>los <code>salvar()</code> función funciona de manera similar a la <code>editar()</code>, excepto que define el contenido de nuestro Bloque para guardar en la base de datos de publicaciones. Guardar el contenido del Bloque es bastante sencillo, como podemos ver a continuación:</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>Que sigue?</h3> <p>Gutenberg cambiará el ecosistema de WordPress para mejor (o posiblemente peor). Permite a los desarrolladores <strong>Adopta una nueva forma de desarrollar complementos y temas de WordPress.</strong>. Gutenberg es solo el comienzo. Pronto el “Bloquear” El paradigma se ampliará a otras áreas de WordPress, como las API de configuración y los widgets..</p> <p>Aprende JavaScript en profundidad; Es la única forma de entrar en Gutenberg y mantenerse relevante para el futuro en la industria de WordPress. Si ya está familiarizado con los conceptos básicos de JavaScript, las peculiaridades, las funciones, las herramientas, los bienes y los males, estoy seguro de que se pondrá al día con Gutenberg..</p> <p>Como se mencionó, Gutenberg expone una gran cantidad de API, lo suficiente para hacer casi cualquier cosa a su Bloque. Usted puede elegir si desea <strong>codifique su Bloque con un JavaScript antiguo, JavaScript con sintaxis de ES6, Reacción o incluso Vue</strong>.</p> <h4>Ideas e inspiraciones</h4> <p>He creado un Gutenberg Block muy (muy) simple que puedes encontrar en el repositorio de nuestra cuenta de Github. Además, también he reunido varios repositorios desde donde puedes inspirarte para construir un Bloque más complejo.</p> <ul><li>Gutenblocks - Una colección de bloques de Mathieu Viet escrita en JavaScript con la sintaxis ES5</li> <li>Jetpack Gutenblocks Project - una colección de bloques incluidos en Jetpack</li> <li>Una lista de ejemplos de implementación de Gutenberg incluida con Vue.js</li> </ul><h3>Referencia adicional</h3> <ul><li>Repositorio oficial de Gutenberg</li> <li>Manual de Gutenberg</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">Hackea una tabla de falta IKEA en un rack de componentes</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">Hackear un viejo teclado para crear una interfaz de control personalizada</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">Guía del Administrador de tareas de Windows 10 - Parte 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">Siguiente articulo</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">Hackea una linterna de $ 10 en una Ultra Brillante Premium One</a> </div> </div> </div> <div class="col-md-6"> <div class="post"> <div class="prevnext-title">Artículo anterior</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">Guía del Administrador de tareas de Windows 10 - Parte 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"> Información útil y consejos de desarrollo web. Programación, diseño web, CSS, HTML, JAVASCRIPT. Configure y reinstale WINDOWS. Creación de sitios y aplicaciones desde cero. </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>