How to Create Meta Boxes as well as Custom Fields To Posts in Gutenberg

Metadata is information about information. In the case of WordPress metadata, it's data associated with posts, users as well as terms, comments and posts.

With the numerous-to-one connection to metadata within WordPress Your options are fairly unlimited. You can have the number of meta options you want, and can store just about anything inside it.

--Facebook

Here are a few examples of metadata you can attach to your post by using customized fields:

• The coordinates for a geographic property or a place
• The day of an event
• The ISBN, or the author of a book
• The day's mood for the writer of the post

There are many other.

Out of the box, WordPress does not provide the ability to easily add and control custom field. The Classic Editor, the custom fields appear within a square on the bottom of the page. This is just below the post editor.

In Gutenberg, custom fields are turned off by default, but you can display them by selecting the corresponding item in the settings for your post.

There isn't a solution to display the metadata you want to show on the frontend without using the plugin, or having involved with the code.

If you're already a WordPress user, you'll find several excellent plugins doing the job for users available. If you're a programmer and would like to take more out of WordPress Custom Fields, integrate them into your block editor, and display these fields in the frontend of your WordPress website by using a custom Gutenberg block If so, you're in appropriate place.

Don't be too concerned. If creating a plugin to manage custom fields in both editors is somewhat difficult, we'll try to make the process as straightforward as is possible. After you've understood the ideas we'll discuss in this article and you'll acquire the knowledge required to handle custom meta fields within Gutenberg as well as build all types of sites.

So, here is our rundown:

Create a Block Plugin With the official create-block tool

First, build a brand new plugin with all of the dependencies and files required to create a brand new type of block. The block plugin will allow the user to build an easily custom block type that can be used for managing and displaying customized metadata.

npx @wordpress/create-block

When asked, include the following details:

• The template version to be used in this block is: dynamic
• The block slug is used to identify (also the name for the output folder): metadata-block
• The internal namespace for the block's name (something distinctive for your product): meta-fields
• The display title for your block: Meta Fields
• The short description for your block (optional): Block description
• The dashicon that makes it easier to identify the block (optional): book
• The category name allows users to navigate and find your block widgets
• Do you wish to customize the WordPress plugin? Yes/No

We should take the time to review those details and see how they're utilized.

• Block slug utilized for identification specifies the plugin's folder name as well as the the textdomain
• The namespace used internally for the block's name defines the block namespace, the internal namespace and the function name prefix that is used throughout the plugin's source code.
• The display title for your block specifies the name of the plugin and the block's name used in the editor interface.

The process could take a couple of minutes. After the procedure is finished, you'll get a list of the available commands.

CD metadata-block NPM to

Now you are ready to create your code. The next step is to edit the main PHP script of the plugin in order to create Meta boxes for The Classic Editor.

Before moving to the next step, install and activate the Classic Editor plugin.

After that, go to the Plugins window and enable the brand new Meta Fields plugin.

Include Meta Box Meta Box to the Classic Editor

The WordPress API provides useful functions to easily create custom meta boxes that incorporate all HTML elements that your plugin requires to work.

To get started, append this code to the PHP file of the new plugin that you've made:

// register meta box
 function meta_fields_add_meta_box()
 add_meta_box(
 'meta_fields_meta_box', 
 __( 'Book details' ), 
 'meta_fields_build_meta_box_callback', 
 'post',
 'side',
 'default'
 );
 
 
 // build meta box
 function meta_fields_build_meta_box_callback( $post )
 wp_nonce_field( 'meta_fields_save_meta_box_data', 'meta_fields_meta_box_nonce' );
 $title = get_post_meta( $post->ID, '_meta_fields_book_title', true );
 $author = get_post_meta( $post->ID, '_meta_fields_book_author', true );
 ?>
 
 Title
  
 Author
 
 
 

It is the add_meta_box function is used to register a new meta box. In addition, the callback function creates the HTML to inject inside the metabox. It's not our intention to go deeper into the subject because it's outside the scope of our piece, but we'll provide all the necessary information there, here and here.

// save metadata
 function meta_fields_save_meta_box_data( $post_id ) 
 if ( ! isset( $_POST['meta_fields_meta_box_nonce'] ) )
 return;
 if ( ! wp_verify_nonce( $_POST['meta_fields_meta_box_nonce'], 'meta_fields_save_meta_box_data' ) )
 return;
 if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
 return;
 if ( ! current_user_can(  edit_post' and $post_id ) )
return
If ( ! isset( $_POST['meta_fields_book_title'] ) )
 return;
 if ( ! isset( $_POST['meta_fields_book_author'] ) )
 return;
 
 $title = sanitize_text_field( $_POST['meta_fields_book_title'] );
 $author = sanitize_text_field( $_POST['meta_fields_book_author'] );
 
 update_post_meta( $post_id, '_meta_fields_book_title', $title );
 update_post_meta( $post_id, '_meta_fields_book_author', $author );
 
 add_action( 'save_post', 'meta_fields_save_meta_box_data' );

Also, make sure to check the documentation online for more details. We'll only highlight the underscore ( _) preceding that meta-key. This tells WordPress to hide the keys of these custom fields out of the custom fields by default. It also makes your custom fields visible only in your custom meta box.

Below is an image that shows how the custom meta box looks similar to the Classic Editor.

So, before moving on, we'll tell WordPress to remove the custom meta box from the block editor by adding the __back_compat_meta_box flag to the add_meta_box function (see also Meta Box Compatibility Flags and Backward Compatibility).

Now let's go back to the callback function that registers the meta box and modify it in the following manner:

// register meta box
 function meta_fields_add_meta_box()
 add_meta_box(
 'meta_fields_meta_box', 
 __( 'Book details' ), 
 'meta_fields_build_meta_box_callback', 
 'post', 
 'side',
 'default',
 // hide the meta box in Gutenberg
 array('__back_compat_meta_box' => true)
 );
 

Save the plugin file and return to your WordPress admin. You shouldn't be able to be able to see your custom meta box within the block editor any longer. If you activate the Classic Editor, instead, the custom meta box should appear in the Classic Editor.

Add custom Meta Fields in the Gutenberg Block Editor (Three Options)

As we mentioned, in this article , we'll take it an extra step and look at how to add custom meta fields to blog post.

There are many ways to store and use post metadata in Gutenberg. We'll go over the following:

Create a Custom Block store and display custom Meta Fields

In this article, we'll show you how you can create and manage custom meta fields inside the framework of a dynamic block. In the Block Editor Handbook, a post meta field "is a WordPress object which is used to store the additional data associated with a post" and it is necessary to first register a new meta field before being able to utilize it.

Register Custom Meta Fields

Return to the file for plugins. Include the following code:

/**
 * Register the custom meta fields
 */
 function meta_fields_register_meta() 
 
 $metafields = [ '_meta_fields_book_title', '_meta_fields_book_author' ];
 
 foreach( $metafields as $metafield )
 // Pass an empty string to register the meta key across all existing post types. register_post_meta( '', $metafield, array(
 'show_in_rest' => true,
 'type' => 'string',
 'single' => true,
 'sanitize_callback' => 'sanitize_text_field',
 'auth_callback' => function()  
 return current_user_can( 'edit_posts' );
 
 ));
  
 
 add_action( 'init', 'meta_fields_register_meta' );

register_post_meta registers a meta key that is specific to the type of post. The code below, we have registered two custom meta fields for all post types registered on your website that allow custom fields. For further information, refer to the functions reference.

Once done, open it up. Then, open the src/index.js file of the block plugin you are using.

Create the Block Type and register it on the Client

Now navigate to the wp-content/plugins/metadata-block/src folder and open the index.js file:

import  registerBlockType  from '@wordpress/blocks';import './style.scss andimport Edit from './edit';
import metadata from './block.json';registerBlockType( metadata.name Edit: );

Build the Block Type

Navigate to the wp-content/plugins/metadata-block/src folder and open the edit.js file. The following codes (comments taken out):

import  __  from '@wordpress/i18n';
 import  useBlockProps  from '@wordpress/block-editor';
 import './editor.scss';
 
 export default function Edit() 
 return (
 
  __( 'Meta Fields - hello from the editor! ', 'metadata-block' ) 
 
 );
 

Here you'll add the code that generates the block to be rendered within the editor.

