-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #130 from WordPress/add-server-side-render-block-e…
…xample Add a `ServerSideRender` block example.
- Loading branch information
Showing
10 changed files
with
461 additions
and
33 deletions.
There are no files selected for viewing
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
# This file is for unifying the coding style for different editors and IDEs | ||
# editorconfig.org | ||
|
||
# WordPress Coding Standards | ||
# https://make.wordpress.org/core/handbook/coding-standards/ | ||
|
||
root = true | ||
|
||
[*] | ||
charset = utf-8 | ||
end_of_line = lf | ||
insert_final_newline = true | ||
trim_trailing_whitespace = true | ||
indent_style = tab | ||
|
||
[*.{yml,yaml}] | ||
indent_style = space | ||
indent_size = 2 |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
{ | ||
"extends": [ "plugin:@wordpress/eslint-plugin/recommended" ], | ||
"settings": { | ||
"jest": { | ||
"version": 26 | ||
} | ||
} | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
|
||
# Coverage directory used by tools like istanbul | ||
coverage | ||
|
||
# Compiled binary addons (https://nodejs.org/api/addons.html) | ||
build/Release | ||
|
||
# Dependency directories | ||
node_modules/ | ||
|
||
# Optional npm cache directory | ||
.npm | ||
|
||
# Optional eslint cache | ||
.eslintcache | ||
|
||
# Output of `npm pack` | ||
*.tgz | ||
|
||
# Output of `wp-scripts plugin-zip` | ||
*.zip | ||
|
||
# dotenv environment variables file | ||
.env |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
# Server Side Render Block d26119 | ||
|
||
This example demonstrates how to build a simple block that is rendered on the server and displayed in the Editor using the `ServerSideRender` component. | ||
|
||
<!-- Please, do not remove these @TABLE EXAMPLES BEGIN and @TABLE EXAMPLES END comments or modify the table inside. This table is automatically generated from the data at _data/examples.json and _data/tags.json --> | ||
<!-- @TABLE EXAMPLES BEGIN --> | ||
<!-- @TABLE EXAMPLES END --> | ||
|
||
## Understanding the Example Code | ||
|
||
- This is a dynamic block that renders content on the server side. However, instead of using a `render.php` file, it uses a render callback function. | ||
- In the Editor, the block content defined in the callback function is rendered using the `ServerSideRender` component. | ||
- It's best practice to wrap the `ServerSideRender` component in a `Disabled` component. This ensures that users can't mistakenly interact with or modify the block's content directly in the editor, especially when such interaction is not intended. | ||
- This example also demonstrates how to register a custom attribute for the block and how to use it in the callback function. | ||
|
||
## Related resources | ||
|
||
- [`ServerSideRender` documentation](https://developer.wordpress.org/block-editor/reference-guides/components/server-side-render/) | ||
|
||
---- | ||
|
||
> **Note** | ||
> Check the [Start Guide for local development with the examples](https://github.com/WordPress/block-development-examples/wiki/02-Examples#start-guide-for-local-development-with-the-examples) | ||
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
{ | ||
"name": "@block-development-examples/server-side-render-block-d26119", | ||
"version": "0.1.0", | ||
"author": "The WordPress Contributors", | ||
"license": "GPL-2.0-or-later", | ||
"scripts": { | ||
"build": "wp-scripts build", | ||
"start": "wp-scripts start", | ||
"plugin-zip": "wp-scripts plugin-zip" | ||
}, | ||
"files": [ | ||
"*" | ||
], | ||
"devDependencies": { | ||
"@wordpress/scripts": "^26.15.0" | ||
} | ||
} |
55 changes: 55 additions & 0 deletions
55
plugins/server-side-render-block-d26119/server-side-render-block-d26119.php
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
<?php | ||
/** | ||
* Plugin Name: Block Development Examples - Server Side Render Block d26119 | ||
* 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: block-development-examples | ||
* | ||
* @package block-development-examples | ||
*/ | ||
|
||
/** | ||
* Registers the block using the metadata loaded from the `block.json` file. | ||
* Behind the scenes, it registers also all assets so they can be enqueued | ||
* through the block editor in the corresponding context. | ||
* | ||
* @see https://developer.wordpress.org/reference/functions/register_block_type/ | ||
*/ | ||
function server_side_render_block_d26119__register_block() { | ||
register_block_type( | ||
__DIR__ . '/build', | ||
array( | ||
'render_callback' => 'server_side_render_block_d26119__render_block', | ||
) | ||
); | ||
} | ||
add_action( 'init', 'server_side_render_block_d26119__register_block' ); | ||
|
||
/** | ||
* Renders the block on server. | ||
* | ||
* @param array $attributes The block attributes. | ||
* | ||
* @return string Returns the block content. | ||
*/ | ||
function server_side_render_block_d26119__render_block( $attributes ) { | ||
$label = isset( $attributes['label'] ) ? $attributes['label'] : ''; | ||
$message = __( 'Server Side Render Block d26119 – This content is rendered on the server and displayed in the Editor using the ServerSideRender component.', 'block-development-examples' ); | ||
|
||
$wrapper_attributes = get_block_wrapper_attributes(); | ||
|
||
if ( empty( $label ) ) { | ||
return sprintf( '<p %s>%s</p>', $wrapper_attributes, esc_html( $message ) ); | ||
} | ||
|
||
return sprintf( | ||
'<div %s><h2>%s</h2><p>%s</p></div>', | ||
$wrapper_attributes, | ||
esc_html( $label ), | ||
esc_html( $message ) | ||
); | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
{ | ||
"$schema": "https://schemas.wp.org/trunk/block.json", | ||
"apiVersion": 3, | ||
"name": "block-development-examples/server-side-render-block-d26119", | ||
"version": "0.1.0", | ||
"title": "Server Side Render Block d26119", | ||
"category": "widgets", | ||
"example": {}, | ||
"textdomain": "block-development-examples", | ||
"attributes": { | ||
"label": { | ||
"type": "string" | ||
} | ||
}, | ||
"editorScript": "file:./index.js", | ||
"keywords": [ | ||
"d26119" | ||
] | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
/** | ||
* WordPress Dependencies | ||
*/ | ||
import { __ } from '@wordpress/i18n'; | ||
import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; | ||
import { Disabled, PanelBody, TextControl } from '@wordpress/components'; | ||
import ServerSideRender from '@wordpress/server-side-render'; | ||
|
||
export default function Edit( props ) { | ||
const { attributes, setAttributes } = props; | ||
|
||
return ( | ||
<> | ||
<InspectorControls> | ||
<PanelBody | ||
title={ __( 'Settings', 'block-development-examples' ) } | ||
> | ||
<TextControl | ||
label={ __( 'Label', 'block-development-examples' ) } | ||
value={ attributes.label } | ||
onChange={ ( label ) => setAttributes( { label } ) } | ||
/> | ||
</PanelBody> | ||
</InspectorControls> | ||
<div { ...useBlockProps() }> | ||
<Disabled> | ||
<ServerSideRender | ||
skipBlockSupportAttributes | ||
block="block-development-examples/server-side-render-block-d26119" | ||
attributes={ attributes } | ||
/> | ||
</Disabled> | ||
</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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
/** | ||
* 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, | ||
} ); |
Oops, something went wrong.