25 May 2018,
 Off
Organic Traffic

Gutenberg is a new editor for WordPress that will totally replace the current TinyMCE-powered editor. It is an ambitious project that will arguably change WordPress in many ways and would affect both regular end-users and developers, specifically, those who depend on the editor screen for working on WordPress. Here is how it looks.

It’s obvious that it’s inspired by the Medium editor UI.

Gutenberg also introduces a new paradigm in WordPress called “Block”.

“Block” is the abstract term used to describe units of markup that are composed form the content or layout of a webpage. The idea combines concepts of what in WordPress today we achieve with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.

Read Also: How to Customize WordPress Editor Styles

Setting Up the Project

Knowing the fact that Gutenberg is built on top of React, some developers are worried that the barrier is too high for entry-level developers for developing Gutenberg.

Setting up React.js could be quite time-consuming and confusing if you’ve just getting started with it. You’ll need at least, JSX transformer, Babel, depending on your code you might need some Babel plugins, and a Bundler like Webpack, Rollup, or Parcel.

Fortunately, some people within WordPress community stepped-up and are trying to make developing Gutenberg as easy as possible for everyone to follow. Today, we have a tool that will generate a Gutenberg boilerplate so we can start writing code right away instead of befuddling with the tools and the configurations.

Create Guten Block

