FSE Series 10: Advanced FSE: Creating Custom Blocks with React and the Block Editor

Target Audience: Developers and ambitious users ready to build custom blocks for FSE.

Introduction

WordPress Full Site Editing (FSE) thrives on blocks, but what if you need something unique—like a pricing table, event calendar, or interactive quiz? While plugins offer solutions, custom blocks let you build exactly what your site needs.

By the end of this guide, you’ll:

1. Understand the basics of block development (React, JSX, and @wordpress/scripts).
2. Create a simple “Team Member” block with custom fields.
3. Integrate your block with Global Styles for seamless branding.

No prior React experience? No problem! Let’s code your first block.

Part 1: Why Build Custom Blocks?

• Unique Features: Design blocks tailored to your content (e.g., product comparisons, event countdowns).
• Performance: Avoid plugin bloat by coding only what you need.
• Full Control: Style and functionality align perfectly with your brand.

Example: A “Team Member” block could include:

• Profile image.
• Name, title, and bio.
• Social media links.

Part 2: Prerequisites

1. Local Development Setup:
   • Install Node.js and npm.
   • Use a local server like LocalWP or XAMPP.
2. Basic Knowledge:
   • HTML/CSS.
   • JavaScript (ES6+ syntax).
   • Terminal/command line basics.
3. Tools:
   • Code editor (e.g., VS Code).

Part 3: Building Your First Block

Step 1: Scaffold a Block Plugin

WordPress provides a handy tool called @wordpress/create-block to generate block boilerplate:

1. Create a Plugin Directory:

cd wp-content/plugins 

2. Generate Block Files

npx @wordpress/create-block team-member-block  

Follow prompts (choose “Dynamic” block if you need PHP rendering).

3. Install Dependencies:

cd team-member-block  
npm install  

Step 2: Modify the Block Code

Open the generated files in your editor. Key files:

• src/index.js: Main block JavaScript.
• src/edit.js: Editor-side React component.
• src/style.scss: Block styles.

Example: Customize edit.js for the “Team Member” block:

import { __ } from '@wordpress/i18n';  
import { useBlockProps } from '@wordpress/block-editor';  
import { TextControl, MediaUpload } from '@wordpress/components';  

export default function Edit({ attributes, setAttributes }) {  
  const { name, title, bio, imageUrl } = attributes;  

  return (  
    <div { ...useBlockProps() }>  
      <MediaUpload  
        onSelect={(media) => setAttributes({ imageUrl: media.url })}  
        type="image"  
        value={imageUrl}  
        render={({ open }) => (  
          <button onClick={open}>  
            {imageUrl ? <img src={imageUrl} alt={name} /> : 'Upload Image'}  
          </button>  
        )}  
      />  
      <TextControl  
        label="Name"  
        value={name}  
        onChange={(value) => setAttributes({ name: value })}  
      />  
      <TextControl  
        label="Title"  
        value={title}  
        onChange={(value) => setAttributes({ title: value })}  
      />  
      <TextControl  
        label="Bio"  
        value={bio}  
        onChange={(value) => setAttributes({ bio: value })}  
        multiline  
      />  
    </div>  
  );  
}  

Step 3: Style Your Block

Add CSS in src/style.scss:

.wp-block-team-member-block {  
  padding: 20px;  
  background: #fff;  
  border-radius: 8px;  

  img {  
    width: 100px;  
    height: 100px;  
    border-radius: 50%;  
  }  
}  

Step 4: Build and Activate

1. Compile the block:

npm run build

2. Activate the plugin in Plugins > Installed Plugins.

Part 4: Integrating with Global Styles

Make your block respect Global Styles (colors, typography):

1. Add Supports in block.json:

{  
  "supports": {  
    "color": { "background": true, "text": true },  
    "typography": { "fontSize": true }  
  }  
}  

1. Use CSS Variables:

.wp-block-team-member-block {  
  color: var(--wp--preset--color--text);  
  background: var(--wp--preset--color--background);  
  font-size: var(--wp--preset--font-size--medium);  
}  

Part 5: Using Your Block in FSE

1. Add to Templates:
   • Open the Site Editor, edit a template (e.g., single.html).
   • Insert your “Team Member” block from the Block Inserter.
2. Dynamic Data (Advanced):
   • Use the Block API to pull data from custom fields or APIs.

FAQs

Q: Do I need to learn React to build blocks?
A: Yes, but start small! The React documentation and Gutenberg Handbook are great resources.

Q: Can I sell my custom blocks?
A: Absolutely! Publish them on the WordPress Plugin Directory or marketplaces like CodeCanyon.

Q: Why isn’t my block showing in the editor?
A: Ensure npm run build completed successfully and the plugin is active. Check the browser console for errors.

What’s Next?

You’ve just crossed into the world of WordPress development! In Post 11, we’ll tackle Optimizing FSE Sites for Speed, covering:

• Reducing block rendering time.
• Lazy loading images and assets.
• Auditing performance with Lighthouse.

For now, experiment with:

• Adding a social links section to your “Team Member” block.
• Creating a “dynamic” block that pulls data from an external API.

Conclusion

Custom blocks transform FSE from a site builder into a limitless platform. Whether you’re crafting a portfolio, e-commerce site, or interactive app, you’re now equipped to build exactly what you envision—no compromises.

Ready to make your site lightning-fast? Let’s race into Post 11!

Love what you see? Explore our packages and pricing – let’s bring your vision to life!