Poliflw

Creating rich, engaging, and interactive website experiences is a simple way to surprise, delight, and attract attention from website readers and users. Dynamic interactivity like instant search, form handling, and client-side “app-like” navigation where elements can persist across routes, all without a full page reload, can make the web a more efficient and interesting place for all.

But creating those experiences on WordPress hasn’t always been the easiest or most straightforward, often requiring complex JavaScript framework setup and maintenance.

Now, with the Interactivity API, WordPress developers have a standardized way for doing that, all built directly into core.

ELI5: The Interactivity API and the Image Block

Several core WordPress blocks, including the Query Loop, Image, and Search blocks, have already adopted the Interactivity API. The Image block, in particular, is a great way to show off the Interactivity API in action.

At its core, the Image blocks allow you to add an image to a post or page. When a user clicks on an image in a post or page, the Interactivity API launches a lightbox showing a high-resolution version of the image.

The rendering of the Image block is handled server-side. The client-side interactivity, handling resizing and opening the lightbox, is now done with the new API that comes bundled with WordPress. You can bind the client-side interactivity simply by adding the

to the image element, referencing the

You might say, “But I could easily do this with some JavaScript!” With the Interactivity API, the code is compact and declarative, and you get the context (local state) to handle the lightbox, resizing, side effects, and all of the other needed work here in the store object.

