Autocomplete now native for visual builders inside Winden.

You only need to enable them in the settings sections.

Custom Autocomplete in the code editor

Custom Autocomplete in Monaco “Styles Tab” will reflect your settings from the Config. You will get same autocomplete values as you get in the plain classes.

Improvements under the hood

We are now manipulating tailwind config and on top of your configuration we are able to get some fine tunings. For example we started by adding important on the “is-root-container” in Gutenberg and also on iframe in Oxygen builder as well.

Now you do not need to write important to some classes to get realistic preview from the front end.

Even this sounds small this opened us doors for much bigger opportunities.

• Style guide that we introduced in Winden Playground
• Getting all kinds of values from the builders
  • Breakpoints
  • Fonts and Space sizes
  • Colors and much more
• We are now able to create Visual Generator with option write the code and use UI in the same time

Winden 2.0.3 Release

Features

• Custom autocomplete inside code editor based on your configuration settings. Same as you have in plain classes
• Added predefined autocomplete for @apply, @screens, @config, @layer
• Plain Classes Bricks now packed with Winden
• Plain Classes Oxygen now packed with Winden
• Plain Classes Gutenberg now packed with Winden

Improvements

• Added important on the editors iframe root level to bypass editors defaults. This will not effect front end. Only it will make more realisting preview without user needs to use important inside editor
• Bricks Plain Classes – Added copy and paste classes button
• [&>] was not fetched as gutenberg was converting “&” and “” to unicode
• Included tailwind first-party plugins to be able to import resolve config
• Updated handling of modules in browser to reduce console errors when working with CDN
• Files scanner is now improved with dynamic path in case wp-content is moved. LocalWP app and other servers are doing that by the default
• Cashed files are now improved with dynamic path in case wp-content is moved. LocalWP app and other servers are doing that by the default
• Security updates

Bugs

• Fixed @wordpress/interactivity Error when using CDN
• Conflict with Gutenberg blocks that use API v2
• Tailwind CSS was effecting in Gutenberg admin area
• Classes after line breaks in plain classes gutenberg was not fetched
• Licence error after website change domain. It was giving error if you want to deactivate licence after migration
• Dequeue Oxygen Styles was interfering with code block

Menu order per role

Before it was for current user only.

This feature allows you to customize menu orders for different roles such as Admins, Editors, Customers, or Users.

Rather than instructing each individual on how to customize their menu, you can now set it up for them according to their user role.

Hide top bar  menu for front end

for current user and per user role.

Inject global CSS

With the global CSS you will effect all the users. One above “inject Custom CSS” is for the current user only.

Add option to change logo of the admin bar

the same logo field is being used which is for login form logo

order menu Reset

for current user and per user role.

If you are dissatisfied with the current menu order, you can easily reset it to the default state instead of rearranging it again.

Tailwind as framework is free , but what you are paying with Winden is optimisation and integration.

With tailwind we are removing every repetition and making the best optimisation for the playground (CDN) and also production.

server update brings Autoprefixer by the default

Why do you need autoprefixer?

Using Autoprefixer with Tailwind CSS can seem a bit redundant at first, considering Tailwind CSS includes its own set of prefixes for CSS properties that require them for cross-browser compatibility. However, there are specific scenarios and reasons where integrating Autoprefixer into your project alongside Tailwind CSS can be beneficial:

1. Additional Browser Support: While Tailwind CSS does cover a broad range of browser support through its built-in prefixes, Autoprefixer can provide additional support based on your specific project requirements. This is particularly useful if you need to support older browsers or specific versions that are not covered by Tailwind’s defaults.
2. Custom CSS: In projects where you’re mixing Tailwind CSS with custom CSS, Autoprefixer can ensure that your custom styles are also automatically vendor-prefixed. This helps maintain consistency across all your stylesheets, ensuring that they work as expected across different browsers.
3. Updated Prefixes: Autoprefixer relies on the data from Can I Use, which is regularly updated. This means it can automatically apply newer prefixes or remove unnecessary ones based on the latest browser support data. Even though Tailwind CSS is updated regularly, there might be instances where Autoprefixer is more up-to-date with the very latest browser changes.
4. Configurable Browser Support: Autoprefixer allows you to specify the range of browsers you want to support through the “browserslist” configuration in your project. This level of customization can be beneficial for projects with specific audience or requirements, ensuring that you’re only adding the necessary prefixes for your target browsers.
5. Optimization: By using Autoprefixer, you can ensure that only the necessary prefixes are included in your final CSS, potentially reducing the size of your stylesheets. This is because it adds prefixes based on your project’s browser support requirements, avoiding the inclusion of unnecessary prefixes that might be present in a more generic, broadly-supportive library like Tailwind CSS.

