We are happy to announce that we have fixed bugs caused by the CodeMirror change on the Oxygen Builder side. Oxygen Builder switched from CodeMirror 5 to version 6, which resulted in several broken features since we reuse Oxygen resources and avoid loading duplicates.”

Visual updates that make life easier.

From Scripts Organizer 3.5.6 it will be easy to understand what types of scripts you have inside your Code Blocks. We have added Text + Icons in the admin area and Icons only in the code blocks list since we are limited with space there.

New hooks

We have added a hook after Scripts Organizer files (SCSS, CSS, JS) are generated “SCORG_generated_file_url”

Code Example

<?php
/*
* function has three parameters
* $post_id, $code_file_url, $extension
* $post_id will have a saved code block ID in it
* $code_file_url will have a complete URL to the generated file
* $ extension will have a type of file like SCSS, CSS, JS
*/
function override_SCORG_generated_file_url($post_id, $code_file_url, $extension){
    // write your code here
}
add_action( 'SCORG_generated_file_url', 'override_SCORG_generated_file_url', 10, 3 );
?>

Color picker fixes and improvements

Fixed compatibility with Elementor, Bricks, and Oxygen. Also when you have OxyProps there are a lot of colors and in that case, we introduced a scroll inside the color picker. It was cut off.

PHP library update for SCSS compile

The library brought a couple of bug fixes and improvements so it was worth updating. We bumped to the latest 1.11.0.

General Fixes and improvements

• Fixed a notice that was coming because of Bricks Builder theme colors.
• The license will be removed once the deactivate button is clicked
• Now No need to reload the page after saving of code block or partial on the first save
• Bug fix for post types list as some post types registered by third-party plugins were not showing
• Admin typo fix for the Published status

We’re excited to share some fantastic news with our DPlugins community! We’ve just released version 1.6.0 of our plugin, and it comes packed with a bunch of exciting features that you’ve been asking for. But that’s not all – we’ve been working hard to make things even better and have continued to refine the plugin in versions 1.6.1, 1.6.2, and 1.6.3.

Highlighted 1.6 features

Version 1.6.3 updates

Change super user

The full potential of WP Admin Cleaner is available only to the Super User with ID 1. However, due to security reasons, some developers are deleting users with the ID 1, which can cause issues. To address this concern, we have introduced an option to change the Super User, allowing you to designate another user as the Super User.

By changing the Super User, you can ensure that critical functionalities and access provided by WP Admin Cleaner remain available even if the original Super User with ID 1 is deleted. This way, you can maintain the security and control of your WordPress website while avoiding any potential pitfalls caused by the deletion of the default Super User.

From Version 1.6.3 you can create custom dashboard per use role

You can now create and serve different dashboards per use role.

• One for shop owners to see tutorials on how to manage website.
• One for Editor to see tutorials on how to write posts.
• And one for customers to see their products.

Summarised changes

• Menus which are hidden by super admin for other user roles will not show to those users
• Assign super user
• Delete database on uninstall feature and setting added
• Login page logo url
• Some minor notices and bug fixes
• Bug fix for submenus in hide per role as the items were not available to uncheck them
• Bug fix that submenu urls were accessible if user has the url
• Custom dashboard page url per user role

🚀 Introducing AutoComplete for Gutenberg Blocks!

Say goodbye to the hassle of remembering class names and the frustration of typo errors! We’re thrilled to announce the latest feature in our Gutenberg editor: AutoComplete for Gutenberg Blocks. This groundbreaking update takes the guesswork out of adding classes to your blocks, making your workflow smoother and more efficient than ever before.

Here’s how it works:

🔍 Intelligent Extraction: Our system automatically scans your posts and pages, extracting class names from Gutenberg blocks under the ‘Advanced’ settings. No need to manually search or remember class names anymore – we’ve got you covered!

📝 Typo-Proof Integration: With AutoComplete, you can say farewell to those pesky typos that lead to styling mishaps. Our smart algorithm ensures that you select the right classes every time, eliminating potential errors and saving you valuable time.

💾 Secure JSON Storage: We understand the importance of data security, which is why all extracted class names are stored in a secure JSON file. Rest assured, your data is in safe hands!

📢 Real-time Updates: As you create or edit posts, our system continuously updates the JSON file with the latest class names, keeping your AutoComplete feature up-to-date and accurate.

How it works:

The magic happens behind the scenes with our custom code. We utilize a powerful regular expression to locate class names in HTML tags within your posts. The extracted class names are then processed and stored in a JSON file within your uploads directory. This seamless process ensures that you always have access to the most relevant and updated class names at your fingertips.

To get started, simply update your Gutenberg editor with the latest version containing AutoComplete support. From there, every time you create or edit a post, the class names will automatically be extracted and added to the AutoComplete suggestions.

We can’t wait for you to experience the convenience and precision of AutoComplete for Gutenberg Blocks. Say hello to a more efficient and error-free design process today!

Upgrade now and make your Gutenberg editor smarter than ever before. Happy designing! 🎉

Note: Do not delete Oxy Font Manager until you do migration to the Font Hero

We are excited to announce some significant changes to our plugin portfolio after careful consideration of our vision, focus, and user feedback. In this blog post, we will outline two major updates: the sunset of two plugins, Asura and Sandbox, and the merging of Oxy Font Manager with Font Hero. These changes aim to streamline our efforts, provide a better user experience, and consolidate our resources into a single powerful plugin.

Sunsetting Asura and Sandbox: After much deliberation, we have made the decision to sunset two of our plugins, Asura and Sandbox. While these plugins have served their purpose, we believe it is time to focus our attention on more robust offerings. By discontinuing these plugins, we can dedicate our efforts to enhancing our core products and providing better support to our users.

Merging Oxy Font Manager with Font Hero: One of the key updates is the merging of Oxy Font Manager with Font Hero. Both plugins share a common vision, but Font Hero offers additional integrations with all major builders, which sets it apart. By combining the strengths of both plugins into a single entity, we can streamline our development, maintenance, and support processes, resulting in a more cohesive user experience.

Benefits of the Merge:

The decision to merge Oxy Font Manager with Font Hero brings several advantages. Firstly, we can now focus on a single plugin, reducing the effort required for maintenance and new feature development. Secondly, by consolidating our documentation, bug tracking, and user support, we can provide a more streamlined and efficient experience for our customers. Lastly, the price difference between the two plugins made the merge an attractive option for both us and our users.

Migrating from Oxy Font Manager to Font Hero: For existing Oxy Font Manager users, migrating to Font Hero is a seamless process. To initiate the migration, follow these simple steps:

1. Log in to your account and visit the downloads section.
2. Locate your Oxy Font Manager plugin and click on “View Upgrades.”
3. Choose the upgrade license option and notice that you will receive the Font Hero Ultimate license at no additional cost.
4. Click on the “Free Download” button to start the download.
5. After the download, you will become a proud owner of Font Hero. Go to the downloads section to confirm the successful migration of your license from Oxy Font Manager to Font Hero.

Migrating Font Settings: To migrate your font settings from Oxy Font Manager to Font Hero, follow these steps:

1. Install the Font Hero plugin and activate it using your new license.
2. Navigate to the plugin settings and locate the migration tab.
3. Click on the “Migrate” button to initiate the migration process.
4. Once the migration is complete, you will be redirected to your font list, where you can verify that your fonts and settings have been seamlessly transferred.

Conclusion:

We hope this blog post clarifies the reasoning behind our decisions and provides a clear guide for migrating from Oxy Font Manager to Font Hero. By sunsetting Asura and Sandbox and merging Oxy Font Manager with Font Hero, we can concentrate our efforts on delivering an enhanced user experience and innovative features. We appreciate your support and look forward to continuing to serve you with our consolidated and improved plugin offerings.

Thank you for your attention, and if you have any further questions or feedback, please don’t hesitate to reach out.

In the world of web development, managing CSS and SCSS files efficiently is crucial for maintaining organized and streamlined code. With the latest update to Script Organizer, we introduce an exciting new feature that allows you to easily import your CSS/SCSS partials into our plugin. This feature comes in handy, especially when working with older projects or custom functionality plugins. By leveraging Script Organizer’s existing capabilities to compile SCSS, you can simplify your workflow and eliminate the need for manual editing and uploading via FTP. Let’s explore how this feature works and the benefits it offers.

Importing CSS/SCSS Partials

To begin importing your CSS/SCSS partials, navigate to Script Organizer and access the import functionality. Once there, you will find the “Upload Partials” option. Simply select the desired partial files from your local environment and drag them into the designated area. Script Organizer will handle the rest, effortlessly importing your partials into the plugin.

Improved Organization and Compilation

After importing, the partials can be accessed within the “Partials” section of Script Organizer. Each partial will be listed individually, ready for your modifications. For example, if you open the “Layout” partial, you’ll find it exactly as it was in your original project. This seamless transition ensures that the structure and styling of your layout remain intact.

Effortless Customization

To demonstrate the simplicity and power of this feature, let’s create a new block called “Team Header.” By utilizing the SCSS syntax, we can quickly define the desired styles and include the necessary partials from the partials manager. Remember to add at least a comment within the file to ensure proper compilation. Once the file is created, publish it, and witness the magic.

Enhanced Compilation and Order Control

Upon inspecting the generated code, you’ll notice that the imported partials are compiled in the order they were imported. However, if you prefer a different order, you can easily rearrange them within the partials manager. For instance, by moving the “Reset” partial to the top, you ensure that it takes precedence over the other styles.

Seamless Migration and Time Savings

With Script Organizer’s import feature, you can seamlessly transfer your existing projects into the plugin with just a few clicks. No more manual editing, compiling, or uploading via FTP. This streamlined workflow not only saves you valuable time but also reduces the chances of human error during the migration process.

Font Fallback for Gutenberg and Divi

This feature is provided for “Custom fonts” and “the Google Fonts”. When you are registering or editing fonts you will get predefined options to choose from. We made it simple dropdown based on best practices to choose from.

Font Fallback options:

• Serif
• Sans-Serif
• Monospace
• Cursive
• Fantasy

Using font fallback is considered a good practice for several reasons:

1. Consistent Display: Font fallback ensures that text is displayed consistently across different devices and platforms. It allows the system or application to find the best available font to render the text, even if the original font is not installed or supported. This helps maintain the intended design and readability of the text.
2. Multilingual Support: Font fallback is essential for displaying multilingual content that may require characters from various writing systems. Different languages may have specific font requirements, and font fallback ensures that the necessary characters are rendered correctly, regardless of the availability of the primary font.
3. Improved Accessibility: Font fallback plays a crucial role in improving accessibility for users with different language requirements or visual impairments. By providing alternative fonts, it ensures that text content can be read and understood by a wider audience. It prevents situations where text becomes illegible or unreadable due to the lack of appropriate fonts.
4. Error Handling: When a font is missing or unavailable, a font fallback mechanism can prevent text rendering errors. Instead of displaying empty squares or other placeholders for unsupported characters, a fallback font is used, allowing the text to be displayed properly. This prevents visual inconsistencies and enhances the overall user experience.
5. Cross-Platform Compatibility: Font availability can vary across different operating systems and devices. By using font fallback, you can ensure that your text appears correctly on various platforms. It reduces the risk of text appearing differently or becoming unreadable when viewed on different devices or shared with others.
6. Future-proofing: Fonts can become outdated or deprecated over time. By incorporating font fallback into your design or development process, you can future-proof your content. Even if a particular font becomes obsolete or unsupported in the future, the fallback mechanism will enable your text to continue rendering correctly using alternative fonts.

Why Divi integration if divi has one already?

Divi indeed has integration but it is limited to not compressed font files and does not have fine tuning that you want for best performance.

• Preload
• Display options such as Swap, Block, etc
• Uploading Woff and Woff2 the best compression and browser support
• Also one click to load Google Fonts

UI Improvements

With different font faces UI can become cluttered easily. That is why we improved it in 2 places.

• If registered Font Family has more than 10 font faces you will get add more button
• If CSS preview is bigger then 80% of screen height it will scroll code inside.

We’re thrilled to announce the release of Font Hero 2.0 beta, and we can’t wait for you to try it! With the stable release just a day or two away, we’re excited to share the many new features and improvements we’ve made to help you create stunning designs effortlessly.

One of the most notable improvements is the UI, which is now sleeker and more user-friendly than ever before. We’ve added a lot of contrast, making it easier for you to navigate the interface and focus on what’s important. But that’s not all – we’ve also introduced a font preview feature that lets you switch between paragraph, sentence, and heading text. You can even add custom text and use the slider to preview font sizes.

Additionally, we’ve made it possible to switch between light and dark themes, giving you a clear idea of how your font will look in different environments. And if you ever need to reset your settings to the defaults, we’ve got you covered.

Font Hero 2.0 also offers a wide range of font options, including Google fonts, font faces, and variable fonts. You can easily choose from our predefined professional font pairings or mix and match fonts to suit your unique style. The possibilities are endless!

With Font Hero 2.0, you can easily import Google fonts and filter based on groups, font weights, styles, and characters. You can even rename font families when importing. And with our new feature, you can replace Google fonts on the fly across your entire website without needing to find and replace individual classes.

At Font Hero, we’re committed to providing you with the best possible performance and options. That’s why we’ve chosen to download only the vov2 for Google fonts, ensuring optimal coverage and faster loading times. And if you need anything else or have any suggestions, please send us an email – we’re always happy to help!

So what are you waiting for? Try out Font Hero 2.0 beta and let us know what you think. We’re confident that you’ll love it as much as we do. Thanks for choosing Font Hero!

Overview

Since ACF 6.0, ACF Blocks are registered by using the standard native WordPress function, register_block_type() which loads a block.json file containing all your configuration. ACF hooks into block.json by reading the acf key in the JSON which should be an object of ACF specific configuration. The main configuration keys for block.json are described in the WordPress documentation, but our specific ACF configuration is detailed below.

The move to JSON storage for ACF blocks in WordPress was done to improve the performance and flexibility of the blocks.

Prior to the move to JSON storage, ACF blocks were stored as post meta in the database, which could become cluttered and slow down the site over time. Storing blocks as JSON in the WordPress post content allows for faster and more efficient data retrieval, as well as improved version control and collaboration.

Additionally, JSON storage allows for more flexible and scalable data structures, making it easier to manage and manipulate block data. This can be especially useful for complex blocks with multiple fields and nested data structures.

Overall, the move to JSON storage for ACF blocks provides a more efficient and flexible way to store and retrieve block data, leading to improved performance and a better user experience for WordPress sites using ACF blocks.

Important Steps after update Scripts Organizer – ACF Gutenberg Addon to 1.4.0

Go to the Scripts Organizer > ACF Blocks > Press “Regenerate All ACF Blocks”

This is a huge update so we are recommending to do backup before update.

After process is done you will get confirmation message

And you are done.

You don’t need to do anything else as we done everything for you. Inside wp-content/upload/scripts-organizer/ we created new folder called blocks. All ACF blocks are regenerated and got their own JSON file.

Variable fonts are a new kind of font technology that allows for a single font file to contain multiple variations of a typeface, such as weight, width, and slant. This makes it possible to adjust the appearance of the font in real-time, based on the specific design needs of a project.

A “normal” variable font would refer to the default style of the font, which is typically the upright and regular weight version. The “italic” version of a variable font, on the other hand, would refer to the slanted version of the font that is typically used for emphasis or for emphasis in titles, subheadings, etc.

By using variable fonts, designers and developers can have more control over the typography of their designs, and users can enjoy a more optimized and efficient web-browsing experience. Additionally, variable fonts can also help to reduce the amount of data that needs to be loaded on a page, improving page load times and reducing data usage.

In the first version we had only one file per variable font.

That was a mistake. To have Normal and Italic font styling you will need to upload 2 files.

Bellow you can see generated CSS by Font Hero.

Monaco Editor WordPress Autocomplete for hooks and actions.

With the latest release we shipped Autocomplete for all WordPress actions & filters & parameters.

We are using native VS autocomplete made by Automatic. Visit WordPress Hooks Intellisense for VS Code Extension. With using their code we can be easy up to date every WordPress core updates and changes.

With latest update we can play the “difference game” where we compared same commands for Visual Studio and Scripts Organizer.

Action, Hooks

WordPress Hooks are a way to modify the behavior of WordPress themes and plugins. There are two types of hooks: actions and filters. Actions allow you to add or remove code at specific points in the WordPress execution process. Filters allow you to modify content before it is displayed. Hooks allow you to modify the core code of WordPress without having to edit it directly, making it easier to maintain compatibility with future updates.

We have added list of most used one:

• muplugins_loaded
• plugins_loaded
• setup_theme
• after_setup_theme
• init
• wp_loaded
• wp_head
• wp_footer
• admin_head
• admin_footer
• wp_body_open

muplugins_loaded

is a WordPress action hook that is triggered after Must-Use plugins (MU plugins) have been loaded. MU plugins are a special type of plugins that are loaded before regular plugins and are not affected by actions such as “deactivate” or “delete.” This hook provides a way for MU plugins to perform actions or run code once they have been loaded.

plugins_loaded

is a WordPress action hook that is triggered once all plugins have been loaded and registered. This hook provides a way for plugins to perform actions or run code once they have been loaded and activated. It is commonly used to load plugin translations, setup plugin options, or initiate any plugin-specific functionality.

setup_theme

is a WordPress action hook that is triggered after the active theme’s functions.php file has been loaded but before any template files have been included. This hook provides a way for themes to perform setup tasks such as registering support for various WordPress features (e.g. post thumbnails, custom headers, etc.), enqueueing scripts and styles, or defining custom image sizes.

after_setup_theme

is a WordPress action hook that is triggered after the active theme’s setup has been completed. This hook provides a way for themes or plugins to perform additional setup tasks that may be dependent on the theme’s setup, such as registering custom post types, taxonomies, or sidebars. It is also commonly used to load theme translations or to perform any other theme-specific functionality that needs to be executed after the theme’s setup is complete.

init

is a WordPress action hook that is triggered after WordPress has finished loading but before any headers are sent. This hook provides a way for plugins or themes to perform initialization tasks such as registering post types, taxonomies, shortcodes, or meta boxes. It is also commonly used to setup rewrite rules or to perform any other plugin- or theme-specific functionality that needs to be executed early in the WordPress execution process.

wp_loaded

is a WordPress action hook that is triggered once WordPress, all plugins, and the theme have finished loading. This hook provides a way for plugins or themes to perform any final tasks that may depend on all other parts of WordPress being fully loaded. It is often used for tasks such as setting up custom rewrite rules, adding custom query variables, or performing any other plugin- or theme-specific functionality that needs to be executed once all other parts of WordPress are fully loaded.

wp_head

is a WordPress action hook that is triggered in the head section of a WordPress theme’s HTML document. This hook provides a way for plugins or themes to add or remove code to the head section of the document, such as meta tags, stylesheets, or scripts. It is commonly used to add custom styles, scripts, or other elements that need to be included in the head section of the document.

wp_footer

is a WordPress action hook that is triggered in the footer section of a WordPress theme’s HTML document, just before the closing </body> tag. This hook provides a way for plugins or themes to add or remove code to the footer section of the document, such as scripts, analytics tracking code, or other custom elements. It is commonly used to add custom scripts, tracking code, or other elements that need to be included in the footer section of the document.

admin_head

is a WordPress action hook that is triggered in the head section of the WordPress admin area. This hook provides a way for plugins or themes to add or remove code to the head section of the WordPress admin, such as stylesheets, scripts, or custom meta tags. It is commonly used to add custom styles, scripts, or other elements that are specific to the WordPress admin area.

admin_footer

is a WordPress action hook that is triggered in the footer section of the WordPress admin area, just before the closing </body> tag. This hook provides a way for plugins or themes to add or remove code to the footer section of the WordPress admin, such as scripts, analytics tracking code, or other custom elements. It is commonly used to add custom scripts, tracking code, or other elements that are specific to the WordPress admin area.

wp_body_open

is a WordPress action hook that is triggered immediately after the opening <body> tag in a WordPress theme’s HTML document. This hook provides a way for themes or plugins to add code immediately after the opening <body> tag, such as custom tracking scripts or other elements. It was introduced in WordPress 5.2 as a replacement for the now-deprecated body_open hook.

Priority

Priority is a parameter in WordPress action hooks and filters that determines the order in which functions attached to the hook or filter will be executed. Functions with a lower priority value will be executed before functions with a higher priority value. If two functions have the same priority value, they will be executed in the order in which they were added to the hook or filter.

The priority value can be an integer or a string, with integers being the most common. A priority value of 10 is a common default value for many hooks and filters. Functions attached to hooks and filters can be given a priority value when they are added using the add_action or add_filter functions.

In WordPress, there is no specific maximum value for the priority parameter in action hooks and filters. The priority value can be any integer, positive or negative. However, higher values may cause the function to be executed later in the process, while lower values may cause the function to be executed earlier in the process. It is important to choose a priority value that appropriately balances the timing of the function’s execution with the order in which other functions attached to the same hook or filter are executed.

What is variable font

A variable font is a single font file that contains multiple variations of a typeface, such as different widths, weights, or styles. These variations can be accessed and controlled through CSS properties, allowing developers and designers to create responsive and dynamic typography on the web.

With variable fonts, designers can create custom variations of a typeface that match their specific design needs, while developers can use CSS properties to adjust the variations in response to user interactions or changes in the layout. This allows for more flexibility and control over typography in web design, and can help improve the user experience.

Variable fonts can also help reduce the number of font files needed for a website, which can improve page load times and performance.

Variable fonts are supported in all modern browsers, and are defined in the OpenType Font Variations specification.

Font Weight vs Font Stretch

The main difference between the CSS font-weight and font-stretch properties is that font-weight is used to specify the boldness of a font, while font-stretch is used to specify the width of a font.

The font-weight property is typically used to make text bolder or thinner. For example, you might use a font-weight of “bold” for headings and “normal” for body text. The font-weight property can take a variety of values, including numeric values like 100, 200, 300, etc. The higher the number, the bolder the font.

The font-stretch property, on the other hand, is used to make text narrower or wider. For example, you might use a font-stretch value of “condensed” to save space in a narrow column, or “expanded” to create a more dramatic effect. The font-stretch property can take a variety of values, including “ultra-condensed”, “extra-condensed”, “condensed”, “semi-condensed”, “normal”, “semi-expanded”, “expanded”, “extra-expanded”, or “ultra-expanded.”

In conclusion font-weight is used to control the thickness of a font, while font-stretch is used to control the width of a font. While font-weight can be used to make text more legible in small sizes and on screens, font-stretch can be used to create more dramatic effects or to save space in a layout.

Font Stretch is known as Font Width

Keyword to numeric mapping

The table below shows the mapping between keyword values and numeric percentages:

Keyword	Percentage
ultra-condensed	50%
extra-condensed	62.5%
condensed	75%
semi-condensed	87.5%
normal	100%
semi-expanded	112.5%
expanded	125%
extra-expanded	150%
ultra-expanded	200%

Font Stretch Playground

Convert Variable Font to .Woff2