Month: January 2019

As I dedicate more time toward Gutenberg Phase 2, I realize, what better way to understand some of the core concepts of Gutenberg than by building my own block. Sure I’ve helped build some Jetpack blocks recently, but that was really more teamwork than me soloing through the endeavor on my own. I learned a lot about basic Gutenberg design, but not until now did I learn the nitty-gritty behind the development process.

Source: Creating the p5.js Gutenberg Block

Source: Eloquent JavaScript

If you’re building custom themes for clients, you should be adding Gutenberg support right now! Make sure your client’s transition to the new editor is as seamless as possible.

Source: Getting your theme ready for Gutenberg – Bill Erickson

There is a moment in each team’s life in which it needs to decide what code style it’s going to use. After many hours of flame war…

Source: Your last ESLint config – Tomasz Netczuk – Medium

The new WordPress block editor includes two new alignment options. To take advantage of the new alignment options, your theme must first support them. Include add_theme_support( ‘align-wide’ ) in your…

Source: Full and wide alignment in Gutenberg – Bill Erickson

Gutenberg Block Building Beginner’s Guide

Source: How to Build Gutenberg Blocks Using JSX | ModularWP

Regular expressions are a powerful tool that should be in every developer’s tool belt. They can match against a string of characters based on very complex

Source: 30 Useful Regex Code Snippets for Web Developers – Hongkiat

Exploring the Blocks API

build a block with php

scaffold the plugin https://developer.wordpress.org/cli/commands/scaffold/block/

v<?php
 /**
 Functions to register client-side assets (scripts and stylesheets) for the
 Gutenberg block.
 *
 @package exploring-blocks-api
 */ 
 /**
 Registers all block assets so that they can be enqueued through Gutenberg in
 the corresponding context.
 *
 @see https://wordpress.org/gutenberg/handbook/blocks/writing-your-first-block-type/#enqueuing-block-scripts
 */
 function exploring_blocks_shortcode_block_init() {
 // Skip block registration if Gutenberg is not enabled/merged.
 if ( ! function_exists( 'register_block_type' ) ) {
     return;
 }
 $dir = dirname( FILE );
 $index_js = 'exploring-blocks-shortcode/index.js';
 wp_register_script(
     'exploring-blocks-shortcode-block-editor',
     plugins_url( $index_js, FILE ),
     array(
         'wp-blocks',
         'wp-i18n',
         'wp-element',
     ),
     filemtime( "$dir/$index_js" )
 );
 $editor_css = 'exploring-blocks-shortcode/editor.css';
 wp_register_style(
     'exploring-blocks-shortcode-block-editor',
     plugins_url( $editor_css, FILE ),
     array(),
     filemtime( "$dir/$editor_css" )
 );
 $style_css = 'exploring-blocks-shortcode/style.css';
 wp_register_style(
     'exploring-blocks-shortcode-block',
     plugins_url( $style_css, FILE ),
     array(),
     filemtime( "$dir/$style_css" )
 );
 register_block_type(
     'exploring-blocks-api/exploring-blocks-shortcode',
     array(
         'editor_script' => 'exploring-blocks-shortcode-block-editor',
         'editor_style'  => 'exploring-blocks-shortcode-block-editor',
         'style'         => 'exploring-blocks-shortcode-block',
     )
 );
 }
 add_action( 'init', 'exploring_blocks_shortcode_block_init' ); 

<?php
/**
 * Functions to register client-side assets (scripts and stylesheets) for the
 * Gutenberg block.
 *
 * @package exploring-blocks-api
 */

/**
 * Registers all block assets so that they can be enqueued through Gutenberg in
 * the corresponding context.
 *
 * @see https://wordpress.org/gutenberg/handbook/blocks/writing-your-first-block-type/#enqueuing-block-scripts
 */
function exploring_blocks_shortcode_block_init() {
	// Skip block registration if Gutenberg is not enabled/merged.
	if ( ! function_exists( 'register_block_type' ) ) {
		return;
	}
	$dir = dirname( __FILE__ );

	$index_js = 'exploring-blocks-shortcode/index.js';
	wp_register_script(
		'exploring-blocks-shortcode-block-editor',
		plugins_url( $index_js, __FILE__ ),
		array(
			'wp-blocks',
			'wp-i18n',
			'wp-element',
		),
		filemtime( "$dir/$index_js" )
	);

	$editor_css = 'exploring-blocks-shortcode/editor.css';
	wp_register_style(
		'exploring-blocks-shortcode-block-editor',
		plugins_url( $editor_css, __FILE__ ),
		array(),
		filemtime( "$dir/$editor_css" )
	);

	$style_css = 'exploring-blocks-shortcode/style.css';
	wp_register_style(
		'exploring-blocks-shortcode-block',
		plugins_url( $style_css, __FILE__ ),
		array(),
		filemtime( "$dir/$style_css" )
	);

	register_block_type(
		'exploring-blocks-api/exploring-blocks-shortcode',
		array(
			'editor_script' => 'exploring-blocks-shortcode-block-editor',
			'editor_style'  => 'exploring-blocks-shortcode-block-editor',
			'style'         => 'exploring-blocks-shortcode-block',
		)
	);
}
add_action( 'init', 'exploring_blocks_shortcode_block_init' );

npm install

b

Pitfall https://twitter.com/_pbrocks/status/1081966452406669312

Editor uses json to pass the arguments

raw HTML in 5.0 editor will break because it needs to be validated in order to wind up in json. Pre-5.0 editor will allow the html in a shortcode

 I am going to use posts endpoint  http://yourwebsite.com/wp-json/wp/v2/posts. We can see our posts data in JSON format by visiting this link (obviously replace yourwebsite.comwith your domain name).

To fetch posts data we have to send GET request to the URL. Also, we can create an article by sending a POST request to this URL. I am going to use this for this tutorial.

 

REST API gives us the power to use WordPress as application development tool. Tutorial to add a blog post from the frontend of your website using REST API.

Source: WordPress REST API Tutorial: Create Posts Using WP REST API — Pradip Debnath