actions: { showLightbox() { const ctx = getContext(); // Bails out if the image has not loaded yet. if ( ! ctx.imageRef?.complete ) { return; } // Stores the positons of the scroll to fix it until the overlay is // closed. state.scrollTopReset = document.documentElement.scrollTop; state.scrollLeftReset = document.documentElement.scrollLeft; // Moves the information of the expaned image to the state. ctx.currentSrc = ctx.imageRef.currentSrc; imageRef = ctx.imageRef; buttonRef = ctx.buttonRef; state.currentImage = ctx; state.overlayEnabled = true; // Computes the styles of the overlay for the animation. callbacks.setOverlayStyles(); }, ...

The lower-level implementation details, like keeping the server and client side in sync, just work; developers no longer need to account for them.

This functionality is possible using vanilla JavaScript, by selecting the element via a query selector, reading data attributes, and manipulating the DOM. But it’s far less elegant, and up until now, there hasn’t been a standardized way in WordPress of handling interactive events like these.

With the Interactivity API, developers have a predictable way to provide interactivity to users on the front-end. You don’t have to worry about lower-level code for adding interactivity; it’s there in WordPress for you to start using today. Batteries are included.

How is the Interactivity API different from Alpine, React, or Vue?

Prior to merging the Interactivity API into WordPress core, developers would typically reach for a JavaScript framework to add dynamic features to the user-facing parts of their websites. This approach worked just fine, so why was there a need to standardize it?

At its core, the Interactivity API is a lightweight JavaScript library that standardizes the way developers can build interactive HTML elements on WordPress sites.

Mario Santos, a developer on the WordPress core team, wrote in the Interactivity API proposal that, “With a standard, WordPress can absorb the maximum amount of complexity from the developer because it will handle most of what’s needed to create an interactive block.”

The team saw that the gap between what’s possible and what’s practical grew as sites became more complex. The more complex a user experience developers wanted to build, the more blocks needed to interact with each other, and the more difficult it became to build and maintain sites. Developers would spend a lot of time making sure that the client-side and server-side code played nicely together.

For a large open-source project with several contributors, having an agreed-upon standard and native way of providing client-side interactivity speeds up development and greatly improves the developer experience.

Block-first and PHP-first: Prioritizing blocks for building sites and server side rendering for better SEO and performance. Combining the best for user and developer experience.

Backward-compatible: Ensuring compatibility with both classic and block themes and optionally with other JavaScript frameworks, though it’s advised to use the API as the primary method. It also works with hooks and internationalization.

Declarative and reactive: Using declarative code to define interactions, listening for changes in data, and updating only relevant parts of the DOM accordingly.

Performant: Optimizing runtime performance to deliver a fast and lightweight user experience.

Other goals are on the horizon, including improvements to client-side navigation, as you can see in this PR.

The Interactivity API shares a few similarities to Alpine—a lightweight JavaScript library that allows developers to build interactions into their web projects, often used in WordPress and Laravel projects.

Similar to Alpine, the Interactivity API uses directives directly in HTML and both play nicely with PHP. Unlike Alpine, the Interactivity API is designed to seamlessly integrate with WordPress and support server-side rendering of its directives.

With the interactivity API, you can easily generate the view from the server in PHP, and then add client-side interactivity. This results in less duplication, and its support in WordPress core will lead to less architectural decisions currently required by developers.

So while Alpine and the Interactivity API share a broadly similar goal—making it easy for web developers to add interactive elements to a webpage—the Interactivity API is even more plug-and-play for WordPress developers.

Interactivity API vs. React and Vue

Many developers have opted for React when adding interactivity to WordPress sites because, in the modern web development stack, React is the go-to solution for declaratively handling DOM interactivity. This is familiar territory, and we’re used to using React and JSX when adding custom blocks for Gutenberg.

Loading React on the client side can be done, but it leaves you with many decisions: “How should I handle routing? How do I work with the context between PHP and React? What about server-side rendering?”

Part of the goal in developing the Interactivity API was the need to write as little as little JavaScript as possible, leaving the heavy lifting to PHP, and only shipping JavaScript when necessary.

The core team also saw issues with how these frameworks worked in conjunction with WordPress. Developers can use JavaScript frameworks like React and Vue to render a block on the front-end that they server-rendered in PHP, for example, but this requires logic duplication and risks exposure to issues with WordPress hooks.

For these reasons, among others, the core team preferred Preact—a smaller UI framework that requires less JavaScript to download and execute without sacrificing performance. Think of it like React with fewer calories.

Luis Herranz, a WordPress Core contributor from Automattic, outlines more details on Alpine vs the Interactivity API’s usage of Preact with a thin layer of directives on top of it in this comment on the original proposal.

Preact only loads if the page source contains an interactive block, meaning it is not loaded until it’s needed, aligning with the idea of shipping as little JavaScript as possible (and shipping no JavaScript as a default).

In the original Interactivity API proposal, you can see the run-down and comparison of several frameworks and why Preact was chosen over the others.

What does the new Interactivity API provide to WordPress developers?

In addition to providing a standardized way to render interactive elements client-side, the Interactivity API also provides developers with directives and a more straightforward way of creating a store object to handle state, side effects, and actions.

Graphic from Proposal: The Interactivity API – A better developer experience in building interactive blocks on WordPress.org

Directives, a special set of data attributes, allow you to extend HTML markup. You can share data between the server-side-rendered blocks and the client-side, bind values, add click events, and much more. The Interactivity API reference lists all the available directives.

These directives are typically added in the block’s

file, and they support all of the WordPress APIs, including actions, filters, and core translation APIs.

Here’s the render file of a sample block. Notice the click event (

data-wp-on--click="actions.toggle"

), and how we bind the value of the aria-expanded attributes via directives.

Do you need to dynamically update an element’s inner text? The Interactivity API allows you to use

on an element, just like you can use v-text in Vue.

You can bind a value to a boolean or string using

on the element. This means you can write PHP and HTML and sprinkle in directives to add interactivity in a declarative way.

Handling state, side effects, and actions

The second stage of adding interactivity is to create a store, which is usually done in your

file. In the store, you’ll have access to the same context as in your

In the store object, you define actions responding to user interactions. These actions can update the local context or global state, which then re-renders and updates the connected HTML element. You can also define side effects/callbacks, which are similar to actions, but they respond to state changes instead of direct user actions.

import { store, getContext } from '@wordpress/interactivity'; store( 'create-block', { actions: { toggle: () => { const context = getContext(); context.isOpen = ! context.isOpen; }, }, callbacks: { logIsOpen: () => { const { isOpen } = getContext(); // Log the value of `isOpen` each time it changes. console.log( `Is open: ${ isOpen }` ); }, }, } );

The Interactivity API is production-ready and already running on WordPress.com! With any WordPress.com plan, you’ll have access to the core blocks built on top of the Interactivity API.

If you want to build your own interactive blocks, you can scaffold an interactive block by running the below code in your terminal:

npx @wordpress/create-block@latest my-interactive-block --template @wordpress/create-block-interactive-template

This will give you an example interactive block, with directives and state handling set up.

You can then play around with this locally, using

, using a staging site, or by uploading the plugin directly to your site running a plugin-eligible WordPress.com plan.

If you want a seamless experience between your local dev setup and your WordPress.com site, try using it with our new GitHub Deployments feature! Developing custom blocks is the perfect use case for this new tool.

The best way to learn something new is to start building. To kick things off, you may find the following resources a good starting point:

Missing out on the latest WordPress.com developments? Enter your email below to receive future announcements direct to your inbox. An email confirmation will be sent before you will start receiving notifications—please check your spam folder if you don't receive this.

With WordPress today you need to use custom code or a plugin to create a custom post type like “Book” or “Member.” This is a popular need, and there are a variety of approaches; however, one challenge is that the end-user experience can be confusing and non-standardized.

A few weeks ago, some Automatticians and I went to the 7th CloudFest Hackathon in Rust, Germany to explore a solution for this. We started hacking on a deeply nerdy project, JSON Schema forms and fields, and ended up with a fascinating approach to an age-old question: What if you could register custom post types and custom fields directly in the WordPress admin?

Forty-eight hours turns an idea into reality

The CloudFest Hackathon is an event that allows developers from around the globe to take ideas and turn them into realities.

During the Hackathon, teams of developers from various content management systems and hosting companies come together to contribute to projects that align with the core principles of the event: the projects must be not-for-profit, interoperable, and open source.

This year, we focused on a JSON Schema Field/Form Renderer. While most of us explored using JSON Schema to dynamically register admin forms and fields, Dennis Snell and Adam Zieliński decided to take the project one step further! They hacked together a plugin that introduced the ability to register custom post types and custom fields directly from the WordPress admin. More notably, everything happens within the block editor—you have to see it to believe it:

This work poses some interesting possibilities for custom post type and custom field implementation because it could fundamentally change the way low- to no-code WordPress users modify their sites.

Should WordPress let you register custom post types and custom fields from the admin? #CFHack2024

— daniel (@dbchhbr) March 17, 2024

I got quite a range of responses, ranging from “Heck Yes! It should have already been a core feature now. Such an integral part of every other site” to “Admin should only be for content and user management. Everything else should be configured in code and version controllable.”

So why the range in responses? Let’s discuss.

Dennis and Adam built our prototype using the following conventions:

A custom post type

holds templates for user-defined data types.

The title of a post in the

defines the name of the new data type. The post itself is the rendering template and comprises any set of normal blocks. Names are given to select block attributes within the post, and these names are mapped into the data type.

When creating new posts for the given data type, the locked template is copied from the

template, and the block attribute annotations are preserved.

Finally, when rendering the

template, the attributes are pulled from the individual post of the given data type and spliced into the template.

The fascinating idea is that we don’t have to think about form fields; blocks already provide a rendering view and a modal editing experience. We can rely on the fundamental way blocks work and use the very same user experience to create custom data types in a way that users are already familiar with when editing a post or a site.

We can provide JSON-LD markup properties to the block editor using our Custom Fields Names block settings.

Custom post types define custom data types, so we use a template to not only define the data type, but also to provide a default rendering template. Each data attribute within a post type has a field where it’s possible to define that field with its JSON-LD property.

For example, say you had a “Book” custom post type. A few JSON-LD properties you could define using custom fields are:

We also chose to store a copy of each block attribute in the JSON attributes for that block. Since WordPress can now provide a post-to-JSON function, which merges the extracted attributes with the names assigned in the custom post type template, that template may have changed since the custom post was created. This means that no database migrations are necessary to render an updated version of a post.

The best part? The WordPress infrastructure that already exists (aka Gutenberg!) defines the data type. Because these custom posts are normal posts, and because they adopt the locked template for the data type definition, they are, in fact, renderable on their own! Even if the template has been updated and only the post itself is rendered, it will still display a meaningful representation of the data type as it was when it was created.

While our original Hackathon project was tailored towards developers and UX designers who would love to see a forms and fields API in WordPress, this prototype puts more power in the hands of low- to no-code WordPress users.

It also opens up a world of possibilities for providing a rendering view for any structured data. Imagine uploading a CSV and mapping the column names to block attributes, or connecting to a database or JSON API to map the records in the same way.

For example, if you had a CSV with business names, addresses, a rating, and a description, we could take that template post and insert a map block, a heading block, a star rating block, and a paragraph block and set the attributes to map to the CSV columns. It’s essentially an instant structured data renderer!

But even if we can define custom post types and fields in the editor, should we, as a WordPress community, consider adding it to core?

The existential question: Should it exist?

Adding this kind of functionality into WordPress core could open up a ton of opportunities for the average WordPress user. Instead of needing to get a developer involved to add a custom post type to their site, a user could simply do it themselves and define the necessary fields and structured data attributes.

On the other hand, allowing everyday users, who may not have a full grasp of how custom post types and structured data should work, free reign to create these data types themselves could have detrimental effects on the user experience of their websites. Clunky or incorrect implementation of structured data markup could also cause issues with how search engines crawl these sites, causing unintended negative impacts to search traffic.

Not only that, but as of right now, if a custom post type is accidentally deleted, all of the content posted to that custom post type will no longer be accessible through the admin (even though it will still be stored in the database). The user could think they “lost” their data.

What do you think? Are you in favor of giving website owners the ability to change and customize their custom post types and attributes? Or are there some website features that should always require a more technical hand and implementer?

We’d love to chat with you about your thoughts in the comments below.

Thanks to Lars Gersmann for leading the JSON Schema project with me and to everyone on the Syntax Errors team: Adam Zieliński, Dennis Snell, Julian Haupt, Michael Schmitz, Anja Lang, Thomas Rose, Marko Feldmann, Fabian Genes, Michael Schmitz, Jan Vogt, Lucisu, Maximilian Andre, Marcel Schmitz, and Milana Cap.

Missing out on the latest WordPress.com developments? Enter your email below to receive future announcements direct to your inbox. An email confirmation will be sent before you will start receiving notifications—please check your spam folder if you don't receive this.

When it comes to website-building, WordPress themes set your site up for success by providing stylish, preselected options for fonts, colors, and layouts. Even though themes provide the overall aesthetic, you still need to build out the posts, pages, and templates on your site. That’s where block patterns come in!

The WordPress.com Pattern Library is your new go-to resource for finding any kind of pattern for your beautiful WordPress website. With hundreds of pre-built patterns to choose from across over a dozen categories, you’ll be covered no matter your website’s specific needs.

Block patterns are collections of blocks made to work seamlessly with our modern themes. Need an “About” page? Check. A gallery? Check. A testimonial? Check. How about a newsletter? Check. We have just about anything you’ll need.

Best of all: for each pattern, the fonts, colors, and spacing will adapt to your theme’s settings, making for a cohesive look. Still, patterns aren’t locked or static either—after you’ve added the pattern to your post, page, or template, you can tweak it however you like.

This new public Pattern Library allows you to browse, preview, and easily share or implement whichever design speaks your tastes. Let’s take a look around.

If you want to explore the Pattern Library and don’t have anything in particular that you’re looking for, click through each category to spark some ideas.

At the top, you’ll find a fast and easy-to-use search box, allowing you to find exactly what you need. This is a great option if you don’t feel like browsing and want to jump right into a solution for your specific needs.

Sometimes you just need the components of a post, page, or template: a header, a “Subscribe” box, a store module, etc. Other times, you want to be able to copy and paste an entire page into existence. Scroll down past the categories and you’ll find our full-page patterns for whole pages: About, Blog, Contact, Store, and more.

Test the mobile responsiveness for each pattern

When looking through the library on a desktop or laptop device, you’ll see a gray vertical bar next to each pattern. That’s a nifty little slider that we’ve built into the library which allows you to see how each pattern responds to different screen sizes. Using your cursor to move the bar to the left, you’ll see what that design looks like on a mobile device; in the middle is where most tablets fall; and scroll back all the way to the right for the desktop/laptop version.

Like what you see? Simply click the blue “Copy pattern” button, open the WordPress.com editor to the post, page, or template you’re working on, and paste the design. It’s that easy. Once inserted, you can customize each block as needed using the right sidebar.

Your new favorite page-building tool

The Pattern Library is especially useful if you build websites for clients. Each pattern is built to work with any theme that follows our technical standards, speeding up page-building not just for you but also for your clients—all while maintaining the overall style of your theme.

In concrete terms, this means that our patterns take font, color, and spacing settings from the theme itself rather than using standard presets. This makes it far less likely for a site to break (or just look off) when you—or a client—experiment and make updates.

Our goal is always to make your life both easier and more beautiful. This new resource does just that. Check out the WordPress.com Pattern Library today to enhance your website-building experience!

Missing out on the latest WordPress.com developments? Enter your email below to receive future announcements direct to your inbox. An email confirmation will be sent before you will start receiving notifications—please check your spam folder if you don't receive this.

Re-Creating The New York Times’ Website in Under 30 Minutes Using WordPress.com

Using WordPress blocks and the Site Editor to quickly build a lookalike of one of the most famous sites on the web.

Jeremy Anderberg

In this “Build and Beyond” video, Jamie Marsland re-creates The New York Times’ website in less than 30 minutes using WordPress.com. By utilizing mega menus, master layouts, typography controls, and post grids, Jamie shows us what’s possible with the limitless customizations available with WordPress.

When it comes to mega menus, specifically, it’s worth noting that this is a highly complex customization that should only be attempted by WordPress pros and is mainly shown here as a demo of what’s possible. Please read this blog post on the WordPress.org developer blog before embarking on your own mega menu.

To learn more and get started on your own site today, click below:

Missing out on the latest WordPress.com developments? Enter your email below to receive future announcements direct to your inbox. An email confirmation will be sent before you will start receiving notifications—please check your spam folder if you don't receive this.

March 14, 2024

One of the biggest problems with design, I think, is trying to make your site look good on mobile and desktop. Having sidebars is great for desktop sites, but it doesn’t transfer to mobile very well.

According to the Google analytics, traffic to my site is about 54% mobile and about 45% desktop, with tablet showing barely over 1%. I wish we had an option to optimize it based on what the viewer was coming to your site with.

I feel the answer is: it’s already optimized. The issue is designing for the desktop first. Mobile use will only increase until the next tech revolution, and then it’s on to that. There’s no way to account for all the screen sizes and service types these days. Use an up to date theme, WordPress core, and don’t add unnecessary items.

*This isn’t a speech to you, just my thoughts in general that came up after reading your comment. 🙂🙌

This guide to recreating The New York Times’ website on WordPress.com in under 30 minutes is fantastic! It’s super easy to follow, even for beginners. The step-by-step instructions are clear, and I love how it helps you achieve a professional look quickly. Big thumbs up to the author for sharing this helpful tutorial!

I just started My Blog Can you Please Guide me How to make it properly, I’m too lost in this because of WordPress layout has been changed so much… and They have puted nonsence stuff in here that are not even required in here.

Amazing! I have to say I’m envious. I guarantee my attempt would not run so smoothly. 🙂

I admire sites whose blocks respond to mouseover by tinting the block, highlighting the content. I haven’t yet found how to duplicate this sleek effect – suggestions?

Glad to see James getting some attention and recognition here on the WordPressdotcom blog. He’s one of my favorite WordPress people who brings the latest news about WordPress. Keep posting his content, and I’ll read this blog more lol. I’m already subscribed to his Youtube.

Very impressive and useful 😎

Jelly Pixel Studio, a web development agency based in Indonesia, specializes in crafting unique and illustrative websites for clients worldwide. The company serves a wide variety of clients, from small businesses to larger corporations, utilizing WordPress.com as their primary hosting platform due to its exceptional stability, fast performance, and robust features.

Over the years, the agency has migrated numerous websites to WordPress.com and has seen consistent uptime and improved efficiency, saving both time and money. The agency’s founder, Andika Purnawijaya, better known as Dika Fei, cites WordPress.com as the magic solution that helped solve many hosting challenges for the agency’s clients.

Let’s explore a bit more about Jelly Pixel and how WordPress.com helps keep their clients happy.

Dika Fei embarked on his web development journey right after university, learning and mastering IBM’s WebSphere. His first interaction with WordPress.com came when he joined Codeable to work with various clients whose sites were hosted on the WordPress.com platform. Dika saw the immense value in WordPress.com and adopted it for the majority of his projects.

Jelly Pixel Studio was born out of a failed startup venture by Dika and three of his friends from college. After their initial attempt at creating something similar to Shopify for the Indonesian market didn’t work out, the team decided to channel their expertise into a highly successful web development agency. When choosing a platform, they settled on WordPress due to its simplicity and intuitiveness.

The team later branched out to form a second agency, WP Stronk, which handles subscription-based web maintenance and content entry.

When asked if the agencies focused on any specific niche, Dika said, “YES! Jelly Pixel is exceptionally skilled at creating illustrative websites with subtle scrolling animations. Our websites leave a lasting impression even after you close the tab.”

WordPress.com has been instrumental in helping Jelly Pixel Studio streamline its operations and deliver outstanding services to clients. With a mix of projects in maintenance and those being actively developed, Dika and his team of seven, or “the magnificent seven” as they like to call themselves, have benefited greatly from the platform’s robust features and top-notch performance.

WordPress developers and agencies are no strangers to the perils and pitfalls of hosting. But WordPress.com solves those problems for Jelly Pixel Studio clients:

What I love about WordPress.com is its exceptional stability and blazing-fast performance, regardless of your setup. Even with other managed hosting providers, you often need to be mindful of  various settings such as: cache parameters and PHP workers. However, with WordPress.com, everything just works seamlessly. It’s a true “set it and forget it” experience.

As long as your site is hosted on WordPress.com, you can rest assured that it won’t go down and it won’t slow down, no matter the traffic. I have no idea how you accomplished it, but it’s absolutely AMAZING!

The team considers WordPress.com to be a good fit for their clients. Why?

You have amazing support, and your infrastructure is LITERALLY MAGIC. We have monitored our clients’ uptime, and 100% is a number we often see. How is this even possible? “Amazing” would be an understatement. You have saved me from a ton of urgent calls at night.

Jelly Pixel Studio believes WordPress.com has one well-kept secret:

I firmly believe that WordPress.com is the best hosting option for WooCommerce, particularly those with high traffic.

He thinks this is a missed opportunity for many freelancers and agencies who may not have considered using WordPress.com for their hosting clients. He shares this example:

I have a client on a different host. They get HUGE traffic. Every time they have a sale, they need to purchase a package upgrade and I have to constantly monitor their ad parameters to ensure proper caching. With the way WordPress.com works, all of this would be seamlessly handled out of the box.

He adds:

Unfortunately, the knowledge of WordPress.com as a highly stable WooCommerce hosting solution seems to have been lost over time. It almost feels like a well-kept secret!

Dika and his team at Jelly Pixel Studio view WordPress.com as a valuable partner in their web development journey. Dika credits the platform for providing peace of mind, leading to a happier and more productive work environment for his team, as well as clients who no longer complain about their site’s performance. He looks forward to further cooperation with WordPress.com and hopes for the continued evolution of the platform’s capabilities.

At the heart of his work, Dika stands by this quote from Victor Frankl:

“For success, like happiness, cannot be pursued; it must ensue, and it only does so as the unintended side-effect of one’s personal dedication to a cause greater than oneself.”

This approach is echoed in the success story of Jelly Pixel Studio and WP Stronk, marking the agencies as businesses of kindness, dedication, and commitment to problem-solving.

The power of hosting with WordPress.com

If you’re interested in getting access to the tools and features on WordPress.com that can support your development process, click here to enable our “I am a developer” setting on your WordPress.com account.

Finally, if you’re in search of an agency specializing in illustrative websites and CRO (Conversion Rate Optimization), Jelly Pixel Studio can help you. For web and content maintenance, check out WP Stronk for their comprehensive services.

Missing out on the latest WordPress.com developments? Enter your email below to receive future announcements direct to your inbox. An email confirmation will be sent before you will start receiving notifications—please check your spam folder if you don't receive this.

In the last few weeks, our team here at WordPress.com has rebuilt developer.wordpress.com from the ground up. If you build or design websites for other people, in any capacity, bookmark this site. It’s your new home for docs, resources, the latest news about developer features, and more.

Rather than creating a unique, custom theme, we went all-in on using Twenty Twenty-Four, which is the default theme for all WordPress sites.

That’s right, with a combination of built-in Site Editor functionalities and traditional PHP templates, we were able to create a site from scratch to house all of our developer resources.

Below, I outline exactly how our team did it.

The developer.wordpress.com site has existed for years, but we realized that it needed an overhaul in order to modernize the look and feel of the site with our current branding, as well as accommodate our new developer documentation.

You’ll probably agree that the site needed a refresh; here’s what developer.wordpress.com looked like two weeks ago:

Once we decided to redesign and rebuild the site, we had two options: 1) build it entirely from scratch or 2) use an existing theme.

We knew we wanted to use the Site Editor because it would allow us to easily use existing patterns and give our content team the best writing and editing experience without them having to commit code.

We considered starting from scratch and using the official “Create Block Theme” plugin. Building a new theme from scratch is a great option if you need something tailored to your specific needs, but Twenty Twenty-Four was already close to what we wanted, and it would give us a headstart because we can inherit most styles, templates, and code from the parent theme.

We quickly decided on a hybrid theme approach: we would use the Site Editor as much as possible but still fall back to CSS and classic PHP templates where needed (like for our Docs custom post type).

With this in mind, we created a minimal child theme based on Twenty Twenty-Four.

We initialized our new theme by running

npx @wordpress/create-block@latest wpcom-developer

This gave us a folder with example code, build scripts, and a plugin that would load a custom block.

If you only need a custom block (not a theme), you’re all set.

But we’re building a theme here! Let’s work on that next.

First, we deleted

, the file responsible for loading our block via a plugin. We also added a

file with the expected syntax required to identify this as a child theme.

Despite being a CSS file, we’re not adding any styles to the

file. Instead, you can think of it like a documentation file where

specifies that the new theme we’re creating is a child theme of Twenty Twenty-Four.

/* Theme Name: wpcom-developer Theme URI: https://developer.wordpress.com Description: Twenty Twenty-Four Child theme for Developer.WordPress.com Author: Automattic Author URI: https://automattic.com Template: twentytwentyfour Version: 1.0.0 */

We removed all of the demo files in the “src” folder and added two folders inside: one for CSS and one for JS, each containing an empty file that will be the entry point for building our code.

The theme folder structure now looked like this:

The build scripts in

can build SCSS/CSS and TS/JS out of the box. It uses Webpack behind the scenes and provides a standard configuration. We can extend the default configuration further with custom entry points and plugins by adding our own

By doing this, we can:

Build specific output files for certain sections of the site. In our case, we have both PHP templates and Site Editor templates from both custom code and our parent Twenty Twenty-Four theme. The Site Editor templates need minimal (if any) custom styling (thanks to

), but our developer documentation area of the site uses a custom post type and page templates that require CSS.

Remove empty JS files after building the

files. Without this, an empty JS file will be generated for each CSS file.

Next, we installed the required packages:

​​npm install path webpack-remove-empty-scripts --save-dev

Our

ended up looking similar to the code below. Notice that we’re simply extending the

Any additional entry points, in our case

, can be added as a separate entry in the

// WordPress webpack config. const defaultConfig = require( '@wordpress/scripts/config/webpack.config' ); // Plugins. const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' ); // Utilities. const path = require( 'path' ); // Add any new entry points by extending the webpack config. module.exports = { ...defaultConfig, ...{ entry: { 'css/global': path.resolve( process.cwd(), 'src/css', 'global.scss' ), 'js/index': path.resolve( process.cwd(), 'src/js', 'index.js' ), }, plugins: [ // Include WP's plugin config. ...defaultConfig.plugins, // Removes the empty `.js` files generated by webpack but // sets it after WP has generated its `*.asset.php` file. new RemoveEmptyScriptsPlugin( { stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS } ) ] } };

In

, we enqueue our built assets and files depending on specific conditions. For example, we built separate CSS files for the docs area of the site, and we only enqueued those CSS files for our docs.

We didn’t need to register the style files from Twenty Twenty-Four, as WordPress handles these inline.

We did need to enqueue the styles for our classic, non-Site Editor templates (in the case of our developer docs) or any additional styles we wanted to add on top of the Site Editor styles.

To build the production JS and CSS locally, we run

For local development, you can run

(using the wp-env package) in another to start a local WordPress development server running your theme.

While building this site, our team of designers, developers, and content writers used a WordPress.com staging site so that changes did not affect the existing developer.wordpress.com site until we were ready to launch this new theme.

Twenty Twenty-Four has a comprehensive

file that defines its styles. By default, our hybrid theme inherits all of the style definitions from the parent (Twenty Twenty-Four)

We selectively overwrote the parts we wanted to change (the color palette, fonts, and other brand elements), leaving the rest to be loaded from the parent theme.

WordPress handles this merging, as well as any changes you make in the editor.

Many of the default styles worked well for us, and we ended up with a compact

file that defines colors, fonts, and gradients. Having a copy of the parent theme’s

file makes it easier to see how colors are referenced.

You can change

in your favorite code editor, or you can change it directly in the WordPress editor and then download the theme files from Gutenberg.

Why might you want to export your editor changes? Styles can then be transferred back to code to ensure they match and make it easier to distribute your theme or move it from a local development site to a live site. This ensures the Site Editor page templates are kept in code with version control.

When we launched this new theme on production, the template files loaded from our theme directory; we didn’t need to import database records containing the template syntax or global styles.

Global styles are added as CSS variables, and they can be referenced in CSS. Changing the value in

will also ensure that the other colors are updated.

For example, here’s how we reference our “contrast” color as a border color:

border-color: var(--wp--preset--color--contrast);

Some plugins require these files in a theme, e.g. by calling

, which does not automatically load the Site Editor header template.

We did not want to recreate our header and footer to cover those cases; having just one source of truth is a lot better.

By using

, we were able to render our needed header block. Here’s an example from a header template file:

' ); ?> >

Our new home for developers is now live!

Check out our new-and-improved developer.wordpress.com site today, and leave a comment below telling us what you think. We’d love your feedback.

Using custom code and staging sites are just two of the many developer features available to WordPress.com sites that we used to build our new and improved developer.wordpress.com.

If you’re a developer and interested in getting early access to other development-related features, click here to enable our “I am a developer” setting on your WordPress.com account.

Missing out on the latest WordPress.com developments? Enter your email below to receive future announcements direct to your inbox. An email confirmation will be sent before you will start receiving notifications—please check your spam folder if you don't receive this.

There are currently very few options for individual users to control how their content is used for AI training, and we want to change that. That’s why we’re launching a new tool that lets you opt out of sharing content from your public blogs with third parties, including AI platforms that use such content for training models.

The reality is that AI companies are acquiring content across the internet for a variety of purposes and in all sorts of ways. We will engage with AI companies that we can have productive relationships with, and are working to give you an easy way to control access to your content.

We’re also getting ahead of proposed regulations around the world. The European Union’s AI Act, for example, would give individuals more control over whether and how their content is utilized by the emerging technology. We support this right regardless of geographic location, so we’re releasing an opt-out toggle and working with partners to ensure you have as much control as possible regarding what content is used.

Here’s how to opt out of sharing:

The new toggle can be found in Settings → General → privacy section. Or, you can click here: https://wordpress.com/settings/general.

To opt out, visit the privacy settings for each of your sites and toggle on the “Prevent third-party data sharing” option.

Please note: If you’ve already chosen in your settings to discourage search engines from crawling your site, we’ve automatically applied that privacy preference to third-party data sharing.

We already discourage AI crawlers from gathering content from WordPress.com and will continue to do so, save for those with which we partner. We want to represent all of you on WordPress.com and make sure that there are protections in place for how your content is used. As part of that, we have added a setting to opt out of sharing your public site content with third parties. We are committed to making sure our partners respect those decisions.

Missing out on the latest WordPress.com developments? Enter your email below to receive future announcements direct to your inbox. An email confirmation will be sent before you will start receiving notifications—please check your spam folder if you don't receive this.

My Condolences, You’re Now Running a Billion-Dollar Business

A few things I’ve learned during my interim role of running WordPress.com

Daniel Bachhuber

Halfway through a relaxing winter break with my family, I opened Slack for a quick dopamine hit. The message I saw waiting from Matt, Automattic’s CEO, was quite the surprise:

“Would you be interested in running WordPress.com while I’m on sabbatical?”

In honesty, my initial reaction was “No, not really.” It seemed like a lot of work, stressful, etc. But, I named my last team YOLO for a reason: the answer is always “Yes,” because you only live once.

Many teams at Automattic use the “red / yellow / green check-in” as a communication tool. At nearly the one-month mark of running WordPress.com, I can safely say I’ve experienced the entire rainbow of emotional states. Today, I’d like to share a few of my learnings with the hope that they help you during your leadership journey.

Also, one pro tip: don’t open Slack on vacation.

Problem #1: I’m receiving 50x more pings

My former team is largely based in Europe, so their day started much earlier than mine. When I signed on for the morning, I’d usually have a few things to respond to before I dived into work.

These days, I drink from the firehose. I wake up to dozens of P2 mentions, Slack DMs, and other communication threads. I clear them out, and then they just pile up again.

Solution: Delegate, delegate, delegate

Ideally, I’d like to run the business while skiing fresh powder. In order to do so, I need a great team whom I can trust to get the job done.

For our recent efforts, the WordPress.com leadership team traveled a collective 160 hours to meet in NYC. While there, we focused on identifying goals that answered the question: “If we did this in the next 90 days, would it be transformative to the business?” Everyone went home with a specific set of goals they own. Knowing what we’re trying to do and who is responsible for what are two key elements of delegation.

Additionally, I also encourage the team on a daily basis to:

Actively work together before they come to me. On a soccer field, the team would get nowhere if they had to ask the coach before every pass.

Come to me with “I intend to,” not “What should I do?” Actively acting on their own and reporting progress represents the highest level of initiative.

Ultimately, I should be the critical point of failure on very few things. When something comes up, there should be an obvious place for it within the organization.

Problem: Something is always on fire

I am a very “Inbox Zero” type of person. Running WordPress.com breaks my brain in some ways because there’s always something broken. Whether it’s bugs in our code, overloaded customer support, or a marketing email misfire, entropy is a very real thing in a business this large.

Even more astounding is the game of “whac-a-mole”: when making a tiny change to X, it can be difficult to detect a change in Y or take Y down entirely. There’s always something!

Solution: Focus on the next most important thing

When dealing with the constant fires and the constant firehose, I’ve found a great deal of comfort in asking myself: “What’s the most important thing for me to work on next?”

Leadership is about results, not the hours you put in. More often than not, achieving these results comes from finding points of leverage that create outsized returns.

At the end of the day, the most I can do is put my best effort forth.

By default, nothing will ever get done in a large organization. There are always reasons something shouldn’t be done, additional feedback that needs to be gathered, or uncertainties someone doesn’t feel comfortable with.

If you’ve gotten to the point where you’re a large organization—congratulations! You must’ve done something well along the way. But, remember: stasis equals death. Going too slowly can be even more risky than making the wrong decision.

I think “70% confident” has been kicking around for a while, but Jeff Bezos articulated it well in his 2016 letter to shareholders (emphasis mine):

Most decisions should probably be made with somewhere around 70% of the information you wish you had. If you wait for 90%, in most cases, you’re probably being slow. Plus, either way, you need to be good at quickly recognizing and correcting bad decisions. If you’re good at course correcting, being wrong may be less costly than you think, whereas being slow is going to be expensive for sure.

In leadership, I find “70% confident” to be a particularly effective communication tool. It explicitly calls out risk appetite, encourages a level of uncertainty, and identifies a sweet spot between not enough planning and analysis paralysis. Progress only happens with a certain degree of risk.

I’m excited to start sharing what we’ve been working on. Stay tuned for new developer tools, powerful updates to WordPress.com, and tips for making the perfect pizza dough. If you’d like some additional reading material, here is a list of my favorite leadership books.

Original illustrations by David Neal.

Missing out on the latest WordPress.com developments? Enter your email below to receive future announcements direct to your inbox. An email confirmation will be sent before you will start receiving notifications—please check your spam folder if you don't receive this.

February 27, 2024

Thanks for sharing “behind the scenes info.” I always value the Happiness Engineers!!

This is a great and highly relevant post Daniel. Do you blog about this topic regularly, I mean when you don’t have a billion dollars to watch over, of course?

returning to writing for my WordPress blog after some months, I find that the editing has totally changed, and become far less intuitive. I also find that when I finally managed to open the editing toolbar, there was no entry for changing text colour. This is serious enough to interfere with my work, and I know of one well esteemed blogger of several years standing who has just given up ln the face of the challenge.

Why, why, why?

H! Please reach out to our support team at https://wordpress.com/help. We’re here to help you navigate through these changes, find the tools you need, and make sure your blogging experience is as intuitive and rewarding as possible.

Congratulations!!!

I worked for 30+ years for a Fortune 500 company that made multiple billions every year. As a mid-level manager, I learned the hard way about the kinds of solutions that Daniel mentions. They all worked for me and helped me and my teams be successful. Thanks for sharing these insights. I hope new and early-career managers reading this piece will try them and adopt them.

Hi Daniel,

first of all my best wishes to Matts sabbatical. Thank you for the thoughts on leadership and these nice illustrations by David Neal.

Of course, running a billion dollar business demands dynamic, presence and speed sometimes. As far as I am concerned, I would like to put forward a thought on slowliness. Of course, there are things to do or decide immediately, in case of emergency or substantial goals and processes.

In my experience, many problems tend to solve themselves and don’t need over-re-action.

All the other questions may and can be sorted out with patient consideration and deliberation.

Good wishes to you and all the wordpress teams

Interesting point, Arnold. I’m inclined to agree. I’m quite a slow, considered person, but I also know the power and value of making a decision based on the knowledge and information you have at the time and rolling with it. I produce a lot of live programmes and work in and around live events, mostly in a media production capacity. Timeliness is crucial in that world. We can’t afford to be slow. We have to do a lot of problem-solving and make decisions quickly. I’m a fan of the fail-fast, fail-forward ethos of the software development world, which I think the creative industries (certainly in the UK) could do with adopting more. But, all that said, on a macro level, there is a place for slow, considered thought.

I am loving the illustrations so big up to David Neal on that! All the best to Matt on his sabbatical and all the best to you, Daniel, on your stint at the helm of WordPress.com. I agree, when an opportunity like that comes along the answer has gotta be yes! It must be exciting and intimidating all at the same time. You may not know it, but I plan on being at the helm of a billion dollar company one day too (she said from her tiny cubicle doing mundane tasks). I’m pretty sure this information will come in handy for when I get there – and even on my journey there – so thank you for sharing.

Thank you for taking on the challenge and for posting this, Daniel.

That’s funny! Congratulations though!

This article is interesting and outside the usual theme for this blog, because this article talks about behind the scenes at WordPress.com. “Running WordPress.com breaks my brain in some ways because there’s always something broken.” Yes, I am aware of that, as a user I occasionally pay attention to Automattic’s Github and actually find various issues that need to be resolved, but on the surface or to the user, everything almost always seems smooth and fine. This is a great thing. Congratulations!

Our Deepest Sympathies… 😁

I like the “something is always on fire” observation. I find it’s true across a wide spectrum of situations.

Fascinating, I completely concur

Absolutely awesome expression ☺️

Elementor will not send me the verification code to access my account HELP

I am sure my account has been HACKED!!!!!

Hey there! You will need to reach out to Elementor directly for support with their software, as it is a third-party service and we are not able to provide support for account access. Hope this helps!

Great post, Daniel. I appreciate and admire your honesty. The way you present your problems and approach to solving them is really valuable too. Thank you. I think the Bezos quote is a good one, although I think ehat you and Matt Mullenweg have done with WordPress has immeasurably more integrity than what that man has done with the way he runs Amazon and behaves in general, but that’s a debate for another time.

Good luck to you, a great post, if your team can do anything about You Tube videos it would be great. They used to work fine, however, when I now share a you tube video on WordPress the views don’t count anymore. It’s not just WordPress, if you share from facebook via my blog the views only register as one even if thousands watch.

Hey there, you will need to reach out to YouTube directly for support with video view count as YouTube is a third-party service. Hope this helps!

Nice to read about highlights inside your firm. Great stuff from wordpress.com team

I love the fact that you gave a solution to each problem from your perspective. This is such a helpful piece for me because I have huge aspirations, and I would love to run my own business in the near future.

Thanks Daniel!

I may not own or work for a billion-dollar business, however I did my all your information very insightful. The overwhelming thought of receiving endless notification pings scares me, however, your expertise on focusing on the most important task really gives me insight not to panic and what to prioritize in. Also, the idea that although ideal to have all the information, that is not always the case. Sometimes you have to make decisions based on the information that is currently provided, so you have to be confident in your decision and just go for it. I will definitely apply this at work. Thank you for sharing.

I’m just starting out opening a VERY small business and I can’t tell you how reassuring this post was. It’s a great reminder to prioritize and delegate. Thank you.

The WordPress project team is continuously improving the Site Editor—your one-stop shop for editing and designing your site.

The latest batch of updates—Gutenberg 17.4 and 17.5—include a handful of small but powerful changes designed to improve both your WordPress experience and that of your site’s visitors.

Let’s take a look at what’s new.

When you’re in the zone making changes to the look and feel of your site, you sometimes hit a dead end or realize that the version you had three or four font and color tweaks ago was a bit better. The updated style revisions pane gives you a robust, detailed log of the design changes you’ve made and makes turning back the clock easier with a one-click restore option to take you back to that perfect design.

Newly added pagination and more granular details make this feature even more powerful.

You can access style revisions from the Site Editor by clicking the “Styles” icon on the top right of the page, and then clicking the “Revisions” clock icon.

It’s now much easier to manage your site and post-editing preferences, which have been combined and enhanced in the latest update. In addition to familiar settings, you’ll find new appearance and accessibility options, and an “allow right click” toggle which allows you to override stubborn browser defaults. You can access your preferences by heading to the three-dot menu at the top right of the editor and clicking “Preferences” at the bottom.

The Gallery Block’s always been a great way to show off a collection of photos or images. And now there’s a fun new setting to randomize the order in which those images appear every time the page or post is loaded by a new visitor.

You can turn this setting on with a toggle found at the bottom of the block settings pane:

Not everybody knows about the Site Editor’s List View, but it can make editing your site, posts, and pages significantly faster and easier. A new addition to the List View makes editing even more convenient: just right-click any item in the list to open up the settings menu for the selected block.

Even small changes can make a big difference to your workflow, and your site visitor’s overall experience.

We’d love to hear what you think about the new features when you’ve had a chance to take them for a test drive!

Missing out on the latest WordPress.com developments? Enter your email below to receive future announcements direct to your inbox. An email confirmation will be sent before you will start receiving notifications—please check your spam folder if you don't receive this.

If one of your 2024 goals is to take your career to the next level, it’s worth taking a hard look at your resume. In a world where bots are scanning resumes for keywords, doing something unique—like creating a website just for your resume—is perhaps risky, but can help you stand out from the pack. And even if you aren’t actively looking for a new workplace, having a resume-focused site is great for your personal brand.

Today, we’re going to show you how to use (nearly) any WordPress.com theme to create a stellar resume website.

An example using the Bibliophile theme.

For the purposes of your resume site, think less about the structure of the theme and more about the overall aesthetics. Whether you’re going for fun and retro or more buttoned-up, think about your industry and what represents you most clearly. As you’re scrolling through our showcase, pay attention to any theme that stands out before you even really think about it—the one that makes you say, “Ooh, that one is cool.”

2. Publish your resume items as posts.

Once you select a theme, start adding content. Turn each section of your resume into its own post:

Career objective and personal statement

Education

Work experience #1

Work experience #2

Work experience #3

Certifications, memberships, and additional skills

Depending on the theme, it may make sense to publish them in a specific order that reads the best on a visual level. For example, put your career objective at the top, then your most recent work experience, etc. You can also edit publish dates to move things around in the way that fits best with the theme you choose.

In addition to utilizing posts that list out your resume items, you should also include at least two pages:

About

Contact

On the “About” page, feel free to tell your story in a slightly more casual way—while still maintaining an appropriate level of professionalism for your industry. On the “Contact” page, you can either use our built-in Contact Form block or simply provide your email address. (We don’t recommend putting your phone number directly on your site.)

If you hit the “Preview & Customize” button on any theme page, you’ll be brought to our site preview feature, which shows your site using that theme. Try it out! This is an example with the Pixl theme.

You might also want to add additional pages, depending on your career.

If you’re a writer or artist, including a “Portfolio” or “Work Examples” page is a good idea.

For a software engineer, a showcase of projects or code snippets you worked on may be a valuable addition.

If you have LinkedIn recommendations or other testimonials of your work, a “Testimonials” page may be in order.

Finally, no matter your field, pages like “Hobbies” or “Volunteering” can add some personal flavor and show prospective employers that you’re more than just an automaton.

This is an example using the fun and nostalgic Dos theme.

Once your posts and pages are published, share your site with the world! Or, as we say around here: ship it. Share your shiny new site on social media, include the URL in any doc/PDF resumes you send out (cover letters, too), and add it to your email signature.

Whether you’re searching for a job or not, be sure to actively update your site with any new jobs, roles, achievements, etc.

Missing out on the latest WordPress.com developments? Enter your email below to receive future announcements direct to your inbox. An email confirmation will be sent before you will start receiving notifications—please check your spam folder if you don't receive this.