Background blur with autoprefixer

In example bellow autoprefixer is adding web-kit support for backdrop-filter in safari.

Background blur without autoprefixer

This is safari without autoprefixer web-kit support

Pressing the right click will get you app experience where you can get extra features.

• Cut
• Copy
• Paste
• ————
• Rename
• ————
• Compress
• Uncompress
• Download
• ————
• Delete

With the latest update we improved contextual menu

Download

We’ve optimized it so well that it can think for you. You can download any file, whether zipped or unzipped. Additionally, you can download folders too. It will first compress the folder for you and then open a browser menu to ask where you want to save it on your computer.

Delete

Can be scary function if you are deleting things on the server without undo. This is why we added confirmation message before you procced with this action.

In the next release we plan do add file/folder name that you are trying to delete so it’s even clearer for the user.

We are releasing FREE version of Winden called Winden Playground.

We want to spread the tailwind and utility class ideology. For users to be able to learn it then need to practice and explore it on their own.

plain classes

Winden Playground will by the default include autocomplete for visual builders:

• Oxygen
• Bricks
• Gutenberg

Style Guide

The best to learn is to see it. Style guide will be visible with default tailwind config and will be update as you change it.

That will give you clear visual representation of what is included and how it will behave.

Visual builders Fine tune

• Oxygen
• Bricks
• Gutenberg

With now learned tailwind manipulation we can apply important classes only in visual builders with specific settings.

For example Gutenberg have some overwrites as they apply targeting on html or body. This will allow us to add important on the root element but exclude important from actual classes compile in css file.

Thumbnails Manager

Clean up Images by size

With the new feature you can clean up your website from unwanted image sizes.

Why would you want to do that?

• Clean up image sizes before you unregister thumbnail sizes.
• Clean up all images except original before you want to make a backup

Register New Thumbnail sizes

We can also help you register new sizes on the fly and test your website with them.

Export Thumbnail sizes

If you want to disable or remove DevKit in production you can copy registered image sizes PHP code snippet and paste into Theme, Plugin or code manager such as Scripts Organizer.

Error Log Updates

Not you can define your our custom path and log file name for your error logs.

Its located under Settings / Debug

The most important is the we fixed new WordPress 6.4 logic and we removed Gutenberg Dependency. You do not need to install the Gutenberg anymore to see the fonts in FSE Block themes.

New location. it’s moved from Tools to Appearance.

Disable Fonts instead of delete them

You will have now toggle to disable them.

Disable Theme Fonts

Font ORDER for Font Priority

is important in HTML and CSS loading because it directly impacts the visual consistency, performance, user experience, and accessibility of a web page. By carefully managing the order in which fonts are loaded and ensuring timely display of text content, developers can create a seamless and engaging browsing experience for users.

 Features:

• Added Cut, Copy and Paste inside contextual menu
• Settings page. Debug options and Hide Devkit and Enable Adminer are moved to the Settings page

 Updates:

• Code Editor line wrap instead of horizontal scroll. We can add toggle in the feature
• Added alert when you try to delete file or folder
• Improved UX grouping in the contextual menu. Added lines in between groups and delete is at the bottom of the list
• Improved Compress and Uncompress cases with subfolders
• Improved created folder and files
• Files Manager code refactor for better performance
• Excluded node_modules inside Files Manager sidebar for better performance

Bug Fixes:

• Monaco editor does not change content when you switching between tabs
• Delete does not work in Windows setups

Files Manager

Create File and Folder

Once you press one of those two buttons, you will be prompted with a modal to enter a name.

Upload zip

Will open a modal where you can drag and drop a ZIP file.

File Edit Mode

Once you click on the file, it will open in a new tab. The editor is a full-featured Monaco Editor, similar to the one used for Scripts Organizer and Winden. With the Monaco Editor, you will get a Visual Studio experience.

1. If you need more space you can open editor in full screen as well.
2. In the middle of the top tab you can see location and file name
3. And on the right you have save update.

We also have shortcut for save CTRL (Command) + S

Contextual menu

Pressing the right click will get you app experience where you can get extra features.

• Rename
• Delete
• Compress
• Uncompress

At this point, we are not checking whether you click on a .ZIP archive or not, and we are displaying “Uncompress” anyway.

This issue should be resolved in future releases.

---

Database Manager

With DevKit, you can access a comprehensive database manager without needing to use cPanel or other server management tools.

This feature is powered by AdminerEvo, a web-based database management interface designed with an emphasis on security, user experience, performance, functionality, and compactness.

AdminerEvo is ready to use with various databases, including MySQL, MariaDB, PostgreSQL, SQLite, MS SQL, Oracle, Elasticsearch, and MongoDB, right out of the box.

---

Error Log

Reload Error Log

Instead of reloading the entire browser, we have added the CTRL (Command) + R shortcut to help you refresh the list.

New location

Error log got promoted to the separate tab. We moved it the new tab so it’s easier to preview it.

We’ve made this change to be more straightforward and memorable.
A significant concern arose when the ACF company changed their terms, restricting the display of fields. This modification impacts the original purchase agreement, diminishing the value of the developer license.
In response, ACF encourages users to buy ACF Pro, now available with a 40% discount

We’ve made several changes

• We’ve removed all ACF references, renaming “custom fields” to “dynamic fields.”
• The ACF Menu is no longer accessible. To use pro fields on posts, pages, or for custom posts and taxonomies, ACF Pro is required.

For block creators, the following applies:

• A comprehensive range of dynamic fields, including galleries and repeaters, is still available.
• These fields are manageable through our plugin UI and can be assigned to blocks. Assigning them to posts and pages is exclusive to ACF Pro.

Accessing dynamic fields

To access the custom fields, you need to open a block and:

1. Click on Preview
2. Click on Fields

Once you follow these steps, you will be able to manage fields for your blocks.

The reason for Creating Gutenberg Studio
(ACF Blocks add-on)

Many WordPress developers haven’t transitioned from PHP to React. Gutenberg Studio, with ACF in the background, allows block creation without React or JavaScript. It eliminates the need for a compilation process involving Node.js, whether on a local computer or a server.

Check one of the videos on how it’s easy to craete a block with Gutenberg Studio

Moving forward

We will not remove ACF from beneath the hood, as doing so would disrupt our users’ work. We will maintain it, but cannot update it beyond version 6.3. Nevertheless, we will follow up if any security issues arise, ensuring your safety.

Predicting the future when your business depends on another is challenging. Nonetheless, we are committed to pushing forward. We’re exploring alternative meta solutions and considering building our own.Rest assured, Gutenberg Studio is here to stay.

For more details

In this tutorial we are showing you how to create fonts collection inside Adobe Fonts and how to import fonts from Adobe Fonts into Font Hero

This is Font Hero 2.0.3 Update

Updates

• Regenerate hook to use in other plugins
• Added current class on list inside edit screen
• Script type class fix
• Bug fix for save
• Script type icon
• More hooks added in everywhere (login_header, login_footer, admin_init)

Added Active Class

From now on, instead of hiding the current code block, it will be displayed in the list as a highlighted item.

Regenerate hook to use in other plugins

Code example:

<?php
    /*
    * function has three paramters
    * $post_id, $code_file_url, $extension
    * $post_id will have saved code block ID in it
    * $code_file_url will have complete URL to the generated file
    * $extnesion will have 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);
?>