Omar Serrano

Tag: wp-scripts

  • How to Set Up a Robust Build System with WordPress/Scripts

    How to Set Up a Robust Build System with WordPress/Scripts

    What is the wordpress/scripts package?

    The wordpress/scripts package is an npm package that provides a robust build system for WordPress applications. It uses webpack.js to compile ES6, React, SCSS, uglify, minify, and can be extended to use other webpack plugins.

    The wordpress/scripts package is not limited to WordPress applications. It can be used to build any web application.

    How to get started

    To get started with the wordpress/scripts package, you need to install it in your project directory. You can do this by running the following command:

    npm install @wordpress/scripts

    Once the package is installed, you can start using it by running the following command:

    npm run build

    This will compile your JavaScript and CSS files and create a production build in the dist directory.

    For more information about extending the default functionality such as entry and output destinations, see the npm link here.

    For WordPress Gutenberg block development

    If you are developing a WordPress Gutenberg block, you can use the wordpress/scripts package to compile your JavaScript and CSS files and create a production build that is compatible with the Gutenberg editor.

    You will then need to add metadata like the following metadata to your block.json file:

    "editorScript": "dist/block.js",
"editorStyle": "dist/block.css",
"script": "dist/block.js",
"viewScript": "dist/block.js"

    The editorScript and editorStyle properties specify the file paths for the JavaScript and CSS files that will be loaded in the Gutenberg editor. The script and viewScript properties specify the file paths for the JavaScript files that will be loaded in the front-end of your website.

    Running your npm scripts anywhere JS is supported

    Once you have created and configured your webpack.js rules, you should be able to fire them off from anywhere nodejs is supported like docker images or CI/CD pipelines.

    To run your npm scripts, you can use the npm run command. For example, to run the build script, you would run the following command:

    npm run build

    Gotchas

    When working with the wordpress/scripts package, it’s important to stay on top of the exciting aspects of managing npm dependencies. This involves staying up to date with updates, security patches, and ensuring a consistent nodejs version. By keeping an eye on these factors, you’ll be able to make the most of your development experience.

    To make sure that your dependencies are up to date, you can run the following command:

    npm update

    To check for security updates, you can run the following command:

    npm audit

    To keep a persistent nodejs version, you can use a tool like nvm.

    Conclusion

    The wordpress/scripts package is a powerful tool that can be used to set up a robust build system compiler for your web applications. It is easy to get started with and can be used to build any web application that uses JavaScript.

    I hope this post has been helpful. Please let me know if you have any questions.

  • Web Components in WordPress: A Modernizing Solution with a Lot of Potential

    Web Components in WordPress: A Modernizing Solution with a Lot of Potential

    Web Components are a relatively new technology, but they have the potential to revolutionize the way we develop client-side web applications. Web Components are self-contained, reusable pieces of HTML, CSS, and JavaScript that can be used to create custom UI elements and functionality.

    While Web Components are still not as popular as they should be in WordPress, there is a lot of potential for this technology to modernize client-side development in the CMS. By using a combination of JavaScript tools like webpack.js, @wordpress/wp-scripts, Gutenberg, React, and Native Web Components, developers can create powerful and performant WordPress themes and plugins without having to know a lot of PHP.

    Here are some of the benefits of using Web Components in WordPress:

    Faster performance: Web Components are compiled to native JavaScript, which means that they can be rendered much faster than traditional JavaScript code. This is especially important for WordPress themes and plugins, which need to be able to load and render quickly on all devices.

    Modularity: Web Components are modular, which means that they can be easily reused and shared across different WordPress themes and plugins. This makes it easier to develop and maintain complex WordPress applications.

    Openness: Web Components are an open standard, which means that they can be used by any web developer, regardless of their preferred framework or library. This makes it easier to collaborate on WordPress projects and to create reusable components that can be used in other web applications.

    Example: wp-visualization-blocks plugin

    My plugin, wp-visualization-blocks, demonstrates how to use Web Components to create custom Gutenberg blocks. The plugin uses wp-scripts to compile the Web Components and Gutenberg block code, and it keeps the code separated for modular use of web components onto other applications.

    Conclusion

    Web Components are a powerful new technology that can be used to modernize client-side development in WordPress. By using a combination of JavaScript tools and frameworks, developers can create fast, modular, and reusable WordPress themes and plugins without having to know a lot of PHP.

    I encourage more WordPress developers to explore Web Components and to start using them in their projects. Web Components have the potential to make WordPress development more efficient, scalable, and accessible to a wider range of developers.

    #wordpress #code #gutenberg #reactjs #web-components