Zac Gordon zgordon

🎓

Prepping a Course on Gatsby, GraphQL & WordPress

Educator, focusing on JavaScript for WordPress.

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 / 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 / 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-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 / 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 / gutenberg-color-pallete-wide-images-theme.php

Last active December 30, 2017 18:24

Add theme support and set a color palette for all blocks as well as include theme support for wide-images

zgordon / gutenberg-tooltip-example.jsx

Last active October 12, 2018 10:57

An example of how to use the Tooltip component in Gutenberg. Place the code inside of your block edit setting.

zgordon / adding-css-to-wordpress-theme.php

Created January 1, 2018 23:42

A simple example of Adding CSS to WordPress Theme Via functions.php File


	// Load the theme stylesheets
	function theme_styles()
	{

	// Example of loading a jQuery slideshow plugin just on the homepage
	wp_register_style( 'flexslider', get_template_directory_uri() . '/css/flexslider.css' );

	// Load all of the styles that need to appear on all pages
	wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css' );

zgordon / block-template.php

Last active January 7, 2024 05:16

Example of how to add block templates to post types in WordPress

	<?php

	function mytheme_block_templates( $args, $post_type ) {

	// Only add template to 'post' post type
	// Change for your post type: eg 'page', 'event', 'product'
	if ( 'post' == $post_type ) {

	// Optionally lock templates from further changes
	// Change to 'insert' to allow adding other blocks, but lock defined blocks

zgordon / wp.i18n.__.js

Last active November 8, 2018 21:06

How to work with the __() internationalization feature in Gutenberg.

	// Deconstruct just the __ function from wp.i18n global object
	const { __ } = wp.i18n;

	// Just pass in the text to make it available for translation
	__( 'This text can be translated', 'textdomain' );

	// If used within JSX, you may need to do something like this
	{ __( 'Translate my JSX string', 'textdomain' ) }

	const {
	Button,
	Dashicon,
	Tooltip,
	} = wp.components;

	// Wrap the Tooltip component around whatever you want to activate the tooltip on hover
	<Tooltip
	text={ __( 'Add Tooltip Text Here' ) }
	>