-
-
Save douglas-johnson/3bea50c83d2d75e0024d332474f468dc to your computer and use it in GitHub Desktop.
Example of extending Co-Authors Plus blocks to include custom data
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"$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" | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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> | |
); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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 | |
} ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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