Skip to content

Commit

Permalink
Merge pull request #130 from WordPress/add-server-side-render-block-e…
Browse files Browse the repository at this point in the history
…xample

Add a `ServerSideRender` block example.
  • Loading branch information
ndiego authored Oct 25, 2024
2 parents 50eb033 + edabe1f commit 387c51b
Show file tree
Hide file tree
Showing 10 changed files with 461 additions and 33 deletions.
18 changes: 18 additions & 0 deletions plugins/server-side-render-block-d26119/.editorconfig
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
8 changes: 8 additions & 0 deletions plugins/server-side-render-block-d26119/.eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"extends": [ "plugin:@wordpress/eslint-plugin/recommended" ],
"settings": {
"jest": {
"version": 26
}
}
}
30 changes: 30 additions & 0 deletions plugins/server-side-render-block-d26119/.gitignore
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
24 changes: 24 additions & 0 deletions plugins/server-side-render-block-d26119/README.md
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)
17 changes: 17 additions & 0 deletions plugins/server-side-render-block-d26119/package.json
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"
}
}
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 )
);
}
19 changes: 19 additions & 0 deletions plugins/server-side-render-block-d26119/src/block.json
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"
]
}
36 changes: 36 additions & 0 deletions plugins/server-side-render-block-d26119/src/edit.js
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>
</>
);
}
24 changes: 24 additions & 0 deletions plugins/server-side-render-block-d26119/src/index.js
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,
} );
Loading

0 comments on commit 387c51b

Please sign in to comment.