Zac Gordon zgordon

🎓

Prepping a Course on Gatsby, GraphQL & WordPress

Educator, focusing on JavaScript for WordPress.

zgordon / registerblock-default-icon.js

Last active December 8, 2017 01:00

How to register a new Gutenberg visual editor block in JavaScript

	// Import __ from i18n internationalization library
	const { __ } = wp.i18n;
	// Import registerBlockType() from block building libary
	const { registerBlockType } = wp.blocks;
	// Import the element creator function (React abstraction layer)
	const el = wp.element.createElement;


	/**
	* Register Block using default icon options.

zgordon / registerblock-custom-icon-gutenberg.js

Last active January 2, 2022 19:56

Example for how to create use a custom SVG icon for a block in Gutenberg

	// Import __ from i18n internationalization library
	const { __ } = wp.i18n;
	// Import registerBlockType() from block building libary
	const { registerBlockType } = wp.blocks;
	// Import the element creator function (React abstraction layer)
	const el = wp.element.createElement;

	/**
	* Example of a custom SVG path taken from fontastic
	*/

zgordon / keywords-settings-for-gutenberg-block.js

Created December 8, 2017 00:54

Use the "keywords" settings parameter to add additional search keywords for your block.

	// Import __ from i18n internationalization library
	const { __ } = wp.i18n;
	// Import registerBlockType() from block building libary
	const { registerBlockType } = wp.blocks;
	// Import the element creator function (React abstraction layer)
	const el = wp.element.createElement;



	/**

zgordon / block-architecture-for-themes

Last active December 18, 2017 10:05

Suggested block architecture for working WordPress themes (without webpack). See my block architecture for themes with webpack.

	/theme-root
	/blocks
	/block-name
	editor.css // Option for editor only styles
	index.js // Main block JS file
	index.php // Enqueues the block JS and CSS
	style.css // Frontend and editor styles
	/another-block-name
	editor.css
	index.js

zgordon / block-architecture-for-plugins

Last active December 12, 2017 02:24

Suggested block architecture for working WordPress plugins.

zgordon / functions-block-include-example.php

Last active December 12, 2017 02:33

Example of including specific blocks from a main theme index file

	// Require a block
	require_once( get_template_directory() . '/blocks/block-name/index.php');

	// Require another block
	require_once( get_template_directory() . '/blocks/another-block-name/index.php');

zgordon / enqueue_block_editor_assets-theme-example.php

Last active January 3, 2022 04:06

Example of using enqueue_block_editor_assets in a WordPress Theme for hooking into the Guteneberg editor

	<?php

	/**
	* Enqueue block-name main JavaScript file for the editor
	*/
	function js4wp_block_name_enqueue_scripts() {

	// Make path a variable so we don't write it twice ;)
	$blockPath = '/blocks/block-name/index.js';

zgordon / block-architecture-for-themes-with-webpack

Created December 18, 2017 10:06

Suggested block architecture for working WordPress themes when using webpack.

	/theme-root
	/blocks
	/block-name
	editor.css // Option for editor only styles
	index.js // Main block JS file
	index.php // Enqueues the block JS and CSS
	style.css // Frontend and editor styles
	/another-block-name
	editor.css
	index.js

zgordon / webpack-config-for-gutenberg-blocks.js

Last active December 18, 2017 16:44

A webpack.config.js file for working with Gutenberg [In Development, not yet for production]

	const path = require( 'path' );
	// const BrowserSyncPlugin = require( 'browser-sync-webpack-plugin' );
	const webpack = require( 'webpack' );
	const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );


	// Set different CSS extraction for editor only and common block styles
	const blocksCSSPlugin = new ExtractTextPlugin( {
	filename: '../css/blocks.style.css',
	} );

zgordon / enqueue-block-js-and-css-plugin.php

Last active September 27, 2022 09:26

Example plugin file for enqueueing Gutenberg block JS and CSS

	<?php

	/**
	* Enqueue block editor JavaScript and CSS
	*/
	function jsforwpblocks_editor_scripts() {

	// Make paths variables so we don't write em twice ;)
	$blockPath = '/assets/js/blocks.js';
	$editorStylePath = '/assets/css/blocks.editor.css';