{"id":29282,"date":"2018-10-16T00:00:00","date_gmt":"2018-10-15T18:30:00","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&#038;p=29282"},"modified":"2022-09-01T20:06:17","modified_gmt":"2022-09-01T14:36:17","slug":"astra-with-gutenberg-editor","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/astra-with-gutenberg-editor\/","title":{"rendered":"\u00bfC\u00f3mo funciona Astra con el editor Gutenberg?"},"content":{"rendered":"<p>Astra te da una gran experiencia de construir una p\u00e1gina con el editor Gutenberg. A continuaci\u00f3n se presentan los puntos que explican c\u00f3mo Astra se adapta mejor con el editor Gutenberg.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Dise\u00f1o de contenedores compatibles&nbsp;<\/strong><\/h3>\n\n\n\n<p>El dise\u00f1o de contenedor establecido para Astra desde el personalizador se aplicar\u00e1 tambi\u00e9n al editor Gutenberg. As\u00ed el usuario tendr\u00e1 la experiencia de c\u00f3mo se ver\u00e1 la p\u00e1gina final en el frontend. M\u00e1s informaci\u00f3n sobre el dise\u00f1o de contenedor&nbsp;<a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/container-overview\/\" target=\"_blank\" rel=\"noopener noreferrer\">aqu\u00ed<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Editor Gutenberg con Boxed \/ Content Boxed - Container Layout<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-boxed-layout.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1655\" height=\"841\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-boxed-layout.png\" alt=\"Gutenberg Boxed Layout\" class=\"wp-image-29308\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-boxed-layout.png 1655w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-boxed-layout-300x152.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-boxed-layout-768x390.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-boxed-layout-1024x520.png 1024w\" sizes=\"(max-width: 1655px) 100vw, 1655px\" \/><\/a><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Editor Gutenberg con Full Width \/ Contained - Container Layout<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-contained-layout.png\"><img decoding=\"async\" width=\"1655\" height=\"841\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-contained-layout.png\" alt=\"Gutenberg Contained Layout\" class=\"wp-image-29307\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-contained-layout.png 1655w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-contained-layout-300x152.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-contained-layout-768x390.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-contained-layout-1024x520.png 1024w\" sizes=\"(max-width: 1655px) 100vw, 1655px\" \/><\/a><\/figure>\n\n\n\n<p><strong>Nota:<\/strong> No se recomienda utilizar Full Width \/ Stretched layout con el editor Gutenberg. Est\u00e1 especialmente dise\u00f1ado para los constructores de p\u00e1gina que necesitan un control total sobre el ancho del contenedor. Por lo tanto, si habilita el dise\u00f1o de ancho completo \/ estirado, el contenido no se estirar\u00e1 al m\u00e1ximo con el editor de Gutenberg, pero se estirar\u00e1 en el frontend.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Opciones de alineaci\u00f3n a lo ancho y a lo ancho<\/strong><\/h3>\n\n\n\n<p>El editor Gutenberg proporciona opciones de anchura amplia y anchura completa para bloques como Imagen, Galer\u00eda de im\u00e1genes, Imagen de portada, Entradas, etc. Astra soporta estas opciones de anchura en funci\u00f3n de los dise\u00f1os de contenedores seleccionados.<\/p>\n\n\n\n<p>La opci\u00f3n de ancho amplio mostrar\u00e1 la imagen completa, pero tendr\u00e1 algo de espacio a su alrededor. Mientras que la opci\u00f3n de ancho completo estirar\u00e1 la imagen de extremo a extremo. En el dise\u00f1o de contenedor en caja y en caja de contenido, la imagen de ancho completo se estirar\u00e1 seg\u00fan el ancho de la caja. Esto significa que no se mostrar\u00e1 fuera de la caja.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Imagen en recuadro \/ Contenido en recuadro - Dise\u00f1o de contenedor<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-image-boxed.jpg\"><img decoding=\"async\" width=\"1000\" height=\"522\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-image-boxed.jpg\" alt=\"gutenberg image boxed\" class=\"wp-image-131622\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-image-boxed.jpg 1000w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-image-boxed-300x157.jpg 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-image-boxed-768x401.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Imagen con ancho completo \/ contenida - Dise\u00f1o de contenedor<\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-image-contained-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"635\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-image-contained-1.png\" alt=\"gutenberg image contained\" class=\"wp-image-131620\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-image-contained-1.png 1000w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-image-contained-1-300x191.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-image-contained-1-768x488.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<p><strong>Nota:<\/strong> Si la barra lateral est\u00e1 activada para la p\u00e1gina, la imagen no se estirar\u00e1 al m\u00e1ximo. Si lo hace, se superpondr\u00e1 al contenido de la barra lateral.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Backend igual que frontend&nbsp;<\/strong><\/h3>\n\n\n\n<p>El editor Gutenberg tiene como objetivo proporcionar una experiencia de edici\u00f3n visual. As\u00ed que con Astra, nos aseguramos de que el editor tenga un aspecto similar al frontend. Los ajustes del personalizador para colores de fondo, colores de texto, tipograf\u00eda, etc. se pueden ver mientras se edita la p\u00e1gina. As\u00ed puedes hacerte una idea de c\u00f3mo se ver\u00e1 la p\u00e1gina en el frontend.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Bloques de estilo<\/strong><\/h3>\n\n\n\n<p>Astra est\u00e1 probado con todos los bloques de Gutenberg. Los ajustes del personalizador se aplicar\u00e1n a todos los bloques de Gutenberg.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Soporte para Astra shortcodes<\/strong><\/h3>\n\n\n\n<p>Los shortcodes Astra que vienen con el plugin Astra Pro Addon funcionar\u00e1n mejor con el editor Gutenberg.<\/p>","protected":false},"excerpt":{"rendered":"<p>Astra te da una gran experiencia de construir una p\u00e1gina con el editor Gutenberg. A continuaci\u00f3n se presentan los puntos que explican c\u00f3mo Astra se adapta mejor con el editor Gutenberg. Soporte de dise\u00f1o de contenedor El dise\u00f1o de contenedor establecido para Astra desde el personalizador se aplicar\u00e1 tambi\u00e9n al editor Gutenberg. As\u00ed el usuario tendr\u00e1 la experiencia de c\u00f3mo se ver\u00e1 la p\u00e1gina final [...]<\/p>","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"docs_category":[],"docs_tag":[],"class_list":["post-29282","docs","type-docs","status-publish"],"spectra_custom_meta":{"_yoast_wpseo_primary_docs_category":[""],"_wp_old_slug":[""],"_wp_page_template":["default"],"wpil_sync_report3":["1"],"wpil_links_inbound_internal_count":["2"],"wpil_links_inbound_internal_count_data":["a:2:{i:0;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:53:\"https:\/\/wpastra.com\/docs\/astra-with-gutenberg-editor\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:4:\"post\";O:15:\"Wpil_Model_Post\":5:{s:2:\"id\";s:5:\"29306\";s:5:\"title\";s:13:\"Version 1.5.2\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:1039:\"<strong>New: <\/strong>\r\n<ul>\r\n \t<li>Complete Gutenberg Support: Editor Styles, Wide and full-width support. <a href=\"https:\/\/wpastra.com\/docs\/astra-with-gutenberg-editor\/\">Read the documentation.<\/a><\/li>\r\n \t<li>Font variants selection for the base typography settings. <a href=\"https:\/\/wpastra.com\/docs\/typography-improvement-for-astra\/\">Read the documentation.<\/a><\/li>\r\n \t<li>LifterLMS - Add icons for new Membership and My Grades tabs in the student dashboard. (credits <a href=\"https:\/\/github.com\/actual-saurabh\">@actual-saurabh<\/a>)<\/li>\r\n<\/ul>\r\n<strong>Improvement:<\/strong>\r\n<ul>\r\n \t<li>Add new filter `astra_post_meta_separator` for changing the separator style in post meta.<\/li>\r\n<\/ul>\r\n<strong>Fix:<\/strong>\r\n<ul>\r\n \t<li>Logo not perfectly center aligned in the mobile layout in case of stack layout.<\/li>\r\n \t<li>Mobile menu toggle being displayed in IE devices on random intervals.<\/li>\r\n \t<li>Minification plugins such as WP-Rocket, W3 Total Cache etc causing the mobile menu button to be hidden on small devices.<\/li>\r\n<\/ul>\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:46:\"https:\/\/wpastra.com\/changelog\/version-1-5-2-2\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=29306\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=29306\";}}s:6:\"anchor\";s:23:\"Read the documentation.\";s:15:\"added_by_plugin\";b:0;}i:1;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:53:\"https:\/\/wpastra.com\/docs\/astra-with-gutenberg-editor\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:4:\"post\";O:15:\"Wpil_Model_Post\":5:{s:2:\"id\";s:5:\"29358\";s:5:\"title\";s:54:\"Astra Is Fully Gutenberg Compatible! See How It Works:\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:11818:\"<!-- wp:paragraph -->\n<p>As part of WordPress 5.0, WordPress is going to get a brand new content editor, dubbed the Gutenberg Editor.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Gutenberg will bring some major changes to how you create content with WordPress, and making the transition to Gutenberg will also likely bring some minor growing pains as you adjust to the new interface. Because of that, we're happy to announce that we can at least take one thing off your plate!<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>We've already built Gutenberg compatibility into <\/strong><a href=\"https:\/\/wpastra.com\/\"><strong>Astra<\/strong><\/a><strong>, <\/strong>which means that all of the sites that you've built with Astra will be ready to go as soon as WordPress 5.0 ships.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In this post, we'll share a quick introduction to Gutenberg in case you're not already familiar with the new editor. Then, we'll dig into the ways in which we've built Gutenberg compatibility into Astra.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>A Quick Introduction To Gutenberg For The Uninitiated<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>If you're not already familiar, Gutenberg brings a new approach to content creation in the form of <strong>block-based editing<\/strong>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Whereas the original WordPress content editor is basically one long editing field, Gutenberg separates each little \"piece\" of your content into a separate block. For example:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>A paragraph is one block<\/li><li>An image is one block<\/li><li>A video is one block etc.<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>You also get some layout blocks, like the ability to divide your content into separate columns. And third-party developers will be able to add their own blocks, which will eliminate the need to use shortcodes in your content.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>The upshot is that Gutenberg will:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>Give you more flexibility for creating more complex content and layouts.<\/li><li>Offer a more visual editing experience.<\/li><li>Make it easier to include content from your favorite plugins.<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>Here is a video by Envato that nicely explains it further:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:core-embed\/youtube {\"url\":\"https:\/\/www.youtube.com\/watch?v=v9nBysHSzhE\",\"type\":\"video\",\"providerNameSlug\":\"youtube\",\"className\":\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"} -->\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.youtube.com\/watch?v=v9nBysHSzhE\n<\/div><\/figure>\n<!-- \/wp:core-embed\/youtube -->\n\n<!-- wp:paragraph -->\n<p>Gutenberg will be released as part of WordPress 5.0, which <a href=\"https:\/\/make.wordpress.org\/core\/2018\/10\/03\/proposed-wordpress-5-0-scope-and-schedule\/\" target=\"_blank\" rel=\"noopener noreferrer\">could come as soon as<\/a> November 19, though there's also a backup release date of January 22 if it needs more testing.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>If you want to try the new editor, you can <a href=\"https:\/\/wordpress.org\/gutenberg\/\" target=\"_blank\" rel=\"noopener noreferrer\">play around with a live demo here<\/a>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>What Makes A Theme Gutenberg Compatible?<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Gutenberg is probably the biggest update to WordPress since it was introduced in 2002. It is a complete reimagination of how content should be written.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Below, we'll illustrate how we've implemented Gutenberg compatibility features in Astra and some of the cool ways they work amazingly together.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>See Your Front-End Styles In The Gutenberg Editor<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>One of the ways that Gutenberg can offer a more visual editing experience is by bringing the theme's front-end styles into the back-end editor.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>For example, instead of seeing the same generic typography on every WordPress install, you can see your theme's real typography even when you're creating content in the backend.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>To offer that visual experience, Astra makes sure that your content looks identical on the front-end and back-end. You can manage:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4>The Width of the Editor<\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>The width of your content in the editor will be the same as you expect in the frontend.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":29372,\"align\":\"center\",\"linkDestination\":\"custom\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/10\/Editor-Content-Width-in-Gutenberg.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/10\/Editor-Content-Width-in-Gutenberg.png\" alt=\"\" class=\"wp-image-29372\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4>Typography (font choices, font size, etc.)<\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>All the typography settings from the theme are applied to the content in the Gutenberg editor too.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":29373,\"align\":\"center\",\"linkDestination\":\"custom\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/10\/Beautiful-fonts-in-Gutenberg-Astra.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/10\/Beautiful-fonts-in-Gutenberg-Astra.png\" alt=\"\" class=\"wp-image-29373\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4>Colors and Background<\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>The colors and background set within the theme will be fetched and seen in the editor too.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":29374,\"align\":\"center\",\"linkDestination\":\"custom\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/10\/content-control.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/10\/content-control.png\" alt=\"\" class=\"wp-image-29374\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Basically, the typography and colors that you set in the WordPress Customizer will also apply to the Gutenberg Editor.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Enjoy Beautifully Styled Gutenberg Blocks <\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>To help you create more unique content, Gutenberg includes a number of built-in blocks for things like:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>Quotes<\/li><li>Galleries<\/li><li>Files etc.<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>We've made sure that all of these blocks will inherit your Astra Customizer styles so that they'll match the rest of your site.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>So no matter what you build with Gutenberg, it should fit right in!<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Take Advantage Of The New Full-Width Alignment Option <\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>For some blocks, Gutenberg offers a new full-width alignment option that stretches the block's content across the entire visible viewport.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Currently, the following blocks offer the full-width alignment:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>Image<\/li><li>Cover Image<\/li><li>Gallery<\/li><li>Posts<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>However, in order to be able to use this alignment option, your theme needs to specifically enable it.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Well, good news! We've gone ahead and done that in Astra, which means you'll be able to use the new full-width alignment right away.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":29375,\"align\":\"center\",\"linkDestination\":\"custom\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/10\/Screen-Recording-2018-10-25-at-07.16-PM.gif\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/10\/Screen-Recording-2018-10-25-at-07.16-PM.gif\" alt=\"\" class=\"wp-image-29375\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p><em>Note - full-width alignment only works on posts without a sidebar.<\/em><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>Your Astra Theme Settings Are Still Safe And Secure In The Sidebar <\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Finally, just in case you were wondering what's going to happen to the <strong>Astra&nbsp;<\/strong><strong>Settings<\/strong> options for your individual posts and pages, all your settings will still be available in the sidebar once you make the switch to Gutenberg.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You can refer to our knowledge base article to understand the <a href=\"https:\/\/wpastra.com\/docs\/astra-with-gutenberg-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">working of Astra with Gutenberg editor<\/a>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>With Astra, You\u2019ll Hit The Ground Running When WordPress 5.0 Drops <\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>As an <a href=\"https:\/\/wpastra.com\/\">Astra<\/a> user, we want you to be able to hit the ground running as soon as WordPress 5.0 is released, whether that happens in November or January.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Not only have we already implemented all the current best practices for compatibility with the new editor, but we'll also keep a close watch going forward so that we can continue to offer you the best experience possible.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>And One More Thing\u2026 <\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Having built the best set of page builder addons for Beaver Builder, Elementor and WPBakery Page Builder, now it is time to build an extension for the official Page Builder of WordPress \u2014&nbsp;<strong>Gutenberg!<\/strong><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You read that right! Since past few months, we have been working on&nbsp;<a href=\"https:\/\/wordpress.org\/plugins\/ultimate-addons-for-gutenberg\/\"><strong>Ultimate Addons for Gutenberg<\/strong><\/a> that will enhance what is possible with Gutenberg.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Ultimate Addons for Gutenberg will introduce custom blocks such as Section, Heading, Info Box, Post Grid, Google Map, Table, Social Share, Menu, Buttons along with the bunch of ready to import starter templates!<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":29378,\"align\":\"center\",\"linkDestination\":\"custom\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wordpress.org\/plugins\/ultimate-addons-for-gutenberg\/\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/10\/UAGB-blocks.png\" alt=\"\" class=\"wp-image-29378\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>As you can see, the <a href=\"https:\/\/wordpress.org\/plugins\/ultimate-addons-for-gutenberg\/\">Ultimate Addons for Gutenberg<\/a> is already on the development track. And in case if you're wondering,&nbsp;Ultimate Addons for Gutenberg will be included within our Agency package at no extra cost to existing customers!<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Cheers<\/p>\n<!-- \/wp:paragraph -->\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:41:\"https:\/\/wpastra.com\/gutenberg-compatible\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=29358\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=29358\";}}s:6:\"anchor\";s:38:\"working of Astra with Gutenberg editor\";s:15:\"added_by_plugin\";b:0;}}"],"wpil_links_outbound_internal_count":["0"],"wpil_links_outbound_internal_count_data":["a:0:{}"],"wpil_links_outbound_external_count":["5"],"wpil_links_outbound_external_count_data":["a:5:{i:0;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:44:\"https:\/\/wpastra.com\/docs\/container-overview\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:4:\"here\";s:15:\"added_by_plugin\";b:0;}i:1;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:73:\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-boxed-layout.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:116:\"<img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-boxed-layout.png\" alt=\"\" class=\"wp-image-29308\"\/>\";s:15:\"added_by_plugin\";b:0;}i:2;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:77:\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-contained-layout.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:120:\"<img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-contained-layout.png\" alt=\"\" class=\"wp-image-29307\"\/>\";s:15:\"added_by_plugin\";b:0;}i:3;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:72:\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-image-boxed.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:115:\"<img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-image-boxed.png\" alt=\"\" class=\"wp-image-29312\"\/>\";s:15:\"added_by_plugin\";b:0;}i:4;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:76:\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-image-contained.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:119:\"<img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/10\/gutenberg-image-contained.png\" alt=\"\" class=\"wp-image-29311\"\/>\";s:15:\"added_by_plugin\";b:0;}}"],"wpil_sync_report2_time":["2019-10-18T06:56:49+00:00"],"_edit_lock":["1690960481:86"],"_edit_last":["65"],"onesignal_meta_box_present":["1"],"onesignal_send_notification":[""],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"site-sidebar-layout":["default"],"site-content-layout":["default"],"theme-transparent-header-meta":["default"],"_yoast_wpseo_content_score":["60"],"_ppc_meta_key":["a:8:{s:20:\"ppc_key5d92f85d42273\";s:60:\"Images &amp; Names Correctly. Title &amp; Alt Tags are Given\";s:8:\"ppc_key4\";s:15:\"Formatting Done\";s:8:\"ppc_key2\";s:23:\"Featured Image Assigned\";s:8:\"ppc_key3\";s:17:\"Category Selected\";s:8:\"ppc_key5\";s:15:\"Title is Catchy\";s:8:\"ppc_key6\";s:22:\"Social Images Assigned\";s:8:\"ppc_key7\";s:8:\"Done SEO\";s:8:\"ppc_key8\";s:28:\"Spelling and Grammar Checked\";}"],"_yoast_wpseo_title":["How Does Astra Work with the Gutenberg Editor?"],"_ht_kb_post_views_count":["12"],"_ht_kb_usefulness":["0"],"wp_last_modified_info":["September 1, 2022 @ 8:06 PM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"views":["5918"],"helpful":["9"],"unhelpful":["7"],"redirects":["10"],"rank_math_primary_docs_category":[""],"rank_math_title":["How Does Astra Work with the Gutenberg Editor?"],"rank_math_news_sitemap_robots":["index"],"rank_math_robots":["a:1:{i:0;s:5:\"index\";}"],"rank_math_analytic_object_id":["990"],"rank_math_seo_score":["20"],"rank_math_internal_links_processed":["1"],"_wplmi_last_modified":["2022-09-01 20:06:17"],"pfd_related_docs":[""],"rank_math_og_content_image":["a:2:{s:5:\"check\";s:32:\"d28a85ab72c7cd0158df53321432963d\";s:6:\"images\";a:1:{i:0;i:29308;}}"],"_wpml_media_duplicate":["1"],"_trp_automatically_translated_slug_es_ES":["astra-con-editor-gutenberg"],"_uag_page_assets":["a:9:{s:3:\"css\";s:2495:\".wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-top svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-top .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-bottom svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-bottom .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__video-wrap video{opacity: 1;}.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1200px);max-width: var(--inner-content-custom-width);width: 100%;flex-direction: column;align-items: center;justify-content: center;flex-wrap: nowrap;row-gap: 0px;column-gap: 0px;}.wp-block-uagb-container.uagb-block-debf2792{box-shadow: 0px 0px   #00000070 ;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;overflow: visible;border-color: inherit;row-gap: 0px;column-gap: 0px;}@media only screen and (max-width: 976px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1024px);max-width: var(--inner-content-custom-width);width: 100%;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}@media only screen and (max-width: 767px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 767px);max-width: var(--inner-content-custom-width);width: 100%;flex-wrap: wrap;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}\";s:2:\"js\";s:0:\"\";s:18:\"current_block_list\";a:5:{i:0;s:14:\"core\/paragraph\";i:1;s:12:\"core\/heading\";i:2;s:10:\"core\/image\";i:3;s:14:\"uagb\/container\";i:4;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1777222391\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"]},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"Anjali","author_link":"https:\/\/git-staging.wpastra.com\/es\/author\/anjalic\/"},"uagb_comment_info":0,"uagb_excerpt":"Astra gives you a great experience of building a page with Gutenberg editor. Below are the points that&nbsp;explain how Astra suits&nbsp;best with Gutenberg&nbsp;editor. Support Container Layout&nbsp; Container layout set for Astra from the customizer will be applied to the Gutenberg editor&nbsp;as well. So that user will get the experience&nbsp;of how the final page will look&hellip;","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/29282"}],"collection":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/comments?post=29282"}],"version-history":[{"count":0,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/29282\/revisions"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=29282"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_category?post=29282"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_tag?post=29282"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}