Limited time sale! Use the code LIFETIME at checkout and get 20% off our limited-time lifetime plans.

Introducing WPCodeBox 2.0 Beta 2.0

Ovidiu
Founder of WPCodeBox

Introducing WPCodeBox 2.0 Beta, exciting new features that help you manage and write WordPress Code Snippets safer and with fewer errors.

Let's look at the most important features and improvements and see what each one does and how it can help you when working with WordPress Code.

Here is the 2.0 changelog, and after that, you can read more details about the most important features:

New Code Editor Features

  • Monaco Editor integration for improved code editing experience
  • Autocomplete for all WordPress actions & filters & Parameters
  • WordPress hooks and action reference on hover
  • Color picker for CSS/SCSS/LESS
  • Oxygen Color Integration
  • Bricks Color Integration
  • Automatic CSS Integration
  • Code map that can be disabled in settings
  • CSS Variables support and autocomplete
  • Emmet support

Functionality Plugin

  • Save and execute code snippets from a functionality plugin without loading them from the database.

Customization Options

  • WooCommerce hooks snippet insertion for HTML and PHP Snippets
  • SCSS Partials
  • Render PHP/HTML snippets using custom shortcodes
  • Actions and custom actions for rendering snippets
  • Option to render CSS/SCSS after page builders' CSS
  • Show local variables in autocomplete
  • Save UI Settings to the cloud
  • Execute PHP snippets using a secure external URL
  • Collapse left/right panes using Ctrl + 1/Ctrl + 2
  • Added do not render to PHP snippets so they can be included via code

New Code Snippets Conditions

  • User logged in
  • User device (mobile/desktop)

Quality  Of Life Improvements

  • Added info about safe mode on the error page
  • Show notice when Safe Mode is active
  • Added "Reload Local Snippets" button
  • Removed jQuery from Live Reload CSS
  • Close the context menu when clicking on another snippet
  • Added post name to the WPCodeBox custom post types
  • Arrows in priority input in Firefox make the text hard to read
  • Complete backend rewrite for improved performance
  • Better error detection and handling
  • Add loader when running manual snippets
  • Allow the saving of SCSS/LESS snippets even if the compilation fails
  • Action/priority/shortcode are saved to the cloud
  • Set "plugins_loaded" as the default action for PHP snippets
  • Make the editor fill in the height
  • Removed the plugins_loaded notice
  • Added wp_body_open hook
  • Fire wpcb_snippet_disabled action when a snippet is disabled
  • Small security improvements

Bug Fixes

  • Bugfix: When editing cloud snippets, the name is not updated in the list automatically.
  • Bugfix: The key is not checked on auto-reload, causing compatibility issues with some plugins
  • Bugfix: Snippet status not updated when downloading a snippet from the cloud
  • Bugfix: Taxonomy "Is not" condition is not working correctly
  • Bugfix: LESS is not working on PHP 8
  • Bugfix: Current snippet is not always selected when refreshing the page
  • Bugfix: Unsaved changes notification appears when there are no unsaved changes
  • Bugfix: Delete snippets from the context menu doesn't always work

Following is an overview of the most important features and improvements in WPCodeBox 2.0:

New Code Editor Features

Autocomplete for WordPress hooks, including their parameters

Autocomplete for WordPress actions and filters and their parameters, quick reference inside the editor about what actions and filters do, and what parameters they accept.

Autocomplete for WordPress actions and filters, including code reference

WordPress hook reference on hover

The WPCodeBox Code Editor in 2.0 will show what a WordPress action or filter does when hovering over it. This will help get a quick overview of the hook and its parameters without doing a Google Search.

WordPress hook reference on hover

Color Picker for CSS, SCSS, and LESS snippets

The new WPCodeBox 2.0 editor will allow us to pick colors directly from the editor using an in-built color picker.

CSS Variable Support and autocomplete

WPCodeBox 2.0 will have full support for CSS variables. In addition, the editor will suggest them when writing CSS code.

Autocomplete for Oxygen, Bricks, and Automatic CSS Colors

WPCodeBox will detect if these plugins are installed and auto-suggest the specific colors when writing CSS or SCSS snippets.

Emmet Support

Emmet is really helpful when writing a lot of HTML. Now the WPCodeBox Editor will support Emmet out of the box. You can read more about Emmet here.

Functionality Plugin (Experimental)

When enabling this feature in settings, WPCodeBox will save the code snippets you create to a separate functionality plugin, and WPCodeBox won't execute.

This will mean that snippets will be stored as PHP files, and we can include them in other snippets and overwrite WooCommerce and other plugin's templates using WPCodeBox, that's not possible with any other snippet plugins.

Using the functionality plugin, you can remove WPCodeBox from your sites and keep the functionality defined using Code Snippets. There should also be some performance improvements.

This is an experimental feature. Please use with care, and test this on a staging site first.

Execute Snippets using a secure external URL

This is a new way to run snippets in WPCodeBox 2.0. It will allow us to execute snippets using an endpoint we can call to run a snippet. So, for example, we can trigger snippet execution using 3rd party services like Zapier or Easy Cron.

Execute Snippets using Shortcodes, custom actions, and Woocommerce actions

WPCodeBox 2.0 features new ways of inserting and executing Code Snippets. You can create your custom shortcodes or insert snippets using custom actions.

Also, now you can select WooCommerce actions to insert PHP and HTML snippets:

Also, shortcodes in HTML Snippets will be rendered by default now so that you can create your custom WooCommerce carts or account areas using WPCodeBox.

New Conditions

WPCodeBox 2.0 includes two new conditions you can use in the Conditions Builder.

User Is Logged-In Status - you can select if the snippet should execute only if the user is logged in or logged out.

User Device - you can set snippets to execute only if the user uses a desktop or mobile device.

SCSS Partials

Using SCSS partials, you can create small, small pieces of SCSS code that you can include in other SCSS Code Snippets.

To use them you need to use the syntax @use '_scss_partial'; The WPCodeBox code editor will suggest the partials you created if you write the word @use;

A limitation of the current implementation is that you cannot use nested partials. You cannot @use a partial that @uses another partial. This limitation will be removed in upcoming versions.

Quality of Life Improvements

Improved error detection

WPCodeBox 2.0 features improved error detection, so safe mode should be triggered less. For example, in 1.0, errors like duplicate function names were not caught, and you would need to activate the safe mode. 2.0 will try to detect these errors and disable the snippets causing them.

Notice in the editor when Safe Mode is active

Sometimes your code snippets can trigger errors that WPCodeBox cannot catch. In this case, you need to add a line to your wp-config.php file to enable safe mode. Unfortunately, there were cases where users forgot to remove that line, and snippets weren't executing. Now, a notice warns you when secure mode is active, so you can disable it after fixing the issue.

Conclusion

This is just a quick overview of the exciting new features in WPCodeBox 2.0. These features will be useful when writing and managing our WordPress Code Snippets. You can download WPCodeBox 2.0 Beta 2.0 from your account if you want to give them a spin. However, please use it carefully, as this is a Beta release.

Customizing your WordPress site using 
Code Snippets is really easy.

Try WPCodeBox today. There's a 30-day money back guarantee.
Get WPCodeBox
Copyright © 2022 WPCodeBox SRL. All other trademarks are the property of their respective owners
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram