Set post meta fields

update_post_meta($post_id, 'first_name', 'John');
update_post_meta($post_id, 'last_name', 'Doe');

If you want to do this in a more compact way, you can combine them into a single action, although `update_post_meta()` is generally used individually for each field:

update_post_meta($post_id, 'full_name', 'John Doe');

This example combines the first name and last name into a `full_name` field, but if you specifically want them separate, you will need to use individual calls for each.

### Steps to Create a Custom Gutenberg Block

1. **Install the Block Package:**
To create a new block, use the `@wordpress/create-block` package. First, navigate to your WordPress plugin or theme folder (where you want to create the block) and run:

npx @wordpress/create-block my-custom-block

This command sets up a new block in a directory called `my-custom-block`. It includes all necessary files and configurations for a simple block.

2. **Modify Block Files:**
After running the setup, you'll have a block folder with files like:

– `src/block.js`: The main block JavaScript file (you can modify this to define how your block will behave).
– `src/editor.scss`: Custom CSS specific to the editor.
– `src/style.scss`: Custom CSS for frontend rendering.

Modify `block.js` to customize your block. A simple example of a block definition in `block.js` could look like this:

import { registerBlockType } from '@wordpress/blocks';
   import { RichText } from '@wordpress/editor';
   import './style.scss';

   registerBlockType( 'my-custom/block', {
     title: 'My Custom Block',
     icon: 'smiley',
     category: 'common',
     attributes: {
       content: {
         type: 'string',
         source: 'html',
         selector: 'p',
       },
     },
     edit: ( props ) => {
       const { attributes, setAttributes } = props;
       const { content } = attributes;

       return (
         <div>
           <RichText
             tagName="p"
             value={ content }
             onChange={ ( newContent ) => setAttributes( { content: newContent } ) }
             placeholder="Write something..."
           />
         </div>
       );
     },
     save: ( props ) => {
       const { attributes } = props;
       return <RichText.Content tagName="p" value={ attributes.content } />;
     },
   });

3. **Compile and Build the Block:**
After modifying the block, you’ll need to build it. In the root of your block’s directory, run:

npm install
   npm run build

This will compile your block and make it ready to use in WordPress.

4. **Activate the Block:**
If you created your block in a plugin, activate the plugin in the WordPress admin. If the block was added to a theme, it will be available when the theme is activated.

5. **Use the Block in Gutenberg:**
After activation, you should be able to use your block in the WordPress editor. Go to a page or post and search for "My Custom Block" in the block inserter. You can then add it to your content.

### Additional Resources:
– [WordPress Block Editor Handbook](https://developer.wordpress.org/block-editor/)
– [@wordpress/create-block GitHub](https://github.com/WordPress/create-block)

This is a basic setup to get you started with custom Gutenberg blocks in WordPress. You can add more complex features, like custom settings, styles, or interactivity, depending on your needs.