bbioonThemes

Tag: Block Themes

  • Stop Fighting WordPress: Leverage Block Bindings Now

    A client hit me up last month. They needed a slick video section on their product pages—dynamic content, different video for each product, you know the drill. My first thought? Classic. Just spin up an ACF field, grab the URL, and manually inject it into the template. Easy, right? And yeah, that worked. For about five minutes, until they wanted more control, directly in the editor, without touching custom fields. Total nightmare, man. That’s when I realized: we keep doing things the old way, but WordPress is moving. Fast. Especially with features like Block Bindings becoming more flexible, sticking to old habits is just leaving power on the table.

    It’s already August, and the Roadmap to 6.9 is out. Evolution of the site editor, refining content creation, performance improvements—it’s all on the docket. This means the back half of 2025 is going to be a wild ride for us developers. If you’re not keeping up, you’re falling behind. Period.

    Expanding Core Blocks: More Tools, Less Hassle?

    For years, the stance on new core blocks felt pretty rigid. Anything deemed “too niche” was left to third-party plugins. And for a long time, that was fine. But blocks are different. Theme authors, myself included, need a robust toolkit right out of the box to build unique designs without forcing users into a plugin-chasing frenzy. Thankfully, it looks like this stance might be softening. Matías Ventura, the Gutenberg lead architect, recently put it plainly: not having these blocks in core “severely limits the expressiveness that theme builders (and users) can depend upon.” He’s right. Relying on external plugins for fundamental elements just fragments the experience. It makes sense, man. More blocks in core means more consistency and less reliance on external dependencies that can, let’s be honest, break things.

    Theme.json Control: A Developer’s Dream

    Another area seeing some serious traction is deeper control over the block editor’s UI/UX via theme.json. This isn’t just about styling anymore; it’s about defining the editing experience itself. We’re still a ways off from full feature parity here, but the standardization of Core blocks via the ToolsPanel component is a massive step. Imagine having the power to enable or disable specific inspector controls and toolbar options right from your theme.json. As a theme author, the possibilities are endless for crafting a truly bespoke and intuitive user experience. This level of granular control is a game-changer, trust me on this.

    Block Bindings: The Real Game-Changer

    Alright, enough with the “might happens.” Let’s talk about something concrete: Block Bindings. This is as close to a sure thing as it gets, and it’s been cooking on the WordPress Developer Blog for a while. With the latest WordPress trunk, you can now customize which blocks and attributes can be bound. Before, it was limited to Heading, Paragraph, and Button blocks. Now, with the new block_bindings_supported_attributes_{$block_type} filter hook, things are wide open.

    Remember that client with the dynamic video section? This filter is the answer. Instead of a custom field injection, we can bind the video source directly. I wasted no time tinkering with this once the patch landed in WordPress trunk. Making the Video block’s src attribute bindable? Oh, it’s sweet.

    <?php
add_filter( 'block_bindings_supported_attributes_core/video', 'devblog_bindable_video_attrs' );

