# Getting Started with WordPress Block Development Using Studio by WordPress.com Starting a WordPress development environment doesn’t have to feel like trying to pilot the Starship Enterprise with an Ikea manual. Luckily, these days we have the tools to make it almost disappointingly simple. Enter [Studio by WordPress.com](https://developer.wordpress.com/studio/), a quick, no-fuss solution to spin up WordPress instances for development. This guide will walk you through setting up Studio for block development and making sure everything works just as it should. ![Studio by WordPress.com Website](https://cdn.hashnode.com/res/hashnode/image/upload/v1730021821330/5c4fc022-608b-4f36-8d43-fd8d894fdee4.png align="center") ## Studio vs. LocalWP: Why Choose Studio? If you’re after a comprehensive tool with support for local domains, multisite, and more, [LocalWP](https://localwp.com) is a popular choice. But if ease-of-use and a streamlined setup sound good, Studio by WordPress.com is highly recommended here. It’s fast, efficient, and doesn’t bog you down with extra setup steps. ## Step 1: Download and Install Studio First things first: head to the [Studio by WordPress.com](https://developer.wordpress.com/studio/) site and download the installer that suits your operating system. **On Mac**: Open the downloaded `.dmg` file, then drag the Studio app into your Applications folder. Easy as pie (mmmm, Apple Pie). ![Studio Installation Process](https://cdn.hashnode.com/res/hashnode/image/upload/v1730022102830/102f4550-5177-4aea-97a1-edffbcdc1c61.png align="center") ## Step 2: Set Up Your First Site Once installed, open Studio, and you’ll be greeted with the friendly *“Add Your First Site”* prompt. Click it to start creating your local WordPress site. ![Add your first site prompt](https://cdn.hashnode.com/res/hashnode/image/upload/v1730022164795/f444dd04-a14c-4745-b0b9-64567d66fff3.png align="center") **Customize Your Site Path**: If you’re a stickler for organisation (who isn’t?), hit the “Advanced Settings” dropdown. I like to keep all my sites in a `/Sites` folder for easy access, so here’s where you can set a custom installation path if you’re the same way. ![Advanced Settings](https://cdn.hashnode.com/res/hashnode/image/upload/v1730022252382/6b98b5dd-1258-4841-9f36-d7869a3a9d71.png align="center") While we are at it, let’s give our site a name. I’ve chosen “Sandbox”. ## Step 3: Finalise Your Site Creation After you’ve named your site and set any advanced settings, go ahead and click “Add Site.” Studio will now work its magic. You’ll see a progress bar, and in no time, you’ll be met with your site dashboard. ![Site Installation Progress Bar](https://cdn.hashnode.com/res/hashnode/image/upload/v1730022310722/e8485d43-9c81-43c0-9189-f7e3f3949f8f.png align="center") The dashboard provides links to key areas of your site, so you’re always one click away from the WordPress dashboard, file access, or terminal. ![Studio Site Dashboard](https://cdn.hashnode.com/res/hashnode/image/upload/v1730022365374/668ac7ba-47b1-42f9-9975-b6a5b9210ba6.png align="center") But first, let’s make sure everything is working. ## Step 4: Open the WordPress Dashboard Click the “WP Admin” link beneath your site title, and this will bring you right into the WordPress dashboard, where you’ll do most of your WordPress configuration and plugin management. If the WordPress dashboard appears, you’re ready to start developing! ![The WordPress Dashboard](https://cdn.hashnode.com/res/hashnode/image/upload/v1730022492498/deba8f64-b85b-45ef-9d71-1f92c9235c54.png align="center") ## Step 5: Access Your Code Editor Studio provides a quick “VS Code” button on the dashboard, so if VS Code is your editor of choice, this opens your site project directly in VS Code. Not using VS Code? You might want to give it a try [download it directly from the VS Code website](https://code.visualstudio.com). It’s incredibly versatile, with plugins for just about anything. ![VS Code Website](https://cdn.hashnode.com/res/hashnode/image/upload/v1730022892979/07f01fe8-df49-430f-bf84-9eeefa3931be.png align="center") After you have VS Code installed, clicking “Open in VS Code” pulls up your site files in the editor, ready to start development. ![Sandbox Website in VS Code](https://cdn.hashnode.com/res/hashnode/image/upload/v1730022968930/937bc4bb-327a-4dbf-b8b5-48f689c97ac8.png align="center") ## Step 6: Use the Integrated Terminal For block development, we’ll need the command line for some operations. VS Code has an integrated terminal that makes this easy to access: **Access the Terminal**: Go to “View” > “Terminal” in VS Code. ![Open Terminal with View > Terminal](https://cdn.hashnode.com/res/hashnode/image/upload/v1730023223920/5c2b7207-fe25-4cfa-800f-c08059585007.png align="center") From here, you can run commands directly within your development environment. ![VS Code with the Integrated Terminal](https://cdn.hashnode.com/res/hashnode/image/upload/v1730023250001/e5074468-c2e2-4875-b28b-a1e3abea9fe9.png align="center") ## Step 7: Install Node.js and Start with `create-block` Most block development projects require Node.js, a JavaScript runtime that lets you run development scripts on your computer. Go to the [Node.js website](https://nodejs.org/en) and install it. Once installed, you’re ready to start creating custom blocks. ![Node.js website](https://cdn.hashnode.com/res/hashnode/image/upload/v1730023589145/aad23276-0a9b-4040-a969-07db79ce2efd.png align="center") With Node.js installed, navigate to the plugins folder in your terminal: ```bash cd wp-content/plugins/ ``` ![Change Directory to the Plugins folder](https://cdn.hashnode.com/res/hashnode/image/upload/v1730023864565/82aba910-a980-4526-8ffc-46516a1cb9df.png align="center") **Tip:** `cd` means “Change Directory”. Run the `create-block` command to generate your first block plugin scaffold: ```bash npx @wordpress/create-block@latest ``` This command guides you through setting up a custom block plugin in interactive mode, with prompts to configure the basics like slug, name, and category. ![Create Block Prompt](https://cdn.hashnode.com/res/hashnode/image/upload/v1730024178312/34c1f5af-c736-45f0-8aaa-b5638bfc5ea0.png align="center") For my installation I chose the following options: * The template variant to use for this block: `static` * The block slug used for identification (also the output folder name): `my-first-block` * The internal namespace for the block name (something unique for your products): `my-first-block` * The display title for your block: `My First Block` * The short description for your block (optional): `This is my first block, there are many like it, but this one is mine` * The dashicon to make it easier to identify your block (optional): `smiley` * The category name to help users browse and discover your block: `design` * Do you want to customize the WordPress plugin? `N` The script will then take a moment to initiate the plugin. ![The script indicates it is building the plugin](https://cdn.hashnode.com/res/hashnode/image/upload/v1730024630412/c1c1f254-f86a-4d11-a10c-5f4867db18c4.png align="center") Once done, you’ll see your new block plugin appear in the plugins folder. ![The block has been created](https://cdn.hashnode.com/res/hashnode/image/upload/v1730024737636/1d340698-3d66-4368-afdb-a6f749059e9c.png align="center") Follow the instructions provided, `cd` into the plugin (`cd my-first-block`) and run `rpm run build` to build the assets. You should now be able to access the block in the Block Editor (after a refresh of course). --- ## Wrapping Up: Your Block Development Setup with Studio With [Studio by WordPress.com](https://developer.wordpress.com/studio/) and a few additional tools, you’ve now got a fast and efficient setup for block development. You’re now ready to dive into custom WordPress block development with a streamlined local environment. Time to start building the next great WordPress plugin! If you hit any snags, drop a question in the comments.