The create-guten-block is an initiate project by Ahmad Awais. It’s a zero-configuration tool kit (#0CJS) that will allow you to develop Gutenberg block with some modern stacks preset including React, Webpack, ESNext, Babel, ESLint, and Sass. Follow the instruction to get started with Create Guten Block.

Using ES5 (ECMAScript 5)

Using all these tools to create a simple “hello-world” block might seem just too much. If you like to keep your stacks lean, you can actually develop a Gutenberg block using a plain good ol’ ECMAScript 5 that you might already have familiarity with. If you have WP-CLI 1.5.0 installed on your computer, you can simply run…

wp scaffold block  [--title=] [--dashicon=<dashicon>] [--category=<category>] [--theme] [--plugin=<plugin>] [--force]</pre>
<p>…to <strong>generate the Gutenberg block boilerplate to your plugin or theme</strong>. This approach is more sensible, particularly, for existing plugins and themes that you’ve developed before the Gutenberg era.</p>
<p>Instead of creating a new plugin to accommodate the Gutenberg blocks, you might want to integrate the blocks to your plugins or the themes. And to make this tutorial easy to follow for everyone, <strong>we’ll be using ECMAScript 5 with WP-CLI</strong>.</p>
<h4>Registering a New Block</h4>
<p>Gutenberg is currently developed as a plugin and will be merged to WordPress 5.0 whenever the team feels it’s ready. So, for the time being, you will need to install it from the <strong>Plugins page in <code>wp-admin</code></strong>. Once you have installed and activated it, run the following command in the Terminal or the Command Prompt if you’re on a Windows machine.</p>
<pre name="code">
wp scaffold block series --title="HTML5 Series" --theme</pre>
<p>This command will generate a Block to the currently active theme. Our Block will consists of the following files:</p>
<pre name="code">
.
├── series
│   ├── block.js
│   ├── editor.css
│   └── style.css
└── series.php
</pre>
<p>Let’s load the main file of our blocks in the <code>functions.php</code> of our theme:</p>
<pre name="code">
if ( function_exists( 'register_block_type' ) ) {
	require get_template_directory() . '/blocks/series.php';
}
</pre>
<p>Notice that we enclose the file loading with a conditional. This ensures <strong>compatibility with previous WordPress version that our block is only loaded when Gutenberg is present</strong>. Our Block should now be available within the Gutenberg interface.</p>
<figure data-lazy=""><span><span></span></span></figure>
<p>This how it looks when we insert the block.</p>
<figure data-lazy=""><span><span></span></span></figure>
<h3>Gutenberg APIs</h3>
<p>Gutenberg introduces two sets of APIs to register a new Block. If we look at the <code>series.php</code>, we will find the following code that registers our new Block. It also <strong>loads the stylesheet and JavaScripts on the front-end and the 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>As we can see above, our Block is named <code>twentyseventeen/series</code>, the Block name must be unique and <a href="https://en.wikipedia.org/wiki/Namespace" target="_blank">namespaced</a> to avoid collision with the other Blocks brought by the other plugins.</p><div class="2gRsFlih" style="clear:both;float:left;width:100%;margin:0 0 20px 0;"><strong><a title="Get Organic Traffic" href="http://www.realvisits.org/pricing">Need Clicks? Need Growth Hacking ? Need Sales? Need Panda Recovery? Need Google & Alexa Rank Boost ? <br>
We offer Organic Traffic as a service, get one of our packages and we send you up to 240k Organic Visits / month, with a positive impact on SERPs, to get higher page-ranks, to boost keyword rankings and to increase your website visibility online. We offer the solution in Growth Hacking, are you ready to start?</a></strong>
<a title="Get Organic Traffic Now" href="http://www.realvisits.org/" target="_blank"><img src="http://www.realvisits.org/wp-content/uploads/2014/10/seo-realvisits.png" <img class="size-medium wp-image-7548 aligncenter" alt="Organic Traffic" width="600" height="100" /></a></div>
<p>Furthermore, <strong>Gutenberg provides a set of new JavaScript APIs to interact with the “Block” interface</strong> in the editor. Since the API is quite abundant, we’ll be focusing on some specifics that I think you should know to get a simple yet functioning Gutenberg Block.</p>
<h4><code>wp.blocks.registerBlockType</code></h4>
<p>First, we will be looking into <code>wp.blocks.registerBlockType</code>. This function is used to <strong>register a new “Block” to the Gutenberg editor</strong>. It requires two arguments. The first argument is the Block name which should follow name registered in the <code>register_block_type</code> function in the PHP side. The second argument is an <strong>Object defining the Block properties</strong> like title, category, and a couple of functions to render the Block interface.</p>
<pre name="code">
var registerBlockType = wp.blocks.registerBlockType;

registerBlockType( 'twentyseventeen/series', {
    title: __( 'HTML5 Series' ),
    category: 'widgets',
    keywords: [ 'html' ],
    edit: function( props ) { },
    save: function( props ) { }
} );
</pre>
<h4><code>wp.element.createElement</code></h4>
<p>This function allows you to create the element within the “Block” in the post editor. The <code>wp.element.createElement</code> function is basically an abstraction of the <a href="https://reactjs.org/docs/react-api.html#createelement">React <code>createElement()</code> function</a> thus it accepts the same set of arguments. The first argument takes the type of the element for example a paragraph, a <code>span</code>, or a <code>div</code> as shown below:</p>
<pre name="code">wp.element.createElement('div');</pre>
<p>We can <strong>alias the function into a variable</strong> so it’s shorter to write. For example:</p>
<pre name="code">
var el = wp.element.createElement;
el('div');</pre>
<p>If you <strong>prefer using the new ES6 syntax</strong>, you can also do it this way:</p>
<pre name="code">
const { createElement: el } = wp.element;
el('div');</pre>
<p>We can also <strong>add the element attributes</strong> such as the <code>class</code> name or <code>id</code> on the second parameter as follows:</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> that we created would not make sense without the content. We can <strong>add the content on the argument of the third parameter</strong>:</p>
<pre name="code">
var el = wp.element.createElement;
el('p', {
    'class': 'series-html5',
    'id': 'series-html-post-id-001'
}, 'This article is part of our "HTML5/CSS3 Tutorials series" - dedicated to help make you a better designer and/or developer. Click here to see more articles from the same series' );</pre>
<h4><code>wp.components</code></h4>
<p>The <code>wp.components</code> contain a collection of, as the name implies, the Gutenberg components. These components technically are <a target="_blank" href="https://reactjs.org/docs/components-and-props.html">React custom components</a> which include the Button, Popover, Spinner, Tooltip, and a bunch of others. We can <strong>reuse these components into our own Block</strong>. In the following example, we add a button component.</p>
<pre name="code">
var Button = wp.components.Button;
el( Button, {
    'class': 'download-button',
}, 'Download' );</pre>
<h4>Attributes</h4>
<p>The Attributes is the way to store the data in our Block, this data could be like the content, the colors, the alignments, the URL, etc. We can get the attributes from the Properties passed on the <code>edit()</code> function, as follows:</p>
<pre name="code">
edit: function( props ) {
    var content = props.attributes.seriesContent;

    return el( 'div', {
        'class': 'series-html5',
        'id': 'series-html-post-id-001'
    }, content );
}</pre>
<p>To update the Attributes, we use the <code>setAttributes()</code> function. Typically we would change the content on certain action such as when a button is clicked, an input is filled, an option is selected, etc. In the following example, we use it to add a <strong>fallback</strong> content of our Block in case something unexpected happened to our <code>seriesContent</code> Attribute.</p>
<pre name="code">
edit: function( props ) {

    if ( typeof props.attributes.seriesContent === 'undefined' || ! props.attributes.seriesContent ) {
        props.setAttribute({
            seriesContent: 'Hello World! Here is the fallback content.'
        })
    }

    var content = props.attributes.seriesContent;

    return [
        el( 'div', {
            'class': 'series-html5',
            'id': 'series-html-post-id-001'
        }, content ),
    ];
}
</pre>
<h4>Saving the Block</h4>
<p>The <code>save()</code> function works similarly to the <code>edit()</code>, except it defines the content of our Block to save to the post database. Saving the Block content is quite straightforward, as we can see below:</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>What’s Next?</h3>
<p>Gutenberg will change WordPress ecosystem for the better (or possibly the worse). It enables developers to <strong>adopt a new way of developing WordPress plugins and themes</strong>. Gutenberg is just a start. Soon the “Block” paradigm will be expanded to other areas of WordPress such as the Settings APIs and the Widgets.</p>
<p><a href="https://www.youtube.com/watch?v=KrZx4IY1IgU">Learn JavaScript Deeply</a>; it’s the only way to get into Gutenberg and stay relevant to the future in WordPress industry. If you’re already familiar with the JavaScript basics, the quirks, the functions, the tools, the goods and the bads, I’m really sure you will get up to speed with Gutenberg.</p>
<p>As mentioned, Gutenberg exposes an abundance of APIs, enough to do almost anything to your Block. You can choose whether to <strong>code your Block with a plain old JavaScript, JavaScript with ES6 syntax, React, or even Vue</strong>.</p>
<h4>Ideas and Inspirations</h4>
<p>I’ve created a very (very) simple Gutenberg Block that you can find in the <a href="https://github.com/hongkiat/wordpress-gutenberg-block" target="_blank"> repository of our Github account</a>. Furthermore, I’ve also put together a number of repositories from where you can drive inspiration on building a more complex Block.</p>
<ul>
<li><a href="https://github.com/imath/gutenblocks" target="_blank">Gutenblocks</a> – A collection of Blocks by Mathieu Viet written in JavaScript with ES5 Syntax</li>
<li><a href="https://github.com/Automattic/jetpack/labels/Gutenberg" target="_blank">Jetpack Gutenblocks Project</a> – a collection of Blocks bundled in Jetpack</li>
<li><a href="https://gitlab.com/caldera-labs/gutenberg-examples">A List of Examples of Gutenberg Implementation</a> including with Vue.js</li>
</ul>
<h3>Further Reference</h3>
<ul>
<li><a href="https://github.com/WordPress/gutenberg">Gutenberg Official Repository</a></li>
<li><a href="https://wordpress.org/gutenberg/handbook/">Gutenberg Handbook</a></li>
</ul>
<p>The post <a rel="nofollow" href="https://www.hongkiat.com/blog/all-you-need-to-know-about-wordpress-gutenberg-editor/">Gutenberg: All You Need to Know About WordPress’ Latest Editor</a> appeared first on <a rel="nofollow" href="https://www.hongkiat.com/blog">Hongkiat</a>.</p>
<a title="Buy Organic Traffic / Increase Web Traffic" href="http://www.realvisits.org/pricing" target="_blank"><img src="http://www.realvisits.org/wp-content/uploads/2014/10/banner_posts.png" <img class="size-medium wp-image-7548 aligncenter" alt="Buy Organic Traffic" width="600" height="100" /></a>
</div>
</div>
<div id="comments">
<p class="nocomments">Comments are closed.</p>
</div><!-- #comments -->
</div><div class="clearfix"></div>	
<!-- Sidebar -->
</div>
</div>

<!-- #Footer -->		
<footer id="Footer">
<div class="container widgets">
</div>
<div class="container">
<div class="column one bottom_addons">
<div class="copyrights">
<p>
© 2014-2020 <strong>Organic Traffic Service</strong>. All Rights Reserved.<br />
Powered by <a target="_blank" href="https://www.realvisits.org">RealVisits</a>. Created by <a target="_blank" href="https://www.realvisits.org">RV Organic Traffic Service</a>
</p>
</div>
<div class="menu_bottom">
<ul id="menu-footer-menu" class="menu"><li id="menu-item-6069" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6069"><a href="https://www.realvisits.org/pricing/">Pricing</a></li>
<li id="menu-item-6146" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-6146"><a href="https://www.realvisits.org/whats-new/">What’s New?</a></li>
<li id="menu-item-11514" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11514"><a href="https://www.realvisits.org/terms-and-conditions/">Terms and Conditions</a></li>
<li id="menu-item-27228" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-27228"><a href="https://www.realvisits.org/privacy-policy/">Privacy & Cookies Policy</a></li>
<li id="menu-item-6064" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6064"><a href="https://www.realvisits.org/contact/">Contact Us</a></li>
</ul>					</div>
</div>
</div>
</footer>
</div>
<a id="back_to_top" href="#"><i class="icon-circle-arrow-up"></i></a>	
<!-- wp_footer() -->
<div id="cookie-law-info-bar"><span>This website uses cookies to improve your experience. We'll assume you're ok with this. Please accept our Cookie & Privacy Policy <a href="#" data-cli_action="accept" id="cookie_action_close_header"  class="medium cli-plugin-button cli-plugin-main-button cookie_action_close_header cli_action_button" >Accept</a> <a href="https://www.realvisits.org/privacy-policy/" id="CONSTANT_OPEN_URL" target="_blank"  class="cli-plugin-main-link"  >Read More</a></span></div><div id="cookie-law-info-again"><span id="cookie_hdr_showagain">Privacy & Cookies Policy</span></div><div class="cli-modal-backdrop cli-fade cli-settings-overlay"></div>
<div class="cli-modal-backdrop cli-fade cli-popupbar-overlay"></div>
<div class="ws-plugin--s2member-s-badge">
<a href="http://www.s2member.com/" onclick="window.open('http://www.s2member.com/s-badges/s-details.php?v=2&site_url=https%3A%2F%2Fwww.realvisits.org', '_popup', 'width=770,height=720,left='+((screen.width/2)-(770/2))+',screenX='+((screen.width/2)-(770/2))+',top='+((screen.height/2)-(720/2))+',screenY='+((screen.height/2)-(720/2))+',location=0,menubar=0,toolbar=0,scrollbars=0,resizable=1'); return false;" title="s2Member®"><img src="//www.s2member.com/s-badges/s-badge.php?v=2&site_url=https%3A%2F%2Fwww.realvisits.org" width="180" height="58" style="border:0; width:180px; height:58px;" alt="s2Member®" title="s2Member® (Security for WordPress®)" /></a>
</div> <center><span id="siteseal"></span></center><!-- Panel -->
<div id="toppanel" > 
<!-- Login / Register links on top -->
<div class="tab">
<ul class="login"  style="width:150px;">
<!-- Login / Register -->
<li><a id="login" href="#"><small>Have an account?</small> Log In</a></li>
</ul>
</div>
<!-- / top -->
</div>
<!--END panel -->
<!-- Login Form -->
<div id="loginpanel" style="display:none;right:0;">
<div class="content">
<form class="clearfix" action="https://www.realvisits.org/wp-login.php" method="post">
<label class="grey" for="log">Login Name:</label>
<input class="field" type="text" name="log" id="log" value="" size="23" />
<label class="grey" for="pwd">Password:</label>
<input class="field" type="password" name="pwd" id="pwd" size="23" />
<label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember Me</label>
<div class="clear"></div>
<input type="submit" name="submit" value="Login" class="bt_login" />
<input type="hidden" name="redirect_to" value="/gutenberg-all-you-need-to-know-about-wordpress-latest-editor/"/>
<a class="lost-pwd" href="https://www.realvisits.org/wp-login.php?action=lostpassword">Lost Password</a>
</form>
</div>
</div>
<!-- /login -->
<noscript id="wpfc-google-fonts"><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Raleway:300,400,400italic,700" >
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Raleway:300,400,400italic,700" >
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Raleway:300,400,400italic,700" >
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Patua+One" >
</noscript>
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-content/plugins/cookie-law-info/public/js/cookie-law-info-public.js?ver=1.7.0'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-content/plugins/revslider/public/assets/js/jquery.themepunch.tools.min.js?ver=5.4.6'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-content/plugins/revslider/public/assets/js/jquery.themepunch.revolution.min.js?ver=5.4.6'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-content/plugins/sidebar-login/assets/js/jquery.blockUI.min.js?ver=2.70'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-content/plugins/sidebar-login/assets/js/sidebar-login.min.js?ver=2.7.3'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-content/plugins/duracelltomi-google-tag-manager/js/gtm4wp-form-move-tracker.js?ver=1.9'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-content/plugins/wp-sliding-login-register-panel/js/slide.js?ver=5.2'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-includes/js/jquery/ui/core.min.js?ver=1.11.4'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-includes/js/jquery/ui/widget.min.js?ver=1.11.4'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-includes/js/jquery/ui/mouse.min.js?ver=1.11.4'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-includes/js/jquery/ui/sortable.min.js?ver=1.11.4'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-includes/js/jquery/ui/tabs.min.js?ver=1.11.4'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-includes/js/jquery/ui/accordion.min.js?ver=1.11.4'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-content/themes/pindol/js/fancybox/jquery.fancybox-1.3.4.js?ver=1.6'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-content/themes/pindol/js/sliders/responsiveslides.js?ver=1.6'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-content/themes/pindol/js/sliders/jquery.jcarousel.min.js?ver=1.6'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-content/themes/pindol/js/jquery.isotope.min.js?ver=1.6'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-content/themes/pindol/js/jquery.hoverdir.js?ver=1.6'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-content/themes/pindol/js/mfn-menu.js?ver=1.6'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-includes/js/jquery/jquery.form.min.js?ver=4.2.1'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-content/themes/pindol/js/scripts.js?ver=1.6'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-includes/js/comment-reply.min.js?ver=5.2'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-content/plugins/nice-login-register-widget/js/pw-login-widget.js?ver=1.3.10'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-content/plugins/nice-login-register-widget/js/ajax-authentication.js?ver=1.3.10'></script> -->
<!-- <script type='text/javascript' data-cfasync="false" src='https://www.realvisits.org/wp-content/plugins/s2member/s2member-o.php?ws_plugin__s2member_js_w_globals=1&qcABC=1&ver=170722-170722-4144144436'></script> -->
<!-- <script type='text/javascript' src='https://www.realvisits.org/wp-includes/js/wp-embed.min.js?ver=5.2'></script> -->
<script>document.addEventListener('DOMContentLoaded',function(){function wpfcgl(){var wgh=document.querySelector('noscript#wpfc-google-fonts').innerText, wgha=wgh.match(/<link[^\>]+>/gi);for(i=0;i<wgha.length;i++){var wrpr=document.createElement('div');wrpr.innerHTML=wgha[i];document.body.appendChild(wrpr.firstChild);}}wpfcgl();});</script>
<script type="text/javascript">var switchTo5x=true;</script>
<script type='text/javascript'>
/* <![CDATA[ */
var Cli_Data = {"nn_cookie_ids":[],"cookielist":[]};
var log_object = {"ajax_url":"https:\/\/www.realvisits.org\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>
<script type='text/javascript'>
/* <![CDATA[ */
var sidebar_login_params = {"ajax_url":"https:\/\/www.realvisits.org\/wp-admin\/admin-ajax.php","force_ssl_admin":"1","is_ssl":"1","i18n_username_required":"Please enter your username","i18n_password_required":"Please enter your password","error_class":"sidebar_login_error"};
/* ]]> */
</script>
<script type="text/javascript">
var cli_flush_cache=1;
</script>
<script type='text/javascript'>
/* <![CDATA[ */
var ajax_object = {"ajax_url":"https:\/\/www.realvisits.org\/wp-admin\/admin-ajax.php"};
var pwLogWi_messages = {"ajax_request_fails":"Ajax request fails","ajax_unknown_error":"An unknown error occurred while trying to connect to the server.<br>Please refresh the page and try again."};
/* ]]> */
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<script type="application/ld+json">{"@context":"https:\/\/schema.org\/","@type":"Article","@id":"https:\/\/www.realvisits.org\/gutenberg-all-you-need-to-know-about-wordpress-latest-editor\/","url":"https:\/\/www.realvisits.org\/gutenberg-all-you-need-to-know-about-wordpress-latest-editor\/","name":"Gutenberg: All You Need to Know About WordPress\u2019 Latest Editor | Organic","headline":"Gutenberg is a new editor for WordPress that will totally replace the current TinyMCE-powered editor. It is an","mainEntityOfPage":{"@type":"WebPage","url":"https:\/\/www.realvisits.org\/gutenberg-all-you-need-to-know-about-wordpress-latest-editor\/"},"datePublished":"2018-05-25T02:13:12+00:00","dateModified":"2018-05-25T02:13:12+00:00","author":{"@type":"Person","url":"http:\/\/www.realvisits.org","name":"admin"},"publisher":{"@type":"Organization","url":"https:\/\/www.realvisits.org\/gutenberg-all-you-need-to-know-about-wordpress-latest-editor\/","name":"Real Visits : Organic Traffic Service","logo":{"@type":"ImageObject","url":"https:\/\/www.realvisits.org\/wp-content\/uploads\/2014\/05\/Logo-RealVisits-final.png"},"description":"We offer the best solution to boost your overall organic traffic. We can send millions of visits to your website and your organic traffic will rise dramatically."}}</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-6568e777-919c-a5dd-ac31-98a6fa2e6b2d"}); </script>
<script data-cfasync="false" type="text/javascript">//<![CDATA[
var gtm4wp_datalayer_name = "dataLayer";
var dataLayer = dataLayer || [];
//]]>
</script>
<script src='//www.realvisits.org/wp-content/cache/wpfc-minified/jy0pylrk/c0cig.js' type="text/javascript"></script>
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:1067438,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:1067438,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
<script data-cfasync="false" type="text/javascript">//<![CDATA[
dataLayer.push({"pageTitle":"Gutenberg: All You Need to Know About WordPress’ Latest Editor | ","pagePostType":"post","pagePostType2":"single-post","pageCategory":["blog","howto","internetmarketing","news","real-visits","seo","wordpress","wordpress-editors"],"pagePostAuthor":"admin"});//]]>
</script>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript">function setREVStartSize(e){
try{ var i=jQuery(window).width(),t=9999,r=0,n=0,l=0,f=0,s=0,h=0;					
if(e.responsiveLevels&&(jQuery.each(e.responsiveLevels,function(e,f){f>i&&(t=r=f,l=e),i>f&&f>r&&(r=f,n=e)}),t>r&&(l=n)),f=e.gridheight[l]||e.gridheight[0]||e.gridheight,s=e.gridwidth[l]||e.gridwidth[0]||e.gridwidth,h=i/s,h=h>1?1:h,f=Math.round(h*f),"fullscreen"==e.sliderLayout){var u=(e.c.width(),jQuery(window).height());if(void 0!=e.fullScreenOffsetContainer){var c=e.fullScreenOffsetContainer.split(",");if (c) jQuery.each(c,function(e,i){u=jQuery(i).length>0?u-jQuery(i).outerHeight(!0):u}),e.fullScreenOffset.split("%").length>1&&void 0!=e.fullScreenOffset&&e.fullScreenOffset.length>0?u-=jQuery(window).height()*parseInt(e.fullScreenOffset,0)/100:void 0!=e.fullScreenOffset&&e.fullScreenOffset.length>0&&(u-=parseInt(e.fullScreenOffset,0))}f=u}else void 0!=e.minHeight&&f<e.minHeight&&(f=e.minHeight);e.c.closest(".rev_slider_wrapper").css({height:f})					
}catch(d){console.log("Failure at Presize of Slider:"+d)}
};</script>
<script type="text/javascript">
//<![CDATA[
cli_cookiebar_settings='{"animate_speed_hide":"500","animate_speed_show":"500","background":"#fff","border":"#444","border_on":false,"button_1_button_colour":"#000","button_1_button_hover":"#000000","button_1_link_colour":"#fff","button_1_as_button":true,"button_1_new_win":false,"button_2_button_colour":"#333","button_2_button_hover":"#292929","button_2_link_colour":"#444","button_2_as_button":false,"button_3_button_colour":"#000","button_3_button_hover":"#000000","button_3_link_colour":"#fff","button_3_as_button":true,"button_3_new_win":false,"button_4_button_colour":"#000","button_4_button_hover":"#000000","button_4_link_colour":"#fff","button_4_as_button":true,"font_family":"inherit","header_fix":false,"notify_animate_hide":true,"notify_animate_show":false,"notify_div_id":"#cookie-law-info-bar","notify_position_horizontal":"right","notify_position_vertical":"bottom","scroll_close":false,"scroll_close_reload":false,"accept_close_reload":false,"reject_close_reload":false,"showagain_tab":true,"showagain_background":"#fff","showagain_border":"#000","showagain_div_id":"#cookie-law-info-again","showagain_x_position":"100px","text":"#000","show_once_yn":false,"show_once":"10000","logging_on":false,"as_popup":false,"popup_overlay":true,"bar_heading_text":""}';
//]]>
</script>
<script async type="text/javascript" src="https://seal.godaddy.com/getSeal?sealID=Ts33oMabuc9uK2NBIndozaYvVSxKbbAHBYgYJkHK74PRoKb9jxWCWE8vkPOY"></script>
<script>
var getElementsByClassName=function(a,b,c){if(document.getElementsByClassName){getElementsByClassName=function(a,b,c){c=c||document;var d=c.getElementsByClassName(a),e=b?new RegExp("\\b"+b+"\\b","i"):null,f=[],g;for(var h=0,i=d.length;h<i;h+=1){g=d[h];if(!e||e.test(g.nodeName)){f.push(g)}}return f}}else if(document.evaluate){getElementsByClassName=function(a,b,c){b=b||"*";c=c||document;var d=a.split(" "),e="",f="http://www.w3.org/1999/xhtml",g=document.documentElement.namespaceURI===f?f:null,h=[],i,j;for(var k=0,l=d.length;k<l;k+=1){e+="[contains(concat(' ', @class, ' '), ' "+d[k]+" ')]"}try{i=document.evaluate(".//"+b+e,c,g,0,null)}catch(m){i=document.evaluate(".//"+b+e,c,null,0,null)}while(j=i.iterateNext()){h.push(j)}return h}}else{getElementsByClassName=function(a,b,c){b=b||"*";c=c||document;var d=a.split(" "),e=[],f=b==="*"&&c.all?c.all:c.getElementsByTagName(b),g,h=[],i;for(var j=0,k=d.length;j<k;j+=1){e.push(new RegExp("(^|\\s)"+d[j]+"(\\s|$)"))}for(var l=0,m=f.length;l<m;l+=1){g=f[l];i=false;for(var n=0,o=e.length;n<o;n+=1){i=e[n].test(g.className);if(!i){break}}if(i){h.push(g)}}return h}}return getElementsByClassName(a,b,c)},
dropdowns = getElementsByClassName( 'dropdown-menu' );
for ( i=0; i<dropdowns.length; i++ )
dropdowns[i].onchange = function(){ if ( this.value != '' ) window.location.href = this.value; }
</script>
<script defer src='//www.realvisits.org/wp-content/cache/wpfc-minified/g27ej9lx/abz5p.js' type="text/javascript"></script>
<script type="text/javascript">
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/www.realvisits.org\/wp-includes\/js\/wp-emoji-release.min.js?ver=5.2"}};
!function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55357,56424,55356,57342,8205,55358,56605,8205,55357,56424,55356,57340],[55357,56424,55356,57342,8203,55358,56605,8203,55357,56424,55356,57340]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings);
</script>
</body>
</html><!-- WP Fastest Cache file was created in 1.2029020786285 seconds, on 18-10-19 3:24:01 --><!-- via php -->