With latest release we updated Settings tab UI and UX
The check boxes have been replaced with a hidden eye icon that indicates whether an item is shown or hidden.
They are now larger and easier to hit.
The content of the Settings tab is unified and now have the same card format as the rest of the tabs.
The submenus have been moved under the accordion and can be expanded by clicking the arrow on the left. After studying UX we found that not many users manage the submenu items, so we reduced the priority of these items.
We opened new world with conditions. Now is finally possible to use WP Conditional Tags and target scripts where you need them.
Under Template we added new option “Custom”. That will open input field where you can write conditional tags. For more are about conditional tags use WordPress Developer Handbook.
Examples:
is_404()
is_archive(‘term-slug’)
is_archive()
is_search()
In case you need specific term archive you can use:
is_tax(‘cpt_name’, array(‘tax_term’))
Inside Custom conditions you can also use Logical Operators to combine conditional tags: && (And), || (Or) and ! (Not) and get something like is_home() || is_front_page()
Note: you don’t need “;” after “()” on the end.
Performance
One of the best features is always speeding up things and save you time. To do that we are now saving things in different way in database.
Important Note:
Once new plugins is installed you will see notice that you need to regenerate files.
Go to the features and hit regenerate button.
Scripts Order
Under Scripts Organizer we have added new Admin Submenu “Code Block Order” There you will see list of all your code blocks.
The reason why we didn’t build drag and drop inside Admin is we would need to put more scripts and that would slow down Admin. And not all users need to change the order of scripts. Another reason is on new page we made it lightweight and compact.
In example bellow you can see tree html injection of 3 code blocks Oder 1 (h1), Order 2 (h2) and Order 3 (h3). I have used HTML inject instead of CSS just to showcase preview without opening Inspect.
Quick Access to Code Blocks and SCSS Partials
Sidebar Tabs
Biggest pain point once you are in Single Post or Editor (Code Block and SCSS Partial) was navigating to new single post. You needed to switch from Code Settings to Page settings and find it under one of the lists.
Thats why after UX research we decided to give it separate place and new tabs. Code Blocks and SCSS Partials are separate tabs.
Shortcuts
Since your hands are already on the keyboard user new shortcuts to navigate even faster.
Key Combination
Action
CTRL (⌘) + S
Save
CTRL (⌘) + 1
Script Settings (Tab 1)
New
CTRL (⌘) + 2
Page Settings (Tab 2)
New
CTRL (⌘) + 3
Code Blocks List (Tab 3)
New
CTRL (⌘) + 4
SCSS Partials List (Tab 4)
New
CTRL (⌘) + 5
Toggle Focus Mode
New
CTRL (⌘) + 6
Toggle Preview
New
Filter Code Blocks and SCSS Partials
Since many users have a lot of code blocks one of the most requested feature was to sort them with folders.
Folders are bad UX practice with several reasons:
They are not WP native
You need extra resources to load
Most of all they are not flexible as you can not place code block in 2 folders. You need do stick to only one
Here is the best example of it.
Blog Archive can be part of theming and can be Archive tag as well.
Before
With Filter in new tab
Updated Color picker UI and added integration for Elementor and Bricks Colors
Fonts are smaller, dimmed and more contrast on section hover.
Since we are now supporting Bricks and Elementor besides Oxygen we have introduced Plugin Name as well.
Plugin palette is available only if plugin is activated.
Sync Files
Edit files on server with FTP and sync back to database.
In case you asking why would you need this:
Edge case where safe mode failed
You edited several files in local host and you just transfer files and sync
Safe Mode New Look
Beside obvious UI lift, we have changed order of elements:
At the top is Scripts Organizer box message box
WordPress error log
Website content.
Title is updated to clearly state that at moment Safe mode is “Not Active” and button is changed from “Go to Safe Mode” to “Enable Safe Mode”, as when you click on it, it will enable Safe Mode.
Click on the image to zoom
Relocate Code Files
In case you need to move code files away from uploads folder. After you changed path hit Save Changes and then Regenerate Files.
If you want to place code outside of the WordPress root you can use "../"
Preview feature
Added button in Focus mode
Once you are in focus mode and only code editor is visible you should have all that you need so you don’t switch back and forth. In previous version we introduced CTRL + S to save and now we introduced Preview button to toggle preview iframe.
Updated Resize Library
Till now we have used jQuery UI Resize, but that library have problem is inside element is iFrame. We moved to Split.js that works much smoother.
Added Trash option in Admin Bar
You can select multiple code blocks and then delete all at once
Or you can delete them one by one by hovering same as any other post or page
Monaco Editor for Theme and Plugin Editor
Since we are storing Monaco Editor Code in our plugin it was silly not to have Monaco experience if you want to edit Plugin or Theme on the fly.
You need to go to the features and enable it as it is disabled by default.
VS in theme editor
VS in plugin editor
Click on the image to zoom
Code Settings section cleaned
Everywhere and Admin only now show only PHP button and comment as rest is not working anyway
Before
After
Server time is moved down to be above time conditions
PHP 8 Compatible
All conflicts with PHP8 are fixed now.
Compile SCSS Library update
We are using now latest version of SCSSPHP Library
For night owls and developers that are using dark themes in other applications, we are bringing dark theme in WordPress admin. The idea is to save their eyes from constantly switching between dark and light theme (WordPress default).
The entire theme is only 3kb and will have no impact on admin performance. Theme is loaded only inside WP admin and will not impact website front end.
It is disabled by default and you can enable it under the new 3rd tab (Themes). Toggle WP Admin switch.
WordPress Admin Dark Theme
Pages list
Plugins list
Single post Classic
Single post Classic
Gutenberg Dark Theme
Enjoy in lightweight Gutenberg dark theme that is only 2kb. Save your eyes and focus on the content.
This theme is separated from WP Admin and Post Classic view. Some users disable Gutenberg and we didn’t want to include it with the rest if Gutenberg is disabled.
Theme does not interact with the content.
Gutenberg Dark Theme for Oxygen
Oxygen will disable your theme and you will end up with dark panel but you will still have big white background. If you are using Oxygen enable 3rd switch instead 2nd:
Gutenberg optimized for Oxygen
Note: If you are using 3rd disable 2nd option.
Inject custom CSS in WP Admin
If you have an edge case problem with some specific plugin or you just want to push styling a little more to be more suitable to your taste we made it possible.
If you trigger switch “Inject Custom CSS” you will get a code editor to write your own styles.
The code editor is not extra burden as we reusing code mirror that is already shipped with WordPress.
No need to have the website in a new tab and constantly reload the browser to see the changes.
The preview feature is automatically included inside Code Block and SCSS Partial. You don’t need to activate anything under Scripts Organizer > Features.
Activate preview
it with Preview button located under the right part of the top bar.
Once the feature is activated Code editor will be resized and you will see a split-screen. By default preview is empty and you need to paste the link and press enter or click Submit button.
Preview Pressets
By default, full width and height are selected. You can use the dropdown to choose one of the predefined sizes to preview better your development for mobiles, tablets, and desktops.
Preview sizes are synced with Figma Artboard sizes to be able to have pixel-perfect design and development.
Preview Zoom ( Scale )
If your screen is not big enough but you still need to preview development in certain sizes or proportions we make it possible for you with scale factors.
Possible options are 100%, 75% and 50%.
Preview Changes
are visible after every code update. Use shortcut Control (⌘) + S to save and see changes right away.
After you save page is reloaded and if you are doing animations such as GSAP animation will be triggered as well.
Exclude conditions
This feature will finally allow you to have the option to select the entire website except: “Post types, Handpicked single posts, Taxonomies, or Terms.”
This feature is disabled by default as not everyone needs it.
It’s located under Template settings and you can enable it with toggle.
Exclude settings
By choosing different settings for “Template” you will get different exclude options.
Template > All will have:
Exclude Post types (Post, Pages, Custom Post Types)
Exclude Page/Post (Handpicked single post, pages)
Exclude Terms (Category 1, Category 2, Tag 1, Tag 2 … )
Exclude Taxonomy (Category, Tag, Custom Taxonomy)
Choices will be combined. If you Select Homepage and Posts code will not be applied on the homepage and all blog posts.
Template > Page, Post
Will not have any exclude option as you will be handpicking a single post or page in the first place.
Template > Post Types
Will have Exclude: Single Post or Pages ( Example: All pages except homepage )
Template > Taxonomy
Will have Exclude: Single term ( Example: All categories except uncategorized )
You need to go to the Features and enable Oxygen 3.8 Fixes.
Missing drag handles inside structure panel.
In Oxygen 3.9 you don’t need drag handles anymore. You can grab elements without them from whatever part of the element you want.
That’s why we removed them from UI completely to clean up UI. But since we released it before Oxygen pushed the update users with 3.8.1 have problems dragging elements.
Oxygen 3.9.1 Introduced an entirely new HTML structure of the “Structure panel” and we optimized CSS for new Oxygen. It was pointless to work on something that will be replaced by Oxygen anyway in a matter of days.
This will be bring coloring and the icons as well to the Structure panel.
Missing default theme
The toggle was now working if you select the default theme. It was doing fallback to the dark theme.
Moved Clean breakpoint to top right corner
If you enable show breakpoint size it was covering clean values icon. Now icons are always showing and they are accessible.
We are compatible with Hy*r*g*n Copy Paste
Even if we use different coding approaches the same values are copied since we are copying Oxygen values and not creating new ones. That’s why we are using the same JSON decoding standards and if someone gives you clipboard values you can paste it with Swiss Knife as well.
In case you want to roll back until Oxygen release 3.9 offically
You can log in to the shop dashboard and download Swiss Knife 1.3.7
More features, less code. Swiss knife 2.0 code is refactored, and it is lightweight as it can be.
Class Manager
Class Lock and Insert classes are merged into one are located above select classes.
Class lock
is polished in backend and frontend
Insert Classes
is updated with the search for names on top and also the added close button in case you don’t want to add any of the classes.
Search is filtering as your type.
Breakpoints size on hover
Is moved to be inside the buttons and not as a tooltip that was taking too much size.
New Structure panel
Since Oxygen changed completely HTML structure in 3.9. Icons are aligned properly. And have little opacity as they should now take distraction from reading the text.
Cut, Copy, Paste AKA Copy to Clipboard
This is still in alpha and we are working to polish it. At the moment it’s going to copy everything that is changed/added to the element. In the future, we will add granular copies like only classes, colors, fonts, etc.
It’s possible to paste on the same page, another page, or another website.
Note: Feature much be enabled if you want to use shortcuts
Pasting between HTTPS and HTTP will bring a dialog box where you need to paste code and it will be converted to HTTP.
Shortcuts manager
We added an option to display a list of “Assigned” shortcuts inside the Oxygen Builder. We are in the 21st century and we should not print anymore.
By default Display shortcuts feature does not have an assigned shortcut and you need to assign it.
Variable Fonts
From version 2.0 when you are registering custom fonts you will get the option to choose between Add a Font Faces or Variable font.
If you press Variable Font you will get only 1 box instead of several like with Font Faces.
The only difference is that here you will be able to set supported font weights.
Here is an example of what you can do with variable fonts
Zebra stripes are removed and active raws are now coloured with blueish background and blue line on the left.
Completely new UI for the Code Editor
Inspiration for a design is from the Visuals Studio Code and Gutenberg. We took visual studio code is inspiration since we are using the same editor is them Monaco editor.
LIght
Dark
In Focus ModeNavigate fast between code blocks
Use shortcut Command + S to save, and work without distractions.
Emmet Autocomplete
Oxygen Stylesheet
Now it’s possible and much easier to edit oxygen style sheets without need to load oxygen builder.
On the left side I will have navigator to switch between stylesheets. They will be sorted into the groups same as Oxygen is doing.
Oxygen Global Colors
Oxygen colours or are automatically displayed if oxygen builder is activated and you registered global colours.
They are available in Code Blocks (CSS and SCSS), SCSS Partials and Oxygen Stylesheets.
Fixes
Quick Edit in Admin List
Security issue
Metabox Pro plugin conflict. If Scripts Organizer is active it was showing Metabox even Metabox is deactivated
Scripts Organizer item was visible for non admins even they were not able to open it
Color Picker for SCSS was not working due to Oxygen updates