The first thing to do is import the components and functions necessary to create the block. The following is the full list of the dependencies:

import  __  from '@wordpress/i18n';
 import  useBlockProps, InspectorControls, RichText  from '@wordpress/block-editor';
 import  useSelect  from '@wordpress/data';
 import  useEntityProp  from '@wordpress/core-data';
 import  TextControl, PanelBody, PanelRow  from '@wordpress/components';
 import './editor.scss';

If you've read our previous pieces, you're familiar with many of these export declarations. In this article, we'll discuss two of them:

import  useSelect  from '@wordpress/data';
 import  useEntityProp  from '@wordpress/core-data';

After you've imported the dependencies, let us know the procedure you'll useSelect and useEntityProp within the Edit() function:

const postType = useSelect(
 ( select ) => select( 'core/editor' ).getCurrentPostType(),
 []
 );
 const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );

• useEntityProp uses an custom hook that allows blocks to read and update the meta field of a post. It is defined as it's a "hook that retrieves the value and an appropriate setter for the property in the closest entity with the type specified". It returns "an array of which the primary item is the property's value and the second item is the setter and the third item is the complete value object of the REST API, which contains more details such as rendering, raw, rendered and protected props". (See also the General Block Editor API Updates.)

The code below provides the most postType in the current postType, an object of meta fields ( meta) as well as a setter function to update them ( setMeta).

Now replace the current code in Edit(). Edit() function with this code:

export default function Edit() 
 const blockProps = useBlockProps();
 const postType = useSelect(
 ( select ) => select( 'core/editor' ).getCurrentPostType(),
 []
 );
 const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
 const bookTitle = meta[ '_meta_fields_book_title' ];
 const bookAuthor = meta[ '_meta_fields_book_author' ];
 const updateBookTitleMetaValue = ( newValue ) => 
 setMeta(  ...meta, _meta_fields_book_title: newValue  );
 ;
 const updateBookAuthorMetaValue = ( newValue ) => 
 setMeta(  ...meta, _meta_fields_book_author: newValue  );
 ;
 return ( ... );
 

Again:

• We used UseSelect to get the current post type.
• useEntityProp returns an array of metadata fields and a setter function to set new meta fields.
• updateBookTitleMetaValue and updateBookAuthorMetaValue are two event handlers to save meta field values.

The next step is to create the JSX (JavaScript XML) code, which is returned by Edit() function. Editor() function:

export default function Edit() 
 ...
 return (
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 >
 );
 

The RichText component provides the possibility of a editable content input. TextControl provides simple text fields. TextControl offers basic text fields.

We also created a sidebar panel containing two input fields to use in place of the two form controls that are included within the block.

Save the file, then revisit the editor. Add to the Meta Fields Block from the block inserter and complete the book's title and author.

If you modify the value in the field inside the block, the values in the text field that is corresponding in the sidebar will also modify.

Next, we have to create the PHP code that generates the HTML that will be displayed at the front end.

Show the Block on the Frontend

The principal PHP file with your code editor. change the function callback that produces the output from the block.

function meta_fields_metadata_block_block_init() 
 register_block_type(
 __DIR__ . '/build',
 array(
 'render_callback' => 'meta_fields_metadata_block_render_callback',
 )
 );
 
 add_action( 'init', 'meta_fields_metadata_block_block_init' );
 
 function meta_fields_metadata_block_render_callback( $attributes, $content, $block ) 
 
 $book_title = get_post_meta( get_the_ID(), '_meta_fields_book_title', true );
 $book_author = get_post_meta( get_the_ID(), '_meta_fields_book_author', true );
 
 $output = "";
 
 if( ! empty( $book_title ) )
 $output .= '' . esc_html( $book_title ) . '';
 
 if( ! empty( $book_author ) )*if( strlen( $output ) > $output 0 )// return 'div ' . get_block_wrapper_attributes() . '>' . $output . "/div>"; else otherwise,return 'div ' . get_block_wrapper_attributes() . '>' . '' . __( 'Sorry. No fields available here!' ) . '' . '

';

This code is quite self-explanatory. We first employ get_post_meta to get the value of the meta fields that we have created. Then we use those value to create the content of the block. The callback function will return the HTML of the block.

