Skip to content

Instantly share code, notes, and snippets.

@royboy789
royboy789 / single.php
Created April 24, 2018 15:57
Using Gutenberg Block Data
<?php
get_header();
the_post();
$blocks = get_editor_blocks( $post->ID );
if ( empty( $blocks ) ) {
echo '<p>No Blocks Found</p>';
} else {
@royboy789
royboy789 / Select.react.js
Created January 24, 2018 04:31
Gutenberg React state example
const { __ } = wp.i18n;
const { Component } = wp.element;
const el = wp.element.createElement;
export default class Select extends Component {
constructor( props ) {
super( ...props );
this.selectCallback = this.selectCallback.bind(this);
this.state = {
@royboy789
royboy789 / Input.es6.js
Last active January 24, 2018 18:06
Gutenberg React Component
const { __ } = wp.i18n;
const { Component } = wp.element;
const el = wp.element.createElement;
export default function Input( className, id, value, label, changeHandler ) {
return el(
'div',
{
className: className
},
@royboy789
royboy789 / Input.React.js
Created January 23, 2018 03:20
Enough React for Gutenberg
const { __ } = wp.i18n;
const { Component } = wp.element;
const el = wp.element.createElement;
export class Input extends Component {
constructor( props ) {
super( ...arguments );
}
@royboy789
royboy789 / Input.es5.js
Last active November 21, 2018 14:51
Learn Gutenberg es5 tutorial
var myComponents = myComponents || {};
var el = wp.element.createElement;
var __ = wp.i18n.__;
myComponents.inputComponent = function( id, attributes, changeCallback ) {
return el(
'input',
{
id: id + '-control',
value: attributes.who,
@royboy789
royboy789 / gutenberg_es6_modular_components.js
Last active January 23, 2018 03:00
Gutenberg Modular Components
import Input from './components/Input.es6';
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const el = wp.element.createElement;
registerBlockType( 'learn-gutenberg/ex2-react', {
title: __( 'Learn Gutenberg Example 2: React', 'learn-gutenberg' ),
category: 'widgets',
supportHTML: false,
@royboy789
royboy789 / gutenberg_es5_registerBlockType.js
Last active February 4, 2022 23:10
Gutenberg ES5 wp.blocks.registerBlockType with wp.element.createElement
wp.blocks.registerBlockType( 'learn-gutenberg/ex2-plainjs', {
title: __( 'Learn Gutenberg Example 2: Plain JS', 'learn-gutenberg' ),
category: 'widgets',
icon: 'admin-users',
keywords: [
__( 'lesson', 'ex2-plainjs' ),
__( 'tutorial', 'ex2-plainjs' ),
__( 'javascript', 'ex2-plainjs' )
],
attributes: {
@royboy789
royboy789 / gutenberg_es5_vs_es6.js
Created January 18, 2018 16:08
ES5 vs ES6 edit callback
// the edit callback for wp.blocks.registerBlockTypes()
/**
* ES5
*
*/
edit: function( props ) {
var attributes = props.attributes,
setAttributes = props.setAttributes,
@royboy789
royboy789 / guten-vue.js
Created January 17, 2018 00:38
This is a Gutenberg Block built with Vue.js
( function( wp ) {
var el = wp.element.createElement;
var __ = wp.i18n.__;
wp.blocks.registerBlockType( 'learn-gutenberg/ex2-vue', {
title: __( 'Learn Gutenberg Example 2: VueJS', 'learn-gutenberg' ),
category: 'widgets',
supportHTML: false,
attributes: {
who: {
<?php
global $EZData;
$group_id = 12;
$data = array(
'value' => 123,
'misc_three' => 'testing',
):