From b4f78b0abf0aaf1a07cce7b6f01930b8634282a1 Mon Sep 17 00:00:00 2001 From: JuanMa Garrido Date: Tue, 17 Dec 2024 00:20:50 +0100 Subject: [PATCH] plugin sidebar enhanced README --- plugins/plugin-sidebar-9ee4a6/README.md | 45 ++++++++++++++++++------- 1 file changed, 32 insertions(+), 13 deletions(-) diff --git a/plugins/plugin-sidebar-9ee4a6/README.md b/plugins/plugin-sidebar-9ee4a6/README.md index 797b1a1b..25cbfbd5 100644 --- a/plugins/plugin-sidebar-9ee4a6/README.md +++ b/plugins/plugin-sidebar-9ee4a6/README.md @@ -1,25 +1,44 @@ -### Block Development Examples - Plugin Sidebar 9ee4a6 +# Plugin Sidebar -This example shows how to add a new item to the Top Toolbar in the Block Editor using the [ slot](https://developer.wordpress.org/block-editor/reference-guides/slotfills/plugin-sidebar/). +This example demonstrates how to extend the WordPress block editor by adding a custom sidebar panel using the [`PluginSidebar`](https://developer.wordpress.org/block-editor/reference-guides/slotfills/plugin-sidebar/) component. + +The sidebar includes a text input field that saves data to post meta, showcasing the integration between the block editor's UI components and WordPress data management. + +Key features: + +- Adds a new sidebar panel to the block editor interface +- Implements post meta storage and retrieval +- Demonstrates proper WordPress plugin registration +- Shows usage of WordPress components and data hooks ![Screenshot sidebar](_assets/screenshot.png) -| Folder | Short description | Tags | ID ([❓](https://github.com/WordPress/block-development-examples/wiki/04-Why-an-ID-for-every-example%3F "Why an ID for every example?")) | Download .zip | Live Demo | -| ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/plugin-sidebar-9ee4a6) | Plugin Sidebar | SLOTFILL, META, NO BLOCK | `9ee4a6` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/plugin-sidebar-9ee4a6.zip "") | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/plugin-sidebar-9ee4a6/_playground/blueprint.json "") | - -## Understanding the Example Code - -Overview of the code in bullet point form. +| Folder | Short description | Tags | ID ([❓](https://github.com/WordPress/block-development-examples/wiki/04-Why-an-ID-for-every-example%3F 'Why an ID for every example?')) | Download .zip | Live Demo | +| ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [📁](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/plugin-sidebar-9ee4a6) | Plugin Sidebar | SLOTFILL, META, NO BLOCK | `9ee4a6` | [📦](https://raw.githubusercontent.com/WordPress/block-development-examples/deploy/zips/plugin-sidebar-9ee4a6.zip) | [![](https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/_assets/icon-wp.svg)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/plugin-sidebar-9ee4a6/_playground/blueprint.json) | -## Related resources + -Bulleted list of references +## Understanding the Example Code ----- +- Key implementation points: + - Uses [`registerPlugin()`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-plugins/#registerplugin) to register a new plugin instance + - Implements a custom meta field using [`register_post_meta()`](https://developer.wordpress.org/reference/functions/register_post_meta/) in PHP + - Uses [`useEntityProp`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-core-data/#useentityprop) hook to manage post meta data + - Creates a text control input that saves to post meta +- Main components used: + - [`@wordpress/edit-post`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-edit-post/): Provides `PluginSidebar` component + - [`@wordpress/components`](https://developer.wordpress.org/block-editor/reference-guides/components/): Provides UI components like `TextControl` and `PanelBody` + - [`@wordpress/core-data`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-core-data/): Provides `useEntityProp` hook for data management +- The meta field is registered with: + - Name: `sidebar_plugin_meta_block_field` + - Type: `string` + - Enabled in REST API via `show_in_rest: true` + +--- > **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) \ No newline at end of file +> 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)