Zac Gordon zgordon

🎓

Prepping a Course on Gatsby, GraphQL & WordPress

Educator, focusing on JavaScript for WordPress.

zgordon / gutenberg-color-pallete-theme.php

Last active January 7, 2024 05:16

Add theme support and set a color palette for all blocks

	<?php
	function mytheme_setup_theme_supported_features() {

	add_theme_support( 'editor-color-palette',
	'#556270',
	'#4ECDC4',
	'#C7F464',
	'#FF6B6B',
	'#C44D58',
	);

zgordon / registerBlockType-example.js

Last active May 30, 2021 01:09

Example of how to use registerBlockType() to create a custom block in WordPress https://wp.zacgordon.com/2017/12/28/how-to-use-to-registerblocktype-to-create-blocks-in-wordpress/

	// Get helper functions from global scope
	const { registerBlockType } = window.wp.blocks;
	const { __ } = window.wp.i18n;

	// Use registerBlockType to create a custom block
	registerBlockType(
	'example-plugin/example-custom-block',
	{
	// Localize title using wp.i18n.__()
	title: __( 'Block Title' ),

zgordon / registerBlockType-parameters.js

Created December 28, 2017 09:07

The registerBlockType() function takes two parameters: name and settings.

	// Get registerBlockType() from wp.blocks in the global scope
	const { registerBlockType } = window.wp.blocks;

	// Two parameters, name and settings
	registerBlockType( 'example-plugin/example-custom-block', {} );

zgordon / registerBlockType-global-variable.js

Last active December 28, 2017 09:04

Shortcut to make registerBlockType easily available when creating WordPress blocks.

	// Get registerBlockType() from wp.blocks in the global scope
	const { registerBlockType } = window.wp.blocks;

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

Last active September 27, 2022 09:27

Example code for a theme functions.php to enqueueing Gutenberg block CSS

	<?php

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

	// Make paths variables so we don't write em twice ;)
	$editorStylePath = '/assets/css/blocks.editor.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';

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 / 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 / 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 / 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');