Skip to content

Instantly share code, notes, and snippets.

Avatar

Paul Barthmaier pbrocks

View GitHub Profile
@pbrocks
pbrocks / wplancpa-2019-show-block-type.php
Created May 24, 2019
WC Lancaster filter to show block type if you have WP_DEBUG turned on.
View wplancpa-2019-show-block-type.php
<?php
add_filter( 'render_block', 'wplancpa_2019_show_block_type', 10, 2 );
function wplancpa_2019_show_block_type( $block_content, $block ) {
if ( true === WP_DEBUG ) {
$block_content = "<h5 style=\"color:salmon\">{$block['blockName']}</h5><div class='wp-block' data-blockType='{$block['blockName']}'>{$block_content}</div>";
}
return $block_content;
}
@pbrocks
pbrocks / wclancpa-2019-acf-block-render.php
Created Apr 27, 2019
Render an ACF field in a block for WordPress
View wclancpa-2019-acf-block-render.php
<?php
/**
* Our combined block and shortcode renderer.
*
* We're not using sophisticated php, so if using the shortcode we'd need to specify all three values.
*
* @param array $attributes The attributes set on the block or shortcode.
*/
function acf_built_with_php_render( $attributes ) {
$return = '<h2 style="color:salmon;">' . ( print_r( $attributes['value_one'], true ) ?: 'value_one not defined' ) . '</h2>';
@pbrocks
pbrocks / block.js
Last active May 8, 2021
A little more explanation about how to build a WP block with php.
View block.js
/**
* Before registering the block in JavaScript, we want
* to deconstruct the necessary variables.
*/
const el = wp.element.createElement,
registerBlockType = wp.blocks.registerBlockType,
ServerSideRender = wp.components.ServerSideRender,
TextControl = wp.components.TextControl,
TextareaControl = wp.components.TextareaControl,
InspectorControls = wp.editor.InspectorControls;
@pbrocks
pbrocks / build-a-block-with-php.php
Last active Apr 27, 2019
Code to needed to build a WP block, at least the php portion. Good way to convert WP Shortcodes
View build-a-block-with-php.php
<?php
defined( 'ABSPATH' ) || die( 'File cannot be accessed directly' );
function built_with_php_init() {
// Register our block editor script.
wp_enqueue_script(
'built-with-php',
plugins_url( 'block.js', __FILE__ ),
array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-editor' )
@pbrocks
pbrocks / wclancpa-2019-block-php-frontend.js
Created Apr 27, 2019
We can use PHP to deliver content on the frontend, but still need JS to create the block. Note that Save: method is null because PHP is delivering the content on the frontend.
View wclancpa-2019-block-php-frontend.js
/**
* Before registering the block in JavaScript, we want
* to deconstruct the necessary variables.
*/
const el = wp.element.createElement,
registerBlockType = wp.blocks.registerBlockType,
ServerSideRender = wp.components.ServerSideRender,
TextControl = wp.components.TextControl,
TextareaControl = wp.components.TextareaControl,
InspectorControls = wp.editor.InspectorControls;
@pbrocks
pbrocks / wclancpa-2019-block-php-frontend.js
Created Apr 27, 2019
We can use PHP to deliver content on the frontend, but still need JS to create the block. Note that Save
View wclancpa-2019-block-php-frontend.js
/**
* Before registering the block in JavaScript, we want
* to deconstruct the necessary variables.
*/
const el = wp.element.createElement,
registerBlockType = wp.blocks.registerBlockType,
ServerSideRender = wp.components.ServerSideRender,
TextControl = wp.components.TextControl,
TextareaControl = wp.components.TextareaControl,
InspectorControls = wp.editor.InspectorControls;
@pbrocks
pbrocks / wclancpa-2019-block-access-filter.php
Created Apr 27, 2019
Restrict Access filters for WordPress Blocks
View wclancpa-2019-block-access-filter.php
<?php
function my_restrict_post_filter( $use_block_editor, $post ) {
$author = get_userdata( $post->post_author );
if ( 'pento' === $author->user_login ) {
return (bool) random_int( 0, 1 );
}
return $use_block_editor;
}
@pbrocks
pbrocks / wclancpa-2019-block-categories.js
Created Apr 27, 2019
Code snippet to extend Category Block in WP Editor
View wclancpa-2019-block-categories.js
// svg code
import lancpaIcon from './lancpaIcon';
// alter the icon slot
wp.blocks.updateCategory( 'wclancpa-2019', {
icon: lancpaIcon
} );
@pbrocks
pbrocks / higher-order-component.js
Created Apr 27, 2019
From the Handbook, creating a higher order component is a best practice for the WordPress abstraction layer of React.
View higher-order-component.js
const { createHigherOrderComponent } = wp.compose;
const withClientIdClassName = createHigherOrderComponent( ( BlockListBlock ) => {
return ( props ) => {
return <BlockListBlock { ...props } className={ "block-" + props.clientId } />;
};
}, 'withClientIdClassName' );
wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-client-id-class-name', withClientIdClassName );
@pbrocks
pbrocks / wclancpa-2019-block-categories.php
Created Apr 27, 2019
PHP snippet to add a panel to the WP Block Inserter.
View wclancpa-2019-block-categories.php
<?php
/**
* Adding a block category creates a Panel
*/
function create_wclancpa_2019_panel( $categories, $post ) {
return array_merge(
$categories,
array(
array(
'slug' => 'wclancpa-2019',