The block is now ready to use. We deliberately kept the code in this example as simple as possible but making use of Gutenberg's native components it is possible to build more complex blocks and get the most from WordPress custom meta fields.

In our example, we utilized the h3 and p elements to construct the block that will be used for the frontend.

However, you are able to display information in various different ways. This image illustrates an unorganized table of meta fields.

Find the entire program code for this particular example in this gist that is available to the public..

The addition of a custom Meta Box in the Sidebar of the Document Sidebar

Another option is to attach custom meta fields on post content using a plugin that produces a settings panel within the Document Sidebar.

It's pretty identical to that of the first example, except that in this case, there is no need for a block to manage metadata. The component will be created that will create a panel with a set of controls in the Document sidebar following these steps:

1.    Create a block plugin by using the create-block
2.    Set up a meta box for the Classic Editor
3.    Incorporate the meta fields in the main plugin's files using Register_Post_Meta() function
4.    Create a plugin within index.js file. index.js file
5.    Build the component using the built-in Gutenberg components

Create a New Block Plugin Utilizing the Create-block Tool

For creating a brand new block plugin, follow the instructions in the previous section. It is possible to create a brand new plugin, or modify the scripts we built using the example previously.

Create a custom Meta Box to use the Classic Editor

In the next step, you must register a custom meta box that will ensure backward compatibility for WordPress websites that are still running Classic Editor. Classic Editor. This process works the same like the one explained in the preceding section.

Make sure to register your Custom Meta Fields in the Main Plugin File

The following step is to add the custom meta fields into the plugin's main file using register_post_meta() function. register_post_meta() function. Again, you can follow the earlier procedure.

Register a Plugin in the index.js File

After you've finished the preceding steps, it is time to create a plugin within the index.js file to render a custom component.

Before registering the plugin, make a components folder in your plugin's src folder. In within the component folder, you will need to create the new MetaBox.js file. It is possible to choose any name you think is good for the component. Be sure to adhere to the best practice for name-naming in React.

Before moving on, install before proceeding, install the @wordpress/plugins module via the command line tool.

Stop the process (mac) then install the module, and then start the process again:

Cnpm install @wordpress/plugins --save
 npm start

After that, you can then open your index.js file of your plugin and add the following code.

/**
 * Registers a plugin for adding items to the Gutenberg Toolbar
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/slotfills/plugin-sidebar/
 */
 import  registerPlugin  from '@wordpress/plugins';
 
 import MetaBox from './components/MetaBox';

This code is fairly self-explanatory. But, we'd like to be sure to spend some time on two import declarations for people who do not possess an advanced React capabilities.

In the first import statement it was necessary to wrap the name of the component in curly brackets. With the next import statement we do not include the full name of the function isn't enclosed in curly brackets.

Next, register your plugin:

registerPlugin( 'metadata-plugin', 
 render: MetaBox
  );

registerPlugin simply registers a plug-in. It accepts two parameters:

• Unique string to identify the plugin
• A setting in the plugin. Be aware that the render property must be specified as an acceptable function.

Create the Component using built-in Gutenberg Components

It's time to build the React component. Open the MetaBox.js file (or whatever you called it) and add the following import statement:

import  __  from '@wordpress/i18n';
 import  compose  from '@wordpress/compose';
 import  withSelect, withDispatch  from '@wordpress/data';
 import  PluginDocumentSettingPanel  from '@wordpress/edit-post';
 import  PanelRow, TextControl, DateTimePicker  from '@wordpress/components';

• The    Create    function performs    function composition   , meaning that the result of the function is passed on to another function.

Before you can start using compose compose, you might need to install the corresponding module:

NPM install @wordpress/compose - save

The compose feature in a moment.

• withSelect and withDispatch withDispatch are two higher order components which allow you to fetch or dispatch data from or to an WordPress store. withSelect allows you to add props that are state-based using registration selectors, withDispatch can be used to send props with registered actions creators.
• PluginDocumentSettingPanel renders items in the Document Sidebar (see the source code on Github).

After that, you'll build your component which will show the meta box in the Document sidebar. In your MetaBox.js file, add the following code:

const MetaBox = (  postType, metaFields, setMetaFields  ) => 
 
 if ( 'post' !== postType ) return null;
 
 return(
 
 
  setMetaFields(  _meta_fields_book_title: value  ) 
 />
 
 
  setMetaFields(  _meta_fields_book_author: value  ) 
 />
 
 
  setMetaFields(  _meta_fields_book_publisher: value  ) 
 />
 
 
  setMetaFields(  _meta_fields_book_date: newDate  ) 
 __nextRemoveHelpButton
 __nextRemoveResetButton
 />
 
 
 );
 
 
 const applyWithSelect = withSelect( ( select ) => 
 return 
 metaFields: select( 'core/editor' ).getEditedPostAttribute( 'meta' ),
 postType: select( 'core/editor' ).getCurrentPostType()
 ;
  );
 
 const applyWithDispatch = withDispatch( ( dispatch ) => 
 return 
 setMetaFields ( newValue ) 
 dispatch('core/editor').editPost(  meta: newValue  )
 
 
  );
 
 export default compose([
 applyWithSelect,
 applyWithDispatch
 ])(MetaBox);

Let's take a look at the code.

• The PluginDocumentSettingPanel element renders a new panel in the Document sidebar. It sets the title ("Book details") and icon, and set the initialOpen as false, which means that initially the panel will not be opened until the.
• Within the PluginDocumentSettingPanel we have three text fields and a DateTimePicker element that allows the user to set the publication date.
• withSelect provides accessibility to the select function that we are using to retrieve metaFields as well as postType. withDispatch gives accessibility to the dispatch function, which allows the updating of metadata values.
• Finally, the compose function allows us to create our own component using withSelect and dispatch higher-order components. This allows the component to have access to metaFields as well as the postType postType properties, as well as use the settingMetaFields function.

You can save the MetaBox.js file and start a new page on your WordPress development site and look through the Document Sidebar. It should be able to see the brand newly added Book details section.

Now run your tests. Enter the value for your meta fields that you have created and save the page. After that, load the page again and check if the values you set are there.

Add the block we have created in the last section, and make sure that everything is functioning correctly.

The addition of a custom sidebar to manage Meta-Data Posts

If you've got a huge number of custom meta fields to add to your posts or post types that you have created it is possible to create an Custom Settings Sidebar specifically for the plugin.

It's a lot like to the previous example If you've mastered the steps discussed in the earlier section, you shouldn't face problems creating a Custom Sidebar for Gutenberg.

Again:

1.    Make a block plugin using create-block
2.    Set up a meta box in the Classic Editor
3.    Register the custom meta fields in the main plugin's files using the register_post_meta() function
4.    Create a plugin within index.js file. index.js file
5.    Create the component with the built-in Gutenberg components

Create a brand new block plugin By using the create-block Tool

If you want to make a new block plugin Follow the instructions above. Create a brand new plugin or edit the scripts built in the earlier examples.

Register a Custom Meta Box for the Classic Editor

Register a customized meta box that will ensure backward compatibility for WordPress sites that still use Classic Editor. Classic Editor. This process works the same as described in the previous section.

Register your Custom Meta Fields in the Main Plugin File

Create custom meta fields in the plugin's file that contains the register_post_meta() function.

Register a Plugin in the index.js File

Now create an empty CustomSidebar.js file in the components folder.

After that, you can modify the index.js file as the following:

/**
 * Registers a plugin for adding items to the Gutenberg Toolbar
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/slotfills/plugin-sidebar/
 */
 import  registerPlugin  from '@wordpress/plugins';
 
 import CustomSidebar from './components/CustomSidebar';
 // import MetaBox from './components/MetaBox';
 
 registerPlugin( 'metadata-block', 
 render: CustomSidebar
  );

By using the following code, we first install our CustomSidebar component. We and then tell the RegisterPlugin function how to display the new component.

Make the Component with built-in Gutenberg Components

After that, start then the CustomSidebar.js file and add the following dependencies:

import  __  from '@wordpress/i18n';
 import  compose  from '@wordpress/compose';
 import  withSelect, withDispatch  from '@wordpress/data';
 import  PluginSidebar, PluginSidebarMoreMenuItem  from '@wordpress/edit-post';
 import  PanelBody, PanelRow, TextControl, DateTimePicker  from '@wordpress/components';

You should notice that we import two brand new parts:

• PluginSidebar is an icon in the Gutenberg Toolbar which clicks on it, and displays a sidebar that includes the content in the component (The element is described by GitHub). GitHub).
• PluginSidebarMoreMenuItem renders a menu item under Plugins in More Menu dropdown and can be used to activate the corresponding PluginSidebar component (see also on GitHub).

Now you can create your own custom component:

const CustomSidebar = (  postType, metaFields, setMetaFields  ) => 
 
 if ( 'post' !== postType ) return null;
 
 return (
 
 
 Metadata Sidebar
 
 
 
 
  setMetaFields(  _meta_fields_book_title: value  ) 
 />
 
 
  setMetaFields(  _meta_fields_book_author: value  ) 
 />
 
 
  setMetaFields(  _meta_fields_book_publisher: value  ) 
 />
 
 
  setMetaFields(  _meta_fields_book_date: newDate  ) 
 __nextRemoveHelpButton
 __nextRemoveResetButton
 />
 
 
 
 >
 )
 

The next step is component composition with the Select as well as withDispatch more-ordered components:

const applyWithSelect = withSelect( ( select ) => 
 return 
 metaFields: select( 'core/editor' ).getEditedPostAttribute( 'meta' ),
 postType: select( 'core/editor' ).getCurrentPostType()
 ;
  );
 
 const applyWithDispatch = withDispatch( ( dispatch ) => 
 return 
 setMetaFields ( newValue ) 
 dispatch('core/editor').editPost(  meta: newValue  )
 
 
  );
 
 export default compose([
 applyWithSelect,
 applyWithDispatch
 ])(CustomSidebar);

You can save your changes and then check the editor's interface. If you open the Option menu, you'll find an updated Metadata Sidebar item listed under the Plugins section. When you click on it, you will allow you to activate your custom sidebar.

Similar happens when you press the book icon located in the upper right-hand corner.

Then, go to your development website then create a blog article. Fill in your meta fields and then upload blocks to your editor's canvas. The block should contain the same metadata fields that you have entered into your custom sidebar.

Keep the blog post saved and view the page on the frontend. The card you receive should be with the title of your book and author's name as well as the publisher's name as well as the publication date.

You'll find the full text of the article's code in this open summary.

More Readings

In this article we've covered many aspects, from the selection of selectors to higher-order components and much more. We've linked the top resources we used for reference throughout the article as well.

But if you wish to go deeper into these areas, you might want to check the following additional resources:

Gutenberg Documentation and official WordPress Documentation and Resources

• Plugin Handbook / Custom Meta Boxes
• The Handbook for Plugins / Managing Post Metadata
• How-to guides / Meta Boxes
• How-to-Guides / Sidebar of Plugins
• Block Editor Handbook / PluginSidebar
• Package Reference @wordpress/compose
• Packages , data, Analysis with Redux
• Packages / data / withDispatch
• Packages , data or delivery
• Packages, data, withSelect
• Packages / data / select

More Official Resources

• Higher-Order Components in React
• Action creators in Redux
• Deriving Data Using Selectors in Redux

Additional Resources From the Community

• Incredible hooks and the best places to use the hooks (by Darren Ethier)
• WordPress Data Series Overview and Introduction (by Darren Ethier)
•    Airbnb React/JSX Style Guide
• React Higher-Order Components (HOCs) (by Robin Wieruch)
•    Function composition in JavaScript
• Data requests in Gutenberg by using getEntityRecords (by Ryan Welcher)

Useful Readings From the Website

Summary

Now you should be able benefit from the possibilities of custom fields available in Gutenberg to create more complex and functional WordPress websites.

However, there's more. Based on the knowledge you've acquired through our posts on blocks, you'll also have a good idea of how to develop React components outside of WordPress. Since, Gutenberg is a React-based SPA.

It's now up to you! Did you create Gutenberg blocks that make use of custom meta fields? Send us your work by leaving a comment below.

• Easy setup and management in the My dashboard
• 24/7 expert support
• The most efficient Google Cloud Platform hardware and network driven by Kubernetes for the highest scalability
• Enterprise-grade Cloudflare integration for speed as well as security
• Global audience reach with more than 35 data centers, and 275+ PoPs worldwide