Skip to content

Instantly share code, notes, and snippets.

@douglas-johnson
Created September 28, 2023 14:53
Show Gist options
  • Save douglas-johnson/3bea50c83d2d75e0024d332474f468dc to your computer and use it in GitHub Desktop.
Save douglas-johnson/3bea50c83d2d75e0024d332474f468dc to your computer and use it in GitHub Desktop.
Example of extending Co-Authors Plus blocks to include custom data
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "myplugin/myblock",
"version": "0.1.0",
"title": "My Block",
"category": "widgets",
"icon": "smiley",
"description": "Example block scaffolded with Create Block tool.",
"example": {},
"supports": {},
"usesContext": ["co-authors-plus/author"],
"textdomain": "myplugin",
"editorScript": "file:./index.js"
}
/**
* Retrieves the translation of text.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
*/
import { __ } from '@wordpress/i18n';
/**
* React hook that is used to mark the block wrapper element.
* It provides all the necessary props like the class name.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
*/
import { useBlockProps } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
/**
* The edit function describes the structure of your block in the context of the
* editor. This represents what the editor will render when the block is used.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
*
* @return {WPElement} Element to render.
*/
export default function Edit( { context } ) {
const authorPlaceholder = useSelect( select => select( 'co-authors-plus/blocks' ).getAuthorPlaceholder(), []);
const author = context['co-authors-plus/author'] || authorPlaceholder;
const { example_field } = author;
return (
<div { ...useBlockProps() }>{ example_field }</div>
);
}
/**
* Registers a new block provided a unique name and an object defining its behavior.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
*/
import { registerBlockType } from '@wordpress/blocks';
/**
* Internal dependencies
*/
import Edit from './edit';
import metadata from './block.json';
/**
* Every block starts by registering a new block type definition.
*
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
*/
registerBlockType( metadata.name, {
/**
* @see ./edit.js
*/
edit: Edit
} );
<?php
/**
* Plugin Name: MyPlugin
* Description: Example block scaffolded with Create Block tool.
* Requires at least: 6.1
* Requires PHP: 7.0
* Version: 0.1.0
* Author: The WordPress Contributors
* License: GPL-2.0-or-later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: myplugin
*
* @package myplugin
*/
/**
* MyPlugin MyBlock Block Init
*/
function myplugin_myblock_block_init() {
register_block_type(
__DIR__ . '/build',
array(
'render_callback' => 'myplugin_myblock_render'
)
);
}
add_action( 'init', 'myplugin_myblock_block_init' );
/**
* MyPlugin MyBlock Render
*
* @param array $attributes Any attributes saved with our block, currently empty array.
* @param string $content The block as HTML, currently empty.
* @param WP_Block $block The block instance. We will use the context.
* @return string The rendered content of our block.
*/
function myplugin_myblock_render( array $attributes, string $content, WP_Block $block ): string {
$author = $block->context['co-authors-plus/author'] ?? array();
if ( empty( $author ) ) {
return '';
}
$example = $author['example_field'] ?? '';
if ( '' === $example ) {
return '';
}
$attributes = get_block_wrapper_attributes();
$new_content = esc_html( $example );
return "<div {$attributes}>{$new_content}</div>";
}
/**
* MyPlugin MyBlock Register REST Field
*/
function myplugin_myblock_register_rest_field(): void {
register_rest_field(
'coauthor',
'example_field',
array(
'get_callback' => 'myplugin_myblock_get_example_field',
'schema' => array(
'context' => array( 'view' ),
'description' => 'This is an example value for an example REST field.',
'readonly' => true,
'type' => 'string'
),
)
);
}
add_action( 'rest_api_init', 'myplugin_myblock_register_rest_field' );
/**
* MyPlugin MyBlock Get Example Field
*
* @param array $data The existing data about this object.
* @param string $field_name The name of the field we are adding: `example_field`.
* @param WP_REST_Request $request The request that expects we will want to add this data.
* @param string $object_type What the REST API object type was named, in this case `coauthor`.
* @return string The value of our example field.
*/
function myplugin_myblock_get_example_field( array $data, string $field_name, WP_REST_Request $request, string $object_type ): string{
return 'Example value';
}
/**
* MyPlugin MyBlock CoAuthor Blocks Store Data
*
* @param array $block_store_data Data we'll pass to the `co-authors-plus/blocks` store for use in the editor.
* @return array Updated data with placeholder text for our example field.
*/
function myplugin_myblock_coauthor_blocks_store_data( array $block_store_data ): array {
return array_merge(
$block_store_data,
array(
'authorPlaceholder' => array_merge(
$block_store_data['authorPlaceholder'],
array(
'example_field' => 'This is an example placeholder for an example field.'
)
)
)
);
}
add_filter( 'coauthors_blocks_store_data', 'myplugin_myblock_coauthor_blocks_store_data' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment