Skip to content

Instantly share code, notes, and snippets.

@pupunzi pupunzi/mb-block.js
Last active Nov 23, 2019

Embed
What would you like to do?
A simple Wordpress Gutenberg plug-in
/**
* mb Gutemberg block
* Copyright (c) 2001-2018. Matteo Bicocchi (Pupunzi)
*/
var el = wp.element.createElement,
registerBlockType = wp.blocks.registerBlockType,
ServerSideRender = wp.components.ServerSideRender,
TextControl = wp.components.TextControl,
TextareaControl = wp.components.TextareaControl,
InspectorControls = wp.editor.InspectorControls;
/** Set the icon for your block */
var mb_icon = el ("img", {
src: "/wp-content/plugins/mb.gutemberg-block/images/YTPL.svg",
width: "50px",
height: "50px"
});
registerBlockType( 'mbideas/mb-simple-block', {
title: 'mb Simple Block',
icon: "carrot",
category: 'mb.ideas',
attributes: {
'mb_title': {
type: 'string',
default: "mb Editor content block"
},
'mb_text': {
type: 'string',
default: "Write here some text"
},
'mb_url': {
type: 'string',
default: "https://pupunzi.com"
},
},
edit: (props) => {
if(props.isSelected){
//console.debug(props.attributes);
};
return [
/**
* Server side render
*/
el("div", {
className: "mb-editor-container",
style: {textAlign: "center"}
},
el( ServerSideRender, {
block: 'mbideas/mb-simple-block',
attributes: props.attributes
} )
),
/**
* Inspector
*/
el( InspectorControls,
{}, [
el( "hr", {
style: {marginTop:20}
}),
el( TextControl, {
label: 'Title',
value: props.attributes.mb_title,
onChange: ( value ) => {
props.setAttributes( { mb_title: value } );
}
} ),
el( TextareaControl, {
style: {height:250},
label: 'Content',
value: props.attributes.mb_text,
onChange: ( value ) => {
props.setAttributes( { mb_text: value } );
console.debug(props.attributes)
}
}, props.attributes.mb_text ),
el( TextControl, {
label: 'Url',
value: props.attributes.mb_url,
onChange: ( value ) => {
props.setAttributes( { mb_url: value } );
}
} ),
]
)
]
},
save: () => {
/** this is resolved server side */
return null
}
} );
<?php
/*
Plugin Name: mb.block
Plugin URI: https://pupunzi.open-lab.com/2018/11/11/a-simple-gutenberg-block-plugin
Description: A sample Gutemberg block
Author: Pupunzi (Matteo Bicocchi)
Version: 1.0.0
Author URI: http://pupunzi.com
Text Domain: mbBlock
*/
function mb_block_init()
{
/**
* Check if Gutemberg is active
*/
if (!function_exists('register_block_type'))
return;
/**
* Register our block editor script
*/
wp_register_script(
'mb-simple-block',
plugins_url( 'mb-block.js', __FILE__ ),
array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-editor' )
);
/**
* Register our block, and explicitly define the attributes we accept
*/
register_block_type( 'mbideas/mb-simple-block', array(
/** Define the attributes used in your block */
'attributes' => array(
'mb_title' => array(
'type' => 'string'
),
'mb_text' => array(
'type' => 'string'
),
'mb_url' => array(
'type' => 'string'
)
),
/** Define the category for your block */
'category' => 'mb.ideas',
/** The script name we gave in the wp_register_script() call */
'editor_script' => 'mb-simple-block',
/** The callback called by the javascript file to render the block */
'render_callback' => 'mb_block_render',
) );
}
add_action( 'init', 'mb_block_init' );
/**
* Define the server side callback to render your block in the front end
*
* @param $attributes
* @return string
* @param array $attributes The attributes that were set on the block or shortcode.
*/
function mb_block_render( $attributes )
{
/** @var $is_in_edit_mode Check if we are in the editor */
$is_in_edit_mode = strrpos($_SERVER['REQUEST_URI'], "context=edit");
/** @var $UID Unique ID for the element*/
$UID = rand(0, 10000);
/** If we are in the editor */
if ($is_in_edit_mode) {
/** If the specific attribute exist (it's not new) */
if($attributes['mb_text']){
$content = '<div class="mb-editor-content" id="mb-editor-content_' . $UID . '">';
$content .= '<h2 class="mb-editor-title"> ' . $attributes['mb_title'] . '</h2>';
$content .= '<p class="mb-editor-text"> ' . $attributes['mb_text'] . '</p>';
$content .= '<a class="mb-editor-url" href="' . $attributes['mb_url'] . '"> ' . $attributes['mb_url'] . '</a>';
$content .= '</div>';
/** If it's new */
} else {
$content = '<div class="mb-editor-content" id="mb-editor-content_' . $UID . '">';
$content .= '<h2 class="mb-editor-title"> ' . $attributes['mb_title'] . '</h2>';
$content .= '<p class="mb-editor-text"> Insert your content</p>';
$content .= '</div>';
}
/** If we are in the front end */
} else {
$content = '<div class="mb-editor-content" id="mb-editor-content_' . $UID . '" style="background:#f3f3f3; padding:20px">';
$content .= '<h2 class="mb-editor-title"> ' . $attributes['mb_title'] . '</h2>';
$content .= '<p class="mb-editor-text"> ' . $attributes['mb_text'] . '</p>';
$content .= '<a class="mb-editor-url" href="' . $attributes['mb_url'] . '"> ' . $attributes['mb_url'] . '</a>';
$content .= '</div>';
}
return $content;
}
/**
* Create your Gutemberg category
*
* @param $categories
* @param $post
* @return array
*/
add_filter( 'block_categories', 'mb_block_categories', 10, 2 );
function mb_block_categories( $categories, $post )
{
return $categories;
/** If mb.ideas is already in categories return categories */
if($categories['slug'] == 'mb.ideas')
return $categories;
return array_merge(
$categories,
array(
array(
'slug' => 'mb.ideas',
'title' => __( 'mb.ideas Blocks', 'mbBlock' ),
),
)
);
}
@RyanBayne

This comment has been minimized.

Copy link

RyanBayne commented Feb 12, 2019

Spent the entire day trying to do what this example plugin is meant to do. I installed this and still no luck!

It looks textbook though but there has to be a bug in WP because this is the only active plugin.

@khromov

This comment has been minimized.

Copy link

khromov commented Nov 23, 2019

@RyanBayne I know I'm a bit late to the party, but if you change from category: 'mb.ideas', to category: 'common', in the js file, everything works as expected! :-)

@RyanBayne

This comment has been minimized.

Copy link

RyanBayne commented Nov 23, 2019

@RyanBayne I know I'm a bit late to the party, but if you change from category: 'mb.ideas', to category: 'common', in the js file, everything works as expected! :-)

Appreciated - I still needed a solution as I had moved onto other tasks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.