Dev Stories

Till the time WordPress came into existence it’s visual editor remained pretty unchanged and that’s not a bad thing, but other platforms like Medium got popular in between and they are providing a unique layout for writing and expressing your thoughts. So, developers, contributors, and volunteers came together and started working on the new rich content editor called Gutenberg.

Let’s go through a ride to know what exactly Gutenberg is and how one can use it and can help in its betterment.

What is Gutenberg?

If you exactly wanted to see how it looks like and how a writer can use it just look at this link. You will feel like you are using some builder tool to develop and design a page and that’s what it is all about – A fantastic new post/page editor 😎

It’s basically named after Johannes Gutenberg, who introduced printing to Europe with the printing press. In the new editor, you will see that there are multiple blocks that you can use to create the page or post which was initially not possible in such manner without any builder tool like Visual Composer or Elementor.
Even developers were needed to create shortcode or HTML to get such kind of view on the page and that’s now possible to do with the editor itself – Awesome, Right?

Gutenberg is still in testing phase so it should not be used on live site directly but can be tested on the staging environment. Since it is still in testing phase so it requires people to install the plugin and let the development team know whether it is good or not.

Note: Anyone who wants to leave feedback can leave comments here or can open an issue on GitHub and can also join the #core-editor channel.

Most importantly, the current version of Gutenberg can be tested with the WordPress version 4.8 and it will become the default editor from WordPress 5.0 but you will still have the option to install the classic editor.

Installing Gutenberg

Please download the latest version of Gutenberg from the WordPress repository or by searching for it within your WordPress dashboard under “Add New” plugins. As suggested it is still not ready for the live environment so please do activate on test site/ staging site only.

Once you will activate it you will see a new link under your posts named gutenberg that allows opening the Gutenberg editor. And rest of the layout of the editor you have already seen here. You can play with the editor more to explore more and you will feel really blessed that you saw this change in WordPress 😆

Let’s see how it looks like while editing the post/page.

What’s there for developers?

Since this new editor is all about blocks and is based on react js there is a lot to do for developers. So guys and girls WordPress itself have a wonderful handbook which you can refer to.

Let’s see how one can create its own block as you saw in the demo. So we are going to start with a  simple example of a new block type which displays a styled message in a post.

Blocks containing static content are implemented entirely in JavaScript using the registerBlockType function. This function specifies the structure of the block and describes the behavior to let the editor know that how it will appear.

Enqueuing Block Scripts

While the block’s editor behaviors are implemented in JavaScript, you’ll need to register your block server-side to ensure that the script is enqueued when the editor loads.

function gutenberg_para_block() {
    wp_register_script(
        'gutenberg-para-script',
        plugins_url( 'para/block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element' )
    );

    register_block_type( 'gutenberg-para-block/hello-gutenberg-para', array(
        'editor_script' => 'gutenberg-para-script',
    ) );
}
add_action( 'init', 'gutenberg_para_block' );

You can see these two ‘wp-blocks’, ‘wp-element’ script dependencies:

• wp-blocks includes block type registration and related functions
• wp-element includes the WordPress Element abstraction for describing the structure of your blocks

Registering the Block

So now since the script is included, let’s see the implementation.

var el = wp.element.createElement,
    registerBlockType = wp.blocks.registerBlockType,
    blockStyle = { backgroundColor: '#900', color: '#fff', padding: '20px' };

registerBlockType( 'gutenberg-para-block/hello-gutenberg-para', {
    title: 'Hello Gutenberg',

    icon: 'universal-access-alt',

    category: 'layout',

    edit: function() {
        return el( 'p', { style: blockStyle }, 'Hello editor.' );
    },

    save: function() {
        return el( 'p', { style: blockStyle }, 'Hello saved content.' );
    },
} );

Now, you will see that block is listed in the editor. Is’nt it simple?

References

• https://wordpress.org/gutenberg/

I know there is a lot to be told and a lot to be known so if you have any queries or feedback please do let me know.

Thanks for reading 🙂

Hi! WP Friends,

This time I am going to share my views on the very basic concepts of translation in WordPress. I have got this idea while working on a client project. Hopefully, it will help you guys.

Recently I was working with a client and her task list had some translation fixes too. As per the basic understandings she used the plugin called Loco Translate but was not able to translate some of the strings so she asked us to do the job for her.

When we started on it we found that actually loco is not able to translate some of the strings and even gettext filter was not working in this case so I thought to look at the code of plugin where the static strings were written and even after seeing the code I did not get the idea what’s wrong there then I studied about the function and found that this is not similar to other functions that we use to echo static strings. Let’s see what I did to get the translation working.

Firstly, let’s see what are the functions that we normally use in WordPress to echo static strings:

• __()
• _e()
• _x()
• ecs_html_e()
• esc_html_x()
• esc_html__()
• esc_html()
• _n()

Functions like _e() __() esc_html_e() etc. do call a function translate(), view trac: https://core.trac.wordpress.org/browser/tags/4.9/src/wp-includes/l10n.php#L247,
and the strings echoed by using these functions can easily be translated using loco translate, PO Editor or gettext filter but when we use functions like _x(), esc_html_x() they call a function translate_with_gettext_context(), view trac: https://core.trac.wordpress.org/browser/tags/4.9/src/wp-includes/l10n.php#L294 and these are the strings which creates issues with loco translate and can not be even translated using gettext filter.

For the solution, I found that the function https://developer.wordpress.org/reference/functions/translate_with_gettext_context/ provides a filter gettext_with_context to translate strings and how that works let’s see in an example:

echo sprintf( _x( ‘Please go back and complete the previous %s.’, ‘placeholder lesson’, ‘learndash’ ), LearnDash_Custom_Label::label_to_lower(‘lesson’) );

Here we can see that _x() is used and we were not able to translate these strings using loco translate. To make it more clear, the function have a static string then the context and then text domain, So how we did it:

add_filter( 'gettext_with_context', 'ps_translate_string',10,4 );

function ps_translate_string($translation, $text, $context, $domain){
   if($domain=='learndash' ){
      if ($text == 'Please go back and complete the previous %s.' && $context=='placeholder lesson') {
          $translation = "Your Translated String";
      }
   }
 return $translation;
}

And now you will see that your string gets translated.

This might be the solution for many of the developers and clients there facing such kind of translation issues.

Please feel free to leave your feedback or queries, I will respond to them ASAP.