In the past, If you ran into a script loading problem, it was a pain to sort it out. Sometimes if scripts have dependencies, they need to be loaded in exact order. Before version 3.4.5, you would need to delete them and then register them again in the order you need. We introduced a simple sorting feature with just drag and drop. On the left side, you can see 3 bards that you can click and drag. The order in the list will also be the order on your front end. After you finish the order, hit save and enjoy.
Bulk Enable & Disable
Countless times we been in the situation where you quickly need to disable and then enable code blocks. Doing one by one is definitely time consuming. Now you select one by one or entire row and apply bulk.
Quick Note: If you are assigning tags to the code blocks you can click on the tag to filter blocks and then disable and enable with bulk action.
The Metabox update was breaking “Code Block”settings styles
For Scripts Organizer, we are using the Metabox plugin as our custom field. They were changing the HTML structure or their elements, so CSS needed to be properly targeted. Why is this happening? Even if we included Metabox in our plugin, we want you to have the latest version of Metabox. We are checking if you have Metabox, and then you will use the latest installed; otherwise, we fall back to the one we provided.
Broken Version
Fixed Version
Tags will be included in export and import
If you want to reuse Code Blocks or the Gutenberg block you probably have your own tags added as well. From now on once you export and import them tags will be included in JSON file and will be applied on new websites import.
In the past, If you ran into a script loading problem, it was a pain to sort it out. Sometimes if scripts have dependencies, they need to be loaded in exact order. Before version 4.3.0, you would need to delete them and then register them again in the order you need. We introduced a simple sorting feature with just drag and drop. On the left side, you can see 3 bards that you can click and drag. The order in the list will also be the order on your front end. After you finish the order, hit save and enjoy.
Bug Fix for rename element shortcut.
If you tried to rename div or section that had elements inside it was trying to rename last element inside.
Big measure box overlap on focus
New Oxygen update was making elements overlap if some of the fields were focused and expanded.
We have split the page into three tabs with focusing now on the CSS as the main feature. Second one is the Tailwind Configuration because from time to time you will go there and update something. And we moved plug-in settings into the third tab there you will usually just set up something and don’t come back that often.
Save Shortcut
To keep your hands on the keyboard all the time we introduce the save shortcut and you can use it by pressing control or command depends if you’re on the Mac or the PC plus S.
Theme
We also brought dark and light theme to help your eyes during the night hours. Team settings are saved in local storage so your preference will be there until you don’t clear browsers cash.
New Labels
We also spend some time to enhance the enabling experience. Now labels and group titles are more meaningful and easy to understand.
Till now, only SAVE from Code Block had live reloaded. From version 3.4.3, if you include partial and if you CHANGE and SAVE something in SCSS Partial, live-reload (hot reload) will be triggered, and you will see changes in Builders and Frontend of the website.
Gutenberg Add on got better organisation
Before this release you needed to write CSS and JS in Code Block and then link it to the Gutenberg Block (Element) to have preview inside Gutenberg Editor.
From now on you will have SCSS and JS tabs as well.
Now you are asking yourself about performance will you get CSS file for every block on the page.
NO. We will combine all SCSS’s and compress into one CSS file.
Turned off regenerate files notice
This was a legacy from version 2.0
If you are switching from version 2.x to 3.x you need to regenerate files to continue to work. Since everyone has already updated after almost a year in between, we removed that to have from the start.
Instead of bloating experienced users with predefined Code Blocks, we already have the Export/Import feature. We decided to make it on JSON export. Everyone who needs to study code examples can import them and not be bothered after each new installation.
This will trigger before everything. Equivalent to this is INIT or Function.php
<?php
// ************************************************************ //
// Use this as an alternative to function.php
// Bellow is an example of how to add a custom body class
// ************************************************************ //
// Add specific CSS class by the filter.
add_filter( 'body_class', function( $classes ) {
return array_merge( $classes, array( 'your-class-name' ) );
} );
?>
Trigger location: Admin only
It will affect only the WordPress admin panel and not the website when you are logged in. It’s perfect if you want to create a custom admin panel or highlight some menu inside the admin panel.
Once you have chosen where on the website scripts will be triggered, you need to decide where on the page they should be injected. The “Header” and the “Footer” have options to predefine Code Languages:
CSS
SCSS
JavaScript
HTML
CSS
.card { your code }
.card .title { your code }
SCSS
Is perfect for writing code with less repetition. Also, it’s much easier to organize it.
.card {
your code
.card .title { your code }
}
JavaScript
(function($){
$(function() {
// Code goes here
});
})(jQuery);
HTML
If you are using HTML, you need to wrap it and . You can not write SCSS inside an HTML element. A perfect Example for HTML is to paste Google Analytics Code
<style>
.card { your code }
.card .title { your code }
</style>
<script>
(function($){
$(function() {
// Code goes here
});
})(jQuery);
</script>
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script sync src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
window.dataLayer = window. dataLayer 11 [];
function gtag() {dataLayer .push (arguments); }
gtag('js', new Date () );
gtag('config', 'GA_TRACKING_ID');
</script>
<!-- End of Global Site Tag (gtag.js) - Google Analytics -->
Script location: Conditions
This will trigger scripts on the front end and inside the editor. For Example, you can use this for CSS/SCSS, JS, and PHP for Theme. By default, if you don’t use options Bellow, it will effect every page, post, post-type, and archive.
// Example on how to toggle class and to make a menu
// HTML Markdown
// <div class="toggleTrigger">Menu Toggle</div>
// <div class="toggle">Toggle</div>
var toggleTrigger = document.querySelector('.toggleTrigger');
var toggle = document.querySelector('.toggle');
toggleTrigger.onclick = function() {
toggle.classList.toggle('active');
}
<?php
// Add Google Tag code which is supposed to be placed after opening body tag.
add_action( 'wp_body_open', 'wpdoc_add_custom_body_open_code' );
function wpdoc_add_custom_body_open_code() {
echo '<!-- Google Tag Manager (noscript) --><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-J4LMVLR" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><!-- End Google Tag Manager (noscript) -->';
}
?>
Template: Page/Post
This option will help you target a specific page, post, custom post.
/* "Hello world" - blog post will have black background with yellow text. */
body{
background-color: black;
color: yellow;
}
Template: Post Type
This option will help you target a specific post type.
/* All posts will have blue background with yellow text. */
body{
background-color: blue;
color: yellow;
}
Template: Taxonomy
This option will help you target a specific taxonomy.
Category: Uncategorised – Archive page
/* All posts will have blue background with yellow text. */
body{
background-color: blue;
color: yellow;
}
Template: Custom
This is the most powerful one. You can use WordPress conditions or create your own.
/* Applies CSS on Homepage and Front page */
body{
background-color: green;
color: pink;
}
Then reuse this condition in code blocks by pasting “check_if_url_has_string(‘dplugins-test-string’)” under Custom.
Exclude
This will help you to have a combination with the triggered above.
This will allow you to use: Conditions – Header – CSS to apply CSS everywhere on the website – except for some specific post type, taxonomy, or targeting of a single page or post.
Or you can use: Conditions – Header – CSS, And apply only to post type Post, and it will apply to all posts
– except for some specific post, “Hello World.”
In the next post, I will cover Scheduling, Scripts Manager, and SCSS Partials.
The latest update brings a bug fix for the variable picker. Thanks to users who found edge cases with some of the premium WordPress themes and provided us with the WordPress setup so we could fix them.
You also need fewer steps to load CSS variables now since you do not need to reload the code block.
Steps:
Open the Preview
Navigate to the page from where you want to pick up variables
Press “Control + S”
Reload the page.
We also made it possible to clean up the list by adding a button at the bottom of the list.
If you want to know more about variable picker feature read more our previous blog post.
CSS Variable Picker feature will allow you to get a list of entire variables on the page and insert them with just one click. Besides the list, you will get a search field to narrow down your wish list quickly.
CSS Variable picker works with CSS and SCSS files regardless if you enable the option to create a file or not.
Enable CSS Variable picker.
This feature is enabled by default, and you don’t need to do anything under the settings.
Still, to make it work you need to:
Open the Preview
Navigate to the page from where you want to pick up variables
Press “Control + S”
Reload the page.
After that, you can click in the top right corner and enable the least.
Search field
This will give you the option to easily narrow your wish list. The list will automatically change as you type.
We are making big excuses to promote LTD since Joshua, our lead developer of the Collaboration plugin, is from Indonesia. While the offer is still available, purchase LTD or upgrade from a yearly licence to LTD
LTD is only available until August 18th. On the 18th, we will close it during the day, so please don’t wait until the last minute.
Interested more in what Collaboration can do? Watch this live stream from Jonathan and Permalsug.
Even though LTD is only available for a limited time, you will have 30 days to test and see if the plugin works well for you. We offer a 30-day money back guarantee.
Search inside Code Block, Partials and Gutenberg Elements list
Managing code blocks can be tricky. And quick access to them is even more challenging. That’s why we have introduced several UX improvements. Besides filtering by category, you can search them by Title or ID.
Add Code Block, Partials, and Gutenberg Elements from one location
“+Add New” is expended, and now you will have the option to add Block, Partial, or Gutenberg Element regarding what you are currently editing.
Scripts & Styles Priority
Plugins can have different priorities, and if they have a bigger focus than Scripts Organizer, you will need to write essential, or the script will not be triggered if you run it before.
That’s why we brought you the option to set scripts and styles with the priority you need. Settings are global and will be set for the entire group. Groups are divided by Frontend and Backend and Frontend by option if you checked to create the file.
Live Reload (Sync) without page reload
Before, we had the option to reload the page inside iFrame, but if you want more space or if you are working with builders, you want to have a preview inside them. For builders reloading the page is not an option as you will need to wait to load every time after you save or make edits. With page reload (Sync), we will only check if there are some CSS changes, and we will fetch them without reloading the entire page.
The new update pushes the Winden outside of just the Oxygen extension. You can now build websites with bricks or even with only Gutenberg. Besides Builders, it has full Scripts Organizer support for Gutenberg add on or shortcodes.
Oxygen Builder
Bricks Builder
Gutenberg
Scripts Organizer
Cwicly
Purchase options
When we released it, we allowed early adopters to have Lifetime Deal Licenses. It was not fair to others since integration for others came later. That’s why once again, for a limited time, we are allowing:
To purchase LTD Licence
To Migrate from Yearly license to LTD
Tutorials
This one is done with Oxygen builder but way of working can be applied to every builder.
