Title: Beyond block styles, part 1: using the WordPress scripts package with themes
Author: Justin Tadlock
Published: July 19, 2023
Last modified: August 9, 2024

---

 * [Showcase](https://wordpress.org/showcase/)
 * [Plugins](https://wordpress.org/plugins/)
 * [Themes](https://wordpress.org/themes/)
 * [Hosting](https://wordpress.org/hosting/)
 * [News](https://wordpress.org/news/)
    - [Learn WordPress](https://learn.wordpress.org/)
    - [Documentation](https://wordpress.org/documentation/)
    - [Education](https://wordpress.org/education/)
    - [Forums](https://wordpress.org/support/forums/)
    - [Developers](https://developer.wordpress.org/)
    - [Blocks](https://wordpress.org/blocks/)
    - [Patterns](https://wordpress.org/patterns/)
    - [Photos](https://wordpress.org/photos/)
    - [Openverse ︎](https://openverse.org/)
    - [WordPress.tv ︎](https://wordpress.tv/)
 *  - [About WordPress](https://wordpress.org/about/)
    - [Make WordPress](https://make.wordpress.org/)
    - [Events](https://events.wordpress.org/)
    - [Five for the Future](https://wordpress.org/five-for-the-future/)
    - [Enterprise](https://wordpress.org/enterprise/)
    - [Gutenberg ︎](https://wordpress.org/gutenberg/)
    - [Job Board ︎](https://jobs.wordpress.net/)
 * [Swag ︎](https://mercantile.wordpress.org/)
 * [Get WordPress](https://wordpress.org/download/)

Search in WordPress.org

 [ Get WordPress ](https://wordpress.org/download/)

[WordPress Developer Blog](https://developer.wordpress.org/news)

 * [Snippets](https://developer.wordpress.org/news/snippets/)
    - [Blocks](https://developer.wordpress.org/news/category/blocks/)
    - [Concepts](https://developer.wordpress.org/news/category/concepts/)
    - [Common APIs](https://developer.wordpress.org/news/category/common-apis/)
    - [Design](https://developer.wordpress.org/news/category/design/)
    - [Playground](https://developer.wordpress.org/news/category/playground/)
    - [Plugins](https://developer.wordpress.org/news/category/plugins/)
    - [Themes](https://developer.wordpress.org/news/category/themes/)
 *  - [About this site](https://developer.wordpress.org/news/about/)
    - [Updates](https://developer.wordpress.org/news/category/updates/)
    - [How to contribute](https://developer.wordpress.org/news/how-to-contribute/)
    - [Tips and guidelines](https://developer.wordpress.org/news/tips-and-guidelines-for-writers/)
 * [Subscribe](https://developer.wordpress.org/news/subscribe/)
 * [Developer Resources](https://developer.wordpress.org/)

 * [Snippets](https://developer.wordpress.org/news/snippets/)
    - [Blocks](https://developer.wordpress.org/news/category/blocks/)
    - [Concepts](https://developer.wordpress.org/news/category/concepts/)
    - [Common APIs](https://developer.wordpress.org/news/category/common-apis/)
    - [Design](https://developer.wordpress.org/news/category/design/)
    - [Playground](https://developer.wordpress.org/news/category/playground/)
    - [Plugins](https://developer.wordpress.org/news/category/plugins/)
    - [Themes](https://developer.wordpress.org/news/category/themes/)
 *  - [About this site](https://developer.wordpress.org/news/about/)
    - [Updates](https://developer.wordpress.org/news/category/updates/)
    - [How to contribute](https://developer.wordpress.org/news/how-to-contribute/)
    - [Tips and guidelines](https://developer.wordpress.org/news/tips-and-guidelines-for-writers/)
 * [Subscribe](https://developer.wordpress.org/news/subscribe/)
 * [Developer Resources](https://developer.wordpress.org/)

# 󠀁[Beyond block styles, part 1: using the WordPress scripts package with themes](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/)󠁿

By [Justin Tadlock](https://profiles.wordpress.org/greenshady/)

July 19, 2023

[Advanced](https://developer.wordpress.org/news/category/advanced/), [Themes](https://developer.wordpress.org/news/category/themes/)

Tell me if you’ve run into this problem before: you build an awesome block style
for one of the multitudes of blocks that WordPress offers. Maybe it’s something 
like a gradient ring for the Image block:

![WordPress post editor with an image of mountains in the content canvas. The image
has an orange and purple border.](https://developer.wordpress.org/news/files/2023/
07/block-style-gradient-ring.jpg)

Then you create another style for a tape effect. And another that adds a sepia filter—
you want some of those images to have an old-school feel.

Pretty soon you realize you could mix and match a few of them to create unique combinations.

But there’s just one problem standing in your way: WordPress only lets you apply
one style to a block at a time.

To solve this problem, you could easily create some extra styles that combined them.
Who wouldn’t want to try out that block style named _Gradient Ring with Tape and
Sepia Filter_?

![WordPress post editor with an image of mountains in the content canvas. The image
has a piece of tape at the top, making it appear as if it were taped to a wall. 
The image has a brown tint to it.](https://developer.wordpress.org/news/files/2023/
07/block-style-gradient-tape-sepia.jpg)

Yeah, that’s a slippery slope. Before you know it, you have dozens of block styles
to manage, each combination adding more overhead and cluttering the **Styles** panel.
I wouldn’t wish that headache on my worst enemy.

_There must be a better way…_

In this series, we are going to take a journey into the unknown—or at least, the
undocumented—far beyond the confines of the Block Styles API. It’s going to be long
and maybe a little rocky, but you and I **_will_** come out on the other side unscathed—
and with several new tricks to make styling magic with our themes.

The goal of this series is to teach you how to work with the APIs that block developers
get to play with every day. Only, you’ll use those features in a theme, instead 
of a block. And you’ll use code and techniques that conform to the guidelines for
the WordPress theme directory.

So buckle up. Let’s get going!

**Table of Contents**

 1. [What are we building?](https://developer.wordpress.org/news/2023/07/19/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/#what-are-we-building)
 2. [Prerequisites](https://developer.wordpress.org/news/2023/07/19/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/#prerequisites)
 3. [Setting up your theme to use the WordPress scripts package](https://developer.wordpress.org/news/2023/07/19/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/#setting-up-your-theme-to-use-the-wordpress-scripts-package)
 4.  a. [Creating the initial files and folders to house assets](https://developer.wordpress.org/news/2023/07/19/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/#creating-the-initial-files-and-folders-to-house-assets)
     b. [Installing the WordPress scripts package](https://developer.wordpress.org/news/2023/07/19/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/#installing-the-wordpress-scripts-package)
     c. [Theme webpack configuration](https://developer.wordpress.org/news/2023/07/19/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/#theme-webpack-configuration)
     d. [Using the scripts package](https://developer.wordpress.org/news/2023/07/19/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/#using-the-scripts-package)
     e. [Loading scripts and styles](https://developer.wordpress.org/news/2023/07/19/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/#loading-scripts-and-styles)
 5. [Stay tuned for the next post](https://developer.wordpress.org/news/2023/07/19/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/#stay-tuned-for-the-next-post)
 6. [Resources](https://developer.wordpress.org/news/2023/07/19/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/#resources)

## What are we building?

Block styles are great when you want to build a one-off design option into the UI.
They are easy to register in PHP with `register_block_style()` or JavaScript with`
registerBlockStyle()`. Add a few lines of CSS and you have a brand-new style.

But let’s be blunt. The **Styles** UI panel is limited. It’s a list of buttons. 
Their names get cut off after a few characters. And you have to hover over them 
to see a preview:

![WordPress editor with an image of a sailboat in the ocean at night. In the right
sidebar, the Styles panel is highlighted and showing various block styles to select
from.](https://developer.wordpress.org/news/files/2023/07/block-styles-ui.jpg)

I mean, I’m a developer. I want more. I want to go beyond the limited user experience
the block styles system offers.

What if those styles had specific controls that were custom-tailored for the use
case? For example, instead of the gradient ring style mentioned above, you let your
theme users choose from any defined gradient? Or, instead of a sepia filter, you
had custom controls that opened up the entire CSS filter specification?

You can do all those things—and a whole lot more.

In this tutorial series, you will learn how to extend the Separator block with an
emoji icon picker like this:

![The WordPress post editor with a Separator block selected in the content canvas.
The toolbar has a dropdown list of various emoji-based icons.](https://developer.
wordpress.org/news/files/2023/07/emoji-icon-picker.jpg)

Emoji-based icon picker for the Separator block.

The icon picker is just to keep things fun while you learn the basics of building
this control. When you have that down, you will be able to do whatever you want 
with it.

## Prerequisites

I won’t sugarcoat this: there is a skill jump from being able to build a basic theme
with minimal programming to being able to make the editor do your bidding. And there’s
no way I could cover all the foundational knowledge that you need in this post.

Before moving forward, you need to be familiar with:

 * **Node and npm:** You must have [Node.js and npm installed](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
   on your local machine to follow along.
 * **JavaScript programming:** You should at least have the [foundational knowledge](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
   necessary to read, write, and understand intermediate JavaScript.
 * [**Block development**](https://developer.wordpress.org/block-editor/)**:** This
   series will walk you through the necessary bits to get started, but you’ll need
   to be comfortable enough to expand beyond this for custom features.
 * [**Theme development**](https://developer.wordpress.org/themes/)**:** In general,
   you should know the basics of developing a WordPress theme, particularly working
   with PHP.
 * **CSS/SCSS:** You’re going to write some code  in `.scss` files, which is readily
   transferable to vanilla CSS.
 * **Build tools:** For the most part, you should be familiar with running commands
   from a Command Line Interface (CLI), such as `npm run <command>`. A [basic understanding of webpack](https://webpack.js.org/concepts/)
   would be useful, too.

All code examples in this tutorial series have been tested in a direct fork of the
default Twenty Twenty-Three theme. You’ll have the best experience creating your
own fork and following along, but feel free to work from another block theme if 
you want.

## Setting up your theme to use the WordPress scripts package

The most important piece of getting your theme to talk to the editor is defining
your theme’s assets structure and importing the packages you need for building with
the editor.

It’s entirely possible to write vanilla JavaScript or use a custom system. I’ve 
been down that road, and it was not fun. Your life will be much simpler when you
use the pre-built tools WordPress offers.

### Creating the initial files and folders to house assets

Naming things is hard. No doubt you have your own naming scheme for files and folders.
But for this tutorial to work, you need to use mine.

With that in mind, there will be two top-level folders that house assets for the
theme:

 * **`resources`**: The development files where you write CSS and JavaScript code.
 * **`public`**: The production files after they’ve run through the build process.

After this tutorial, you can use your own system. You’ll want to make sure you change
the file references.

Now make a few blank CSS and JavaScript files inside of the `/resources` folder 
with the below names. Your structure should look like this:

 * `resources`
    - `js`
       * `editor.js`
    - `scss`
       * `screen.scss`
       * `editor.scss`

Don’t worry about creating the `/public` folder. The build process will take care
of that.

The scripts package renames `style.scss` to `style-index.css` during the build process,
which is why `screen.scss` was chosen for the primary stylesheet name.

### Installing the WordPress scripts package

Originally, the `@wordpress/scripts` package was created to simplify the block-building
process. Today, it is flexible enough to work with themes too. Even if you’ve never
built a block, you can have a lot of fun with this.

Create a `package.json` file in your theme and add this code to it:

    ```language-json
    {
    	"name": "your-project-name",
    	"scripts": {
    		"start": "wp-scripts start --webpack-src-dir=resources --output-path=public",
    		"build": "wp-scripts build --webpack-src-dir=resources --output-path=public"
    	}
    }
    ```

The `start` and `build` commands under `scripts` are just two of the [available scripts](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#available-scripts)
you can use. You should definitely dive into the others and use them. For this tutorial,
these two are all we need to get the build process going and to define custom source
and output directories.

If you don’t define `--webpack-src-dir` and `--output-path`, they will default to
the `/src` and `/build` folders, respectively.

Now open your command line interface and navigate to your theme’s directory. Enter
this command to install the necessary packages:

    ```bash
    npm install @wordpress/scripts path webpack-remove-empty-scripts --save-dev
    ```

The `@wordpress/scripts` package is the foundation for working with the block editor
and its components. It also gives us a lot of useful tools without a lot of work.
The extra `path` and `webpack-remove-empty-scripts` packages are helpers you’ll 
use later, in your webpack configuration.

Once you’ve executed the `npm install` command with the `--save-dev` flag, your `
package.json` should now include those three packages as [dev dependencies](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file):

    ```language-json
    {
    	"name": "your-project-name",
    	"scripts": {
    		"start": "wp-scripts start --webpack-src-dir=resources --output-path=public",
    		"build": "wp-scripts build --webpack-src-dir=resources --output-path=public"
    	},
    	"devDependencies": {
    		"@wordpress/scripts": "^26.8.0",
    		"path": "^0.12.7",
    		"webpack-remove-empty-scripts": "^1.0.3"
    	}
    }
    ```

### Theme webpack configuration

If the thought of configuring webpack sounds frightening, don’t worry. I’ve been
there—_still there on most days if I’m being perfectly transparent_. Most of this
is boilerplate stuff you can copy, paste, and make slight alterations to.

The most important piece of this is adding your custom entry points: the locations
of your CSS and JS files.

Now create a new `webpack.config.js` file in your theme and add this code to it:

    ```javascript
    // 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 a new entry point by extending the webpack config.
    module.exports = {
    	...defaultConfig,
    	...{
    		entry: {
    			'js/editor':  path.resolve( process.cwd(), 'resources/js',   'editor.js'   ),
    			'css/screen': path.resolve( process.cwd(), 'resources/scss', 'screen.scss' ),
    			'css/editor': path.resolve( process.cwd(), 'resources/scss', 'editor.scss' ),
    		},
    		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
    			} )
    		]
    	}
    };
    ```

This is already set up with the CSS and JS file paths you defined earlier, so there
is really nothing else you need to do, unless you plan to customize it.

You should have also noticed that the code uses the `path` package for resolving
some paths. And the `webpack-remove-empty-scripts` plugin does a little cleanup 
at the end. Essentially, it removes empty JS files that would otherwise be generated
for your stylesheets.

### Using the scripts package

At this point, you have all the complex setup finished. Now let’s test this thing
and make sure it works.

Open your command line program on your computer and run the `start` command from
your theme’s directory:

    ```bash
    npm run start
    ```

This will build out the development versions of your files under the `/public` folder,
which should look like this:

 * `public`
    - `js`
       * `editor.js`
    - `css`
       * `screen.css`
       * `editor.css`

All nice, neat, and orderly, the way we theme authors like things, _right?_ 

The `start` command will also keep you in “watch” mode. You can make any code changes
directly to your asset files under `/resources`, and they will be built with every
file save. You can switch out of this mode by hitting Ctrl + C on your keyboard.

The `build` script that you added to `package.json` will build the production versions
of your files. Go ahead and give it a go:

    ```bash
    npm run build
    ```

Of course, you don’t have any code yet, so you’re not actually building anything
but empty files. But we’ll fix that soon enough.

### Loading scripts and styles

If you’re reading this tutorial, you should already know how to load scripts and
styles in WordPress. But there are a few things you’ll want to change, so don’t 
skip out on this part.

One of the benefits of using `@wordpress/scripts` is that it automatically creates
a `{filename}.asset.php` file for every entry point defined in `webpack.config.js`.
This file does two important things:

 * Creates an array of dependencies, so you don’t have to manually define them for
   your script/style calls.
 * Defines a version for cache busting.

That’s a pretty sweet deal and makes managing scripts and styles much easier. 

Open your theme’s `functions.php` file (create one if it doesn’t exist). There are
three different hooks that you need to enqueue scripts and styles on. 

First, enqueue your theme’s main stylesheet (called `screen.css`) on the front end
of your site:

    ```php
    add_action( 'wp_enqueue_scripts', 'themeslug_assets' );

    function themeslug_assets() {
    	$asset = include get_parent_theme_file_path( 'public/css/screen.asset.php' );

    	wp_enqueue_style(
    		'themeslug-style',
    		get_parent_theme_file_uri( 'public/css/screen.css' ),
    		$asset['dependencies'],
    		$asset['version']
    	);
    }
    ```

First, the code assigns the array returned from the `screen.asset.php` file to an`
$asset` variable. Then, it calls the normal `wp_enqueue_style()` function to enqueue
the stylesheet. Note how the dependencies and version are passed directly to the
function.

You must also register the same stylesheet with the editor if you want your styles
to work on the backend. You do this with the `add_editor_style()` function (you 
cannot pass dependencies or a version to this):

    ```php
    add_action( 'after_setup_theme', 'themeslug_editor_styles' );

    function themeslug_editor_styles() {
    	add_editor_style( [
    		get_parent_theme_file_uri( 'public/css/screen.css' )
    	] );
    }
    ```

Finally, you need to enqueue your editor script and style:

    ```php
    add_action( 'enqueue_block_editor_assets', 'themeslug_editor_assets' );

    function themeslug_editor_assets() {
    	$script_asset = include get_parent_theme_file_path( 'public/js/editor.asset.php'  );
    	$style_asset  = include get_parent_theme_file_path( 'public/css/editor.asset.php' );

    	wp_enqueue_script(
    		'themeslug-editor',
    		get_parent_theme_file_uri( 'public/js/editor.js' ),
    		$script_asset['dependencies'],
    		$script_asset['version'],
    		true
    	);

    	wp_enqueue_style(
    		'themeslug-editor',
    		get_parent_theme_file_uri( 'public/css/editor.css' ),
    		$style_asset['dependencies'],
    		$style_asset['version']
    	);
    }
    ```

Now you’re all set up to start tinkering with the block editor. It’s going to be
fun!

## Stay tuned for the next post

This feels like a natural stopping point for Part 1 of the series. You and I have
covered a lot of ground together. We haven’t actually built anything yet, but we’re
well-prepared for the next steps.

I’m usually not one for assigning homework, but take some time to play around with
this setup. Try your hand at writing some basic CSS or JavaScript and just getting
a feel for how everything works. Then take a few minutes to read the [`@wordpress/scripts` documentation](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/).

In [Part 2](https://developer.wordpress.org/news/2023/07/27/beyond-block-styles-part-2-building-a-custom-style-for-the-separator-block/),
you’ll learn to design a set of custom block styles. [Part 3](https://developer.wordpress.org/news/2023/08/04/beyond-block-styles-part-3-building-custom-design-tools/)
will bring it all together into a beautiful and functional editor control. From 
there, well, you’ll be building some amazing features.

## Resources

 * [Theme Handbook](https://developer.wordpress.org/themes/)
 * [Block Editor Handbook](https://developer.wordpress.org/block-editor/)
    - [Development Environment](https://developer.wordpress.org/block-editor/getting-started/devenv/)
    - [`@wordpress/scripts`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/)
 * [npm Docs](https://docs.npmjs.com/)
    - [Downloading/Installing Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
    - [Specifying Dev Dependencies](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file)
 * [JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
 * [webpack Concepts](https://webpack.js.org/concepts/)

_Props to [@juanmaguitar](https://profiles.wordpress.org/juanmaguitar/), [@marybaum](https://profiles.wordpress.org/marybaum/),
and [@bph](https://profiles.wordpress.org/bph/) for feedback and review. [Mountains photo](https://wordpress.org/photos/photo/75561b91da/)
by [@annezazu](https://profiles.wordpress.org/annezazu/) from the WordPress photo
directory._

**Categories:** [Advanced](https://developer.wordpress.org/news/category/advanced/),
[Themes](https://developer.wordpress.org/news/category/themes/)

**Tags:** [Beyond Block Styles](https://developer.wordpress.org/news/tag/beyond-block-styles/)

## 13 responses to “Beyond block styles, part 1: using the WordPress scripts package with themes”

 1.  ![Bridget Avatar](https://secure.gravatar.com/avatar/6e72783295d3e572b3d4870e0d1b653c644e96ccac1fab75b11775f15620afe6?
     s=40&d=identicon&r=g)
 2.  Bridget
 3.  [August 2, 2023](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/#comment-1417)
 4.  Great article! I’m looking forward to the rest in the series.
 5.  Can you help me understand why you used add_editor_style() to enqueue screen.css
     in the editor, and not enqueue_block_assets() – to enqueue screen.css on both 
     editor and front-end?
 6.  Do you not need the dependencies from public/css/screen.asset.php in the editor?
 7.  The docs say add_editor_style() is a callback for custom TinyMCE editor stylesheets,
     which doubly confuses me on using it for block stuff.
 8.  I have learned a lot from your many WordPress developer focused articles over 
     the years Justin. Thank you!!!
 9.  [Reply](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/?replytocom=1417#respond)
 10.  a.  ![Justin Tadlock Avatar](https://secure.gravatar.com/avatar/8013a62d7397c006bae48b96d6832a573ea71a7d5d3597fe584210567b508c05?
          s=40&d=identicon&r=g)
      b.  [Justin Tadlock](https://profiles.wordpress.org/greenshady/)
      c.  [August 2, 2023](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/#comment-1418)
      d.  That is a great question! `add_editor_style()` is the primary function for loading
          theme stylesheets in the editor (for both block and classic themes). With block
          themes, it will auto-prefix your CSS selectors with the `.editor-styles-wrapper`
          class and output the code inline. This prefix is the often necessary to win 
          CSS specificity battles in the editor.
      e.  You are correct that the function doesn’t support dependencies. In this particular
          case, I knew that there were no dependencies for `screen.css`, so it’s a non-
          issue.
      f.  In most projects (at least that I’ve seen), theme stylesheets wouldn’t have 
          dependencies. Although, that is not the case 100% of the time.
      g.  If there are dependencies, using the `enqueue_block_assets` hook along with 
          the `wp_enqueue_style()` function might be a better choice. But you lose out
          on the `.editor-styles-wrapper` prefix when going this route.
      h.  There is another safe route in some cases with `add_editor_style()` for stylesheets
          with dependencies. If all of the dependent stylesheets are under your control(
          e.g., various theme stylesheets), you could pass all of them into `add_editor_style()`
          too.
      i.  I hope that helps. We definitely need a definitive documentation page on enqueuing
          scripts/styles. There’s a lot of nuance that’s easy to overlook when writing
          tutorials here on the blog.
      j.  [Reply](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/?replytocom=1418#respond)
 11. ![Christophe Avatar](https://secure.gravatar.com/avatar/b1b25ad838a64b8aefd4e11bc604bc3a8ad9857a2a3db42519d8e5fce93127ab?
     s=40&d=identicon&r=g)
 12. Christophe
 13. [August 8, 2023](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/#comment-1435)
 14. Hey there!
 15. Looking forward for the next steps of this guide.
      I am also in the process of
     setting up a skeleton theme using the new block theme and native blocks with react.
 16. I do however have a question in regards of the dependencies within the asset.php
     file, how do you make a file to be a dependency within the JS?\
 17. And on another note how can you use WordPress jQuery library instead of importing
     to your own JS file where it just make the file much larger. I tried setting the
     the “jQuery” as an external but the linting still says as undefined.
 18. And finally I would like to sue the wp-scripts start to always lint before building
     either in dev or production so that coding standards are applied.
 19. [Reply](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/?replytocom=1435#respond)
 20.  a. ![Justin Tadlock Avatar](https://secure.gravatar.com/avatar/8013a62d7397c006bae48b96d6832a573ea71a7d5d3597fe584210567b508c05?
         s=40&d=identicon&r=g)
      b. [Justin Tadlock](https://profiles.wordpress.org/greenshady/)
      c. [August 9, 2023](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/#comment-1444)
      d. If I have an extra dependency that I needed to add, I’d just merge it in the `
         wp_enqueue_script()` call. For example, if was adding jQuery, I’d probably just
         change `$script_asset['version']` would become `array_merge( $script_asset['version'],
         array( 'jquery' ) )`. There might be a way to do that with the scripts package,
         but this method would work fine.
      e. [Reply](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/?replytocom=1444#respond)
 21. ![Tim Fetter Avatar](https://secure.gravatar.com/avatar/22fecd837b0ad0e2b10f7060f0b99b353ec6698c26cac63c59eef66ef7b08b49?
     s=40&d=identicon&r=g)
 22. [Tim Fetter](http://timfetter.com)
 23. [October 27, 2023](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/#comment-1873)
 24. This is just what I was looking for. Thank you.
      I noticed that when I run start,
     a map is generated for the front-end.css, but running build does not. Have you
     seen this behavior before or know how to generate the map?
 25. [Reply](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/?replytocom=1873#respond)
 26.  a. ![Justin Tadlock Avatar](https://secure.gravatar.com/avatar/8013a62d7397c006bae48b96d6832a573ea71a7d5d3597fe584210567b508c05?
         s=40&d=identicon&r=g)
      b. [Justin Tadlock](https://profiles.wordpress.org/greenshady/)
      c. [October 30, 2023](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/#comment-1879)
      d. Source maps are generated in development but are not in build (that’s usually
         not something included in the production build). But I’m sure it’s possible to
         overwrite this in your webpack config. Here’s the [link to the webpack docs](https://webpack.js.org/configuration/devtool/)
         if you want to dive a bit deeper.
      e. [Reply](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/?replytocom=1879#respond)
 27. ![Peter Westerlund Avatar](https://secure.gravatar.com/avatar/1394b111eb5a1c885f722a4a794ab5f38449f01220b79cf46be137b8ad6b906d?
     s=40&d=identicon&r=g)
 28. [Peter Westerlund](https://profiles.wordpress.org/peter-westerlund/)
 29. [March 25, 2024](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/#comment-4023)
 30. The dependencies that are added to the array in the assets php file, where are
     they taken from? Like, where do I define which dependencies are needed?
 31. [Reply](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/?replytocom=4023#respond)
 32.  a. ![Justin Tadlock Avatar](https://secure.gravatar.com/avatar/8013a62d7397c006bae48b96d6832a573ea71a7d5d3597fe584210567b508c05?
         s=40&d=identicon&r=g)
      b. [Justin Tadlock](https://profiles.wordpress.org/greenshady/)
      c. [March 27, 2024](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/#comment-4052)
      d. The dependencies are automatically generated via the scripts package. So, if 
         you import a dependency in your `editor.js` file, for example, the scripts package
         will add that to the generated `editor.asset.php` file. You will see more of 
         this in [parts 2 and 3 of this series](https://developer.wordpress.org/news/tag/beyond-block-styles/).
      e. [Reply](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/?replytocom=4052#respond)
 33. ![Sunny Morgan Avatar](https://secure.gravatar.com/avatar/773ac53bd698849a95cabd96f462f7708afc67ffd987cbaf0ec54ad0224061ea?
     s=40&d=identicon&r=g)
 34. Sunny Morgan
 35. [July 16, 2024](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/#comment-7447)
 36. Have you noticed that you can not have both a js and css file in the same dir 
     with the same name e.g. front.scss and front.js? Only the css files gets compiled.
     The only work around seems to be giving them different names or importing the 
     scss file into the front.js file from another directory e.g. import ‘./assets/
     front.scss’;
 37. [Reply](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/?replytocom=7447#respond)
 38. ![Allyson Avatar](https://secure.gravatar.com/avatar/2390e8368b3a4667c5213a889fb4cc40ce5a3d5c6080aeb6e7cdbbe41ca5ffdb?
     s=40&d=identicon&r=g)
 39. [Allyson](https://allysonsouza.com.br)
 40. [August 6, 2024](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/#comment-8359)
 41. Nice article. I’m trying to modernize the build of an old theme to trade Gulp 
     by wp-scripts, but
      I’m getting the error: No entry file discovered in the “web/
     app/themes/mytheme/src/scss” directory.
 42. Couldn’t figure out what I’m missing, I’m using the correct paths on –webpack-
     src-dir and on .webpack.config.js, do I need a block.json on my scss folder?
 43. [Reply](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/?replytocom=8359#respond)
 44. ![Richard Lampitt Avatar](https://secure.gravatar.com/avatar/701d8a222ad0e4c99a729a43c3d14819f52724cb9794cbfd9b4a58468d5a4035?
     s=40&d=identicon&r=g)
 45. Richard Lampitt
 46. [March 17, 2025](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/#comment-17455)
 47. Is there no way of doing this without the unneeded faff of build tools?
 48. [Reply](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/?replytocom=17455#respond)
 49.  a. ![Justin Tadlock Avatar](https://secure.gravatar.com/avatar/8013a62d7397c006bae48b96d6832a573ea71a7d5d3597fe584210567b508c05?
         s=40&d=identicon&r=g)
      b. [Justin Tadlock](https://profiles.wordpress.org/greenshady/)
      c. [March 17, 2025](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/#comment-17456)
      d. Sure, you can write it all in vanilla JS if you prefer. Most developers will 
         want to move over to using more modern tools, though, so that’s the method that
         I teach.
      e. [Reply](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/?replytocom=17456#respond)
      f.  a. ![Richard Lampitt Avatar](https://secure.gravatar.com/avatar/701d8a222ad0e4c99a729a43c3d14819f52724cb9794cbfd9b4a58468d5a4035?
             s=40&d=identicon&r=g)
          b. Richard Lampitt
          c. [March 17, 2025](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/#comment-17458)
          d. Perfect, thanks for the prompt reply! Very heartening to hear that build tools
             are not mandated.
          e. [Reply](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/?replytocom=17458#respond)

### Leave a Reply 󠀁[Cancel reply](https://developer.wordpress.org/news/2023/07/beyond-block-styles-part-1-using-the-wordpress-scripts-package-with-themes/?output_format=md#respond)󠁿

Your email address will not be published. Required fields are marked *

Comment *

Name *

Email *

Website

 Save my name, email, and website in this browser for the next time I comment.

 Notify me of follow-up comments by email.

 Notify me of new posts by email.

Δ

## Have an idea for a new post?

### 󠀁[Learn how to contribute](https://developer.wordpress.org/news/how-to-contribute/)󠁿

Share your knowledge with fellow WordPress developers.

Search

### 󠀁[Review tips and guidelines](https://developer.wordpress.org/news/tips-and-guidelines-for-writers/)󠁿

Everything you need to know about writing for the Blog.

## Subscribe to the Blog

  Email Address

 Join 1,771 other subscribers

 * [About](https://wordpress.org/about/)
 * [News](https://wordpress.org/news/)
 * [Hosting](https://wordpress.org/hosting/)
 * [Privacy](https://wordpress.org/about/privacy/)

 * [Showcase](https://wordpress.org/showcase/)
 * [Themes](https://wordpress.org/themes/)
 * [Plugins](https://wordpress.org/plugins/)
 * [Patterns](https://wordpress.org/patterns/)

 * [Learn](https://learn.wordpress.org/)
 * [Documentation](https://wordpress.org/documentation/)
 * [Developers](https://developer.wordpress.org/)
 * [WordPress.tv ](https://wordpress.tv/)

 * [Get Involved](https://make.wordpress.org/)
 * [Events](https://events.wordpress.org/)
 * [Donate ](https://wordpressfoundation.org/donate/)
 * [Swag ](https://mercantile.wordpress.org/)

 * [WordPress.com ](https://wordpress.com/?ref=wporg-footer)
 * [Matt ](https://ma.tt/)
 * [bbPress ](https://bbpress.org/)
 * [BuddyPress ](https://buddypress.org/)

 * [Visit our X (formerly Twitter) account](https://www.x.com/WordPress)
 * [Visit our Bluesky account](https://bsky.app/profile/wordpress.org)
 * [Visit our Mastodon account](https://mastodon.world/@WordPress)
 * [Visit our Threads account](https://www.threads.net/@wordpress)
 * [Visit our Facebook page](https://www.facebook.com/WordPress/)
 * [Visit our Instagram account](https://www.instagram.com/wordpress/)
 * [Visit our LinkedIn account](https://www.linkedin.com/company/wordpress)
 * [Visit our TikTok account](https://www.tiktok.com/@wordpress)
 * [Visit our YouTube channel](https://www.youtube.com/wordpress)
 * [Visit our Tumblr account](https://wordpress.tumblr.com/)

![Code is Poetry](https://s.w.org/style/images/code-is-poetry-for-dark-bg.svg)

 The WordPress® trademark is the intellectual property of the WordPress Foundation.