function devblog_bindable_video_attrs( array $attrs ): array
{
	return array_merge( $attrs, [ 'src' ] );
}
?>

    This snippet? It’s all you need to open up the Video block for binding that src attribute. The beauty of this is that the user can pick their video, and if you’ve got a custom source, you can bind it up. Go check out the Block Bindings API tutorials on the Developer Blog for a deeper dive. The only problem I have with this feature is not having enough time to try out all the ideas I’ve had. Seriously. I’m going to have so much fun with this!

    Other Notable Shifts

    Beyond Block Bindings, there’s other crucial stuff happening. The Core AI team just published their AI Building Blocks for WordPress, outlining the PHP AI Client SDK, Abilities API, MCP Adapter, and AI Experiments Plugin. If AI integration is on your roadmap, you need to be in the #core-ai Slack channel. Also, the WordPress Coding Standards 3.2 release brings tighter checks and improved PHP 8.1+ support. No excuses for sloppy code now.

    On the data front, Data Views are getting a lot of attention with new fields, controls, operators, and grouping functionality. This is a big deal for custom admin screens and dynamic content listings. Plus, Playground CLI now defaults to PHP 8.3 and has Xdebug support. If you’re not using Playground for quick tests, you’re missing out. It’s a lifesaver. You can find more details on these updates directly on the Developer Blog, like the one found at https://developer.wordpress.org/news/2025/08/whats-new-for-developers-august-2025/.

    So, What’s the Point?

    The point is, WordPress isn’t standing still. The core team is actively pushing for a more robust, intuitive, and developer-friendly platform. Ignoring these advancements means you’re building with one hand tied behind your back. Embracing things like expanded core blocks, deeper theme.json control, and especially the evolving Block Bindings API means building sites that are more flexible, easier to manage, and ultimately, more future-proof. Don’t get stuck in the old ways; the new ways are better.

    Look, this stuff gets complicated fast. If you’re tired of debugging someone else’s mess and just want your site to work, drop my team a line. We’ve probably seen it before.

  • Beyond Basic Recipes: Optimizing WordPress for Food Blogs

    I got a call recently from a client, a passionate chef with a fantastic array of healthy, inspiring recipes. She wanted to launch her food blog, Jen’s Food Blog, which she’d been running on a basic WordPress setup for a while, into something more professional, a platform for product reviews and an engaging community. But here was the kicker: her current site was a total nightmare. Slow. Clunky. Images loading like dial-up. She was doing everything right with content, but the tech stack was just, well, let’s just say it wasn’t pretty. This is a classic case of needing to properly tackle optimizing WordPress for food blogs from the ground up, not just patching it. This builds on some of the excellent points raised in the WordPress.com blog’s examples of successful food blogs at wordpress.com/blog/2025/10/28/food-blog-examples/.

    Her initial approach, like many I see, was to just pile on plugins. A separate plugin for recipe cards, another for image optimization, one for SEO, then a few more for social media integration and analytics. Each plugin, while useful in isolation, added its own overhead. The database queries were through the roof, the page load times were abysmal, and the admin dashboard was lagging harder than a vintage modem. It created a situation where every update was a gamble, and the site felt like it was held together with duct tape and good intentions.

    Building a Robust Food Blog Foundation

    The real fix? It wasn’t about more plugins; it was about smart architecture. For a food blog, you’re dealing with rich content: high-resolution images, potentially embedded videos (like those used on Vegan Bunny Elle), and structured recipe data. You need WordPress to handle this efficiently. This means thinking about custom post types for recipes from the start, rather than shoehorning everything into standard posts with a basic recipe plugin. A custom post type gives you a dedicated structure for ingredients, instructions, cooking times, and nutritional info, making it far easier to manage, query, and even export later. Plus, it improves SEO, letting search engines understand your content better.

    <?php
function register_recipe_post_type() {
    $labels = array(
        'name'                  => _x( 'Recipes', 'Post Type General Name', 'text_domain' ),
        'singular_name'         => _x( 'Recipe', 'Post Type Singular Name', 'text_domain' ),
        'menu_name'             => __( 'Recipes', 'text_domain' ),
        'name_admin_bar'        => __( 'Recipe', 'text_domain' ),
        'archives'              => __( 'Recipe Archives', 'text_domain' ),
        'parent_item_colon'     => __( 'Parent Recipe:', 'text_domain' ),
        'all_items'             => __( 'All Recipes', 'text_domain' ),
        'add_new_item'          => __( 'Add New Recipe', 'text_domain' ),
        'add_new'               => __( 'Add New', 'text_domain' ),
        'new_item'              => __( 'New Recipe', 'text_domain' ),
        'edit_item'             => __( 'Edit Recipe', 'text_domain' ),
        'update_item'           => __( 'Update Recipe', 'text_domain' ),
        'view_item'             => __( 'View Recipe', 'text_domain' ),
        'search_items'          => __( 'Search Recipes', 'text_domain' ),
        'not_found'             => __( 'Not found', 'text_domain' ),
        'not_found_in_trash'    => __( 'Not found in Trash', 'text_domain' ),
        'featured_image'        => __( 'Recipe Image', 'text_domain' ),
        'set_featured_image'    => __( 'Set recipe image', 'text_domain' ),
        'remove_featured_image' => __( 'Remove recipe image', 'text_domain' ),
        'use_featured_image'    => __( 'Use as recipe image', 'text_domain' ),
        'insert_into_item'      => __( 'Insert into recipe', 'text_domain' ),
        'uploaded_to_this_item' => __( 'Uploaded to this recipe', 'text_domain' ),
        'items_list'            => __( 'Recipes list', 'text_domain' ),
        'items_list_navigation' => __( 'Recipes list navigation', 'text_domain' ),
        'filter_items_list'     => __( 'Filter recipes list', 'text_domain' ),
    );
    $args = array(
        'label'                 => __( 'Recipe', 'text_domain' ),
        'description'           => __( 'Food recipes', 'text_domain' ),
        'labels'                => $labels,
        'supports'              => array( 'title', 'editor', 'thumbnail', 'excerpt', 'comments' ),
        'taxonomies'            => array( 'category', 'post_tag' ),
        'hierarchical'          => false,
        'public'                => true,
        'show_ui'               => true,
        'show_in_menu'          => true,
        'menu_position'         => 5,
        'menu_icon'             => 'dashicons-food',
        'show_in_admin_bar'     => true,
        'show_in_nav_menus'     => true,
        'can_export'            => true,
        'has_archive'           => true,
        'exclude_from_search'   => false,
        'publicly_queryable'    => true,
        'capability_type'       => 'post',
        'show_in_rest'          => true, // Essential for Gutenberg editor
    );
    register_post_type( 'recipe', $args );
}
add_action( 'init', 'register_recipe_post_type', 0 );
?>

    Once you’ve got your custom post type in place, you’re looking at a much cleaner way to manage your content. Then you can implement meta boxes for custom fields, or even explore Gutenberg blocks designed for recipes, but you’re doing it on a solid foundation. You’ll still need proper image optimization, maybe a CDN, and smart caching to serve up those gorgeous food photos fast, but you won’t be fighting your own backend to do it. Think about the user experience: a fast, well-organized site keeps people around, whether they’re looking for vegan basics from Vegan Bunny Elle or a vintage recipe from A Hundred Years Ago.

    So, What’s the Point?

    The lesson here is simple: a great food blog isn’t just about delicious recipes or stunning photography. It’s about a solid, performant WordPress setup that supports that content without fighting it. Don’t fall into the trap of just adding more plugins to solve every perceived need. Plan your content structure, especially for something as specific as recipes, and choose your tools wisely. This ensures your site loads quickly, is easy to manage, and provides an excellent experience for your readers.

    Look, this stuff gets complicated fast. If you’re tired of debugging someone else’s mess and just want your site to work, drop my team a line. We’ve probably seen it before.

  • WordPress Block Development: September’s Core Updates Deliver

    Just last week, a client hit me up. Their marketing team was wrestling with an existing page, trying to add some simple accordions and custom-styled form fields without breaking anything. The current setup? A total nightmare of custom JS and inline styles from an older theme. I looked at it and thought, “Man, this used to be a headache to implement properly, especially if you needed it accessible.” But here’s the kicker: WordPress core, especially with the September 2025 updates, is making this kind of stuff genuinely straightforward now.

    If you’ve been knee-deep in custom block development, or just trying to keep up with how WordPress is evolving, these updates are solid. They’re not flashy marketing buzz; they’re practical tools that make our jobs easier and client sites more robust. We’re talking about significant strides in core functionality that streamline development, reduce custom code, and ultimately, make sites more maintainable.

    Streamlining WordPress Block Development

    First up, the official “What’s new for developers?” September 2025 report on the WordPress Developer Blog highlights the new **Accordion block**. This has been a long time coming. We’ve all built countless custom accordion solutions, often fighting with accessibility standards (WCAG, USWDS) or patching things together with conflicting JavaScript. Now, WordPress gives us native Accordion, Accordion Item, Header, and Panel blocks, all powered by the Interactivity API. This means less custom code, better semantics out of the box, and a more consistent user experience. Trust me, rolling your own accessible accordion from scratch is not fun, and having this in core is a huge win for cleaner block development.

    Next, let’s talk about styling. Remember the days of fighting with global CSS overrides for basic form elements? It was messy. With the continued effort to allow `theme.json` to style form elements, you can now target text inputs, textareas, and even select/dropdown elements directly. This is massive for maintaining a consistent design system. You can centralize your form styling right in your theme’s `theme.json`, making it predictable and easy to manage without adding a bunch of extra CSS that conflicts everywhere. For example, to style your text inputs:

    "elements": {
	"textInput": {
		"border": {
			"radius": "0",
			"style": "solid",
			"width": "1px",
			"color": "red"
		},
		"color": {
			"text": "var(--wp--preset--color--theme-2)"
		},
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--inter)"
		}
	}
}

    This kind of control, right from `theme.json`, removes a ton of boilerplate and ensures your styles are applied universally. It’s what we always wanted for true block themes, and it’s finally here.

    Beyond styling, the `@wordpress/create-block` package now allows block variants to define their own template files. If you’ve ever built complex blocks with many variations, you know the pain of conditional logic within a single template. This update simplifies managing those templates significantly. It’s a small change, but it makes a huge difference in the long-term maintainability of your custom blocks.

    And speaking of foundational work, the **Abilities API** is getting a Composer package and the PHP AI Client saw its first stable release. For those integrating advanced permissions or dabbling with AI in WordPress, this is the groundwork being laid. It means a more structured and official way to extend core functionality, rather than relying on custom solutions that might break with every major update.

    So, What’s the Point?

    The takeaway here is clear: WordPress core development is moving fast, and in the right direction. These aren’t just minor tweaks; they are foundational improvements that empower developers to build better, more maintainable, and more compliant sites with less effort. Leveraging these core features means fewer custom hacks, less technical debt, and more time focusing on what really matters for your clients.

    Look, this stuff gets complicated fast. If you’re tired of debugging someone else’s mess and just want your site to work, drop my team a line. We’ve probably seen it before.

  • WordPress October Updates: Stop Breaking Client Layouts

    Just last month, I got a frantic call from a client managing a sprawling online course platform. Their content editors, bless their hearts, kept inadvertently messing up intricate page layouts built with custom patterns. Every single time, it was a total nightmare to fix, and frankly, it was eating into their budget and my team’s sanity. They needed a way to let editors update content without nuking the design. Sound familiar?

    This isn’t a new problem in WordPress development, but October’s Gutenberg releases—21.6, 21.7, and 21.8—actually dropped a direct answer: content-only editing for unsynced Patterns. This, man, is a game-changer. Instead of custom hack-jobs to lock down blocks, we can now tell WordPress, “Hey, this is a pattern. You can change the text and images, but don’t touch the structure.” It prevents those accidental layout shifts that used to drive everyone nuts, letting content teams do their job without becoming accidental designers.

    My first thought, before diving into these updates, was to roll out some complex JavaScript to disable block movers and editors based on user roles. And yeah, that could work, but it’s fragile. It’s custom code that adds maintenance overhead and inevitably breaks with future updates. The real fix, the robust one, had to come from WordPress itself. And with features like content-only editing, WordPress is finally giving us the tools we need to build truly resilient client sites, as detailed in the October 2025 developer roundup.

    Streamlining Taxonomy Displays and Developer Workflows

    Another common headache, especially for those building directory sites or extensive content hubs, is managing and displaying taxonomies. Building custom category or tag archive pages used to be a dive into WP_Query and a bunch of loops. Not exactly intuitive for theme or block developers. Now, the experimental Terms Query block provides a native, block-editor-friendly way to handle this. It’s like the Query block, but for terms.

    This means you can build dynamic, taxonomy-based layouts right in the editor. Imagine setting up a product category page or an author archive without writing a single line of custom PHP for the main loop. That’s solid. And the ongoing work to improve nesting and add a Terms Count inner block means it’s only going to get better. This approach drastically cuts down development time and future debugging. This is the kind of native WordPress functionality we should be leaning on.

    Beyond content and taxonomy, general developer efficiency got a boost. The Command Palette expanding across the admin is a quiet but powerful change. No longer stuck in the Site Editor, it’s now system-wide. For power users, this means keyboard-driven navigation across the whole admin. Fewer clicks, faster work. If you’re not using it, you’re missing out on some serious time-saving potential.

    Practical Example: Extending Block Bindings

    The Block Bindings API also saw improvements. Now, with the block_bindings_supported_attributes filter, you have more control over which attributes can be bound. This means extending core blocks with your own data sources becomes even more flexible. Let’s say you want to bind a custom image attribute from a plugin to the core Image block’s src. Before, you might have done some tricky workarounds. Now, it’s cleaner:

    <?php
add_filter( 'block_bindings_supported_attributes', function( $supported_attributes, $block_name ) {
    if ( 'core/image' === $block_name ) {
        $supported_attributes[] = 'data-custom-image-src'; // Your custom attribute
    }
    return $supported_attributes;
}, 10, 2 );

// Then, in your block.json or theme.json, define the binding
/*
{
    "blocks": {
        "core/image": {
            "attributes": {
                "src": {
                    "bindings": {
                        "source": "my-custom-plugin",
                        "args": {
                            "key": "image_url"
                        }
                    }
                }
            }
        }
    }
}
*/
?>

    This kind of extensibility is crucial. It means we’re moving towards a WordPress where complex data structures can be seamlessly integrated with the block editor without resorting to heavy custom block development for every little thing. It’s about working with the grain of WordPress, not against it.

    So, What’s the Point?

    The takeaway here is clear: WordPress is evolving fast, and these October updates prove it. Features like content-only editing for patterns and the Terms Query block aren’t just minor tweaks; they solve real, recurring client problems. Ignoring them means you’re building sites with old methods, leading to more maintenance, more bugs, and less satisfied clients. Lean into what core WordPress offers. It’ll save you time and headaches in the long run, and your clients will thank you for a more stable, user-friendly experience.

    Look, this stuff gets complicated fast. If you’re tired of debugging someone else’s mess and just want your site to work, drop my team a line. We’ve probably seen it before.

  • Extending WordPress Navigation Blocks with Custom Content

    I recently had a client come to me, pulling their hair out over a seemingly simple request: they wanted to drop a custom “mini-cart” block directly into their main navigation menu. Sounds straightforward, right? Well, not so fast. WordPress’s Navigation block, by default, is pretty particular about what it lets you put in there. It’s a total pain when you’re trying to achieve something beyond the standard link, and frankly, it kills a lot of creative menu ideas. They’d tried to force it with some dodgy CSS, and it was, as you can imagine, a complete mess in the editor, sometimes breaking the whole layout on certain screen sizes. That’s when we needed to talk about Extending Navigation Blocks the right way.

    The core of the problem is that the Navigation block is built to be a navigation tool, not a free-form content area. This is generally good for stability, but when you need to integrate custom functionalities – like a dynamic cart summary, a login form, or even a simple image – you hit a brick wall. My first thought, before really digging in, was to just tell them to live with it, or maybe try to inject the block content via some elaborate JavaScript after the page loads. But that’s a fragile, client-unfriendly solution that makes future maintenance a nightmare. It’s an editor problem, and it needed an editor-level fix.

    Extending Navigation Blocks: The Proper Hook

    The real fix lies in understanding how Gutenberg registers and manages blocks. Specifically, we need to tap into the blocks.registerBlockType filter to extend the allowedBlocks property of the core/navigation block. This isn’t just a hack; it’s a built-in WordPress mechanism for extending block functionality. The key here is to enqueue your custom JavaScript file using the enqueue_block_editor_assets hook, ensuring your script loads where it needs to: the block editor. This approach lets you tell the editor, “Hey, this navigation block? It can also handle this other block type now.” It’s clean, it’s maintainable, and it actually works within the editor.

    add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_script(
        'my-agency-extend-navigation-script',
        plugins_url( 'js/editor-script.js', __FILE__ ),
        array( 'wp-hooks', 'wp-blocks' ), // Dependencies for block filters.
        '1.0.0',
        true
    );
} );

    Once that PHP snippet is in place, you need the JavaScript. Create an editor-script.js file inside a js folder within your plugin (or theme, if you know what you’re doing, but plugins are usually better for this kind of functionality). This script will then hook into the blocks.registerBlockType filter. You can see a great example of this over at developer.wordpress.org, which provided the foundation for this method.

    const addToNavigation = ( blockSettings, blockName ) => {
	if ( blockName === 'core/navigation' ) {
		return {
			...blockSettings,
			allowedBlocks: [
				...( blockSettings.allowedBlocks ?? [] ),
				'core/image', // Replace with your custom block or desired core block, e.g., 'my-plugin/mini-cart'
			],
		};
	}
	return blockSettings;
};

wp.hooks.addFilter(
	'blocks.registerBlockType',
	'my-agency-add-block-to-navigation',
	addToNavigation
);

    See that 'core/image' part? That’s where you’d drop the name of whatever block you need to add. For my client, it would have been their custom mini-cart block. This snippet tells the Navigation block, “Hey, you can also accept images now.” Or, in a real-world scenario, “You can accept my custom mega menu block,” or “my user profile widget.” It opens up the Navigation block to any block you define, without breaking anything. This is the solid, robust way to manage custom requirements within the block editor, especially when dealing with core blocks that have strict allowedBlocks definitions. Trust me on this, trying to hack around these limitations will bite you later.

    So, What’s the Point?

    The lesson here is simple: don’t fight the editor. When WordPress gives you hooks and filters, use them. Trying to force square pegs into round holes with CSS or sketchy JavaScript injections for editor functionality is a total nightmare for anyone who has to maintain the site later. This method for extending navigation blocks might seem like a few extra lines of code, but it provides a stable, forward-compatible solution that makes both your life and your client’s life much easier. It ensures custom elements can live gracefully within the navigation, exactly as intended.

    Look, this stuff gets complicated fast. If you’re tired of debugging someone else’s mess and just want your site to work, drop my team a line. We’ve probably seen it before.