0.9.8 P1

0.9.8 P1

VIDEO: https://www.canva.com/design/DAFCoiRFcHw/view

[NEW] Theme Recoda 4 2W, closer to Oxygen 4 default theme
[FIX] User profiles not initialized after plugin update
[FIX] Hydrogen duplicated expand/ collapse icons
[FIX] Command UP fix
[FIX] Class switcher show all option
[POLISH] Recoda theme system, more integrated with Oxygen 4 theme system
[POLISH] Classic Margin/Padding view (Section Padding)

Description: Version 0.9.8 does not introduce anything special, it should offer a more polished UX and more compatibility with Oxygen 4.0 ecosystem. New theme is introduced to make UI closer to the new Oxygen 4.0 UI. 

0.9.7 P1

[NEW] User Profiles (extends User preference feature)
[NEW] Add elements Layout options (compact/ classic)
[NEW] Fullscreen mode rebuild (shortcut: spacebar)
[NEW] Enable/Disable Auto Unit Detection[NEW] Margin/Padding Layout controls (classic/ column/ default)
[FIX] Live server does not work in certain condition (open blank page)
[POLISH] Oxygen 4.0 Compatibility UI small polish

VIDEO: https://www.canva.com/design/DAFBie2oRT0/view

Description: User profiles extends existing User preference feature. It gives two profiles to save User Preference. Default profile is global and all users can access to that profile, Custom profile is unique to each user. So each developer could have own Custom profile, while clients could use Default profile slot. 
Add elements layout bring option to pick more Oxygen native (Classic view) or Compact view which was only option until 0.9.7 P1.
Fullscreen is new, now it is not real fullscreen but it can mimic Fullscreen pretty close by toggling open/close both panels.
Margin/ Padding Layout was in prototype with earlier Oxygen 4.0, now it is made for RC1 and will give you options to have bigger inputs in classic and column view so you could easier work with CSS Vars and CSS function.
Live server had some case when it would open blank page instead of fronted. For users which does not use it yet, it will show fronted, reload it on save and remove WP Admin bar to mimic incognito.

0.9.6 P4

🆕 Lock drag Padding controls - Disable Margin/Padding drag
🆕 Lock/unlock selector shortcut Ctrl+ L / Cmd + L

🖌️ Select suggestion by mouse click
🖌️ CSS Vars click and apply via mouse
🖌️ Fullscreen mode indication (toast message and icon)
🖌️ Global units changed logic, applies only to whitelisted properties (was working for every except excluded)
🖌️ Shift+A - Add panel shortcut, focus search

🔧 Grid Controls UI bug
🔧 CLI multiplication div*3 bug (>div*3 works)
🔧 Variable suggestion only works after changing user preference

0.9.6 P3

  • [Integration] ACSS  variables integration
  • [Powersheets] Adjustable font-size 
  • [PANELATOR] tooltips
  • [Live server] Remove margin from HTML element
  • [Advantor] Lock Advantor for locked selectors
  • [Class switcher] Small polish
  • [Bug fix] Hidden ruller
  • [Bug fix] Global units applied where not needed
  • [Bug fix] Global/ Local units don't trigger change in some cases
  • [Polish] Showing CSS vars when number is first character

0.9.6 P2

Quick fix:
Absolute position controls view looks broken

0.9.6 P1

Version: 0.9.6 P1
Compatibility: Oxygen 3.9 and Oxygen 4.0
Size (.zip): 146kb

Before we get into the changes, I am very excited about the new version and some features that make Oxygen a full-fledged IDE and allow a seamless transition from visual to manual programming. Workspace goes far beyond the changes made in UI / UX. As the name suggests, Recoda is all about programming and we develop solutions to help you programme more, better and smoother.
Made by hands, for hands.

🆕 NEW 1: Powersheets
It would be handy to have a VSCode-like editor that displays in a new window on your laptop, or even better, if you have multiple screens, you could have it display on the second monitor. Suggestions for Oxygen classes, smart suggestions for CSS properties, suggestions for CSS variables, almost everything you get inside desktop code editor.
Video: https://cln.sh/hKxjdH

🆕 NEW 2: Default units.
You can now set global units in rem, local units like % for Width, maybe px for Margin and the unit changes as you type.
Video: [https://cln.sh/lK97Ee]

🆕 NEW 3: Auto-detect units.
Preset units are good, but you should set them beforehand and sometimes they are not what you want. With auto-detect, you can write .5rem in the input and the unit will be changed to rem. If you use an unsupported unit, the unit will be set to none.
Bonus: If you use CSS functions (calc, min, max, clamp), unit also becomes none.
video: [https://cln.sh/mKoMBY]

🆕 NEW 4: CSS variables everywhere.
Recoda is built with CSS variables, we love them. So if you were a pilot of a plane with CSS variables, Recoda will be your co-pilot.
1. Interface inputs
2. Custom CSS
3. Stylesheets
4. Blockpad
5. Powersheets
Video 1: [https://cln.sh/eqzAFU]
Video 2: [https://cln.sh/cEwLFO]

🆕 NEW 5: Background position presets.
To be honest, it's a hacky solution, it's cool, but I do not think it will have a big impact on your workflow, but it was asked for, so I made it optional in case someone finds it useful.
Image: https://cln.sh/b4jzZi
Enable via User Preference - > Advanced Tabs - > Background Position Preferences

🖌️ Polish 1:  Class Switcher rebuild from scratch.
As far as functionality goes, almost everything is the same. This should fix the weird UX error that can occur when you use the Oxygen class box to add a class. You should now be able to delete classes with a single click, and the display of locked classes is now better and more consistent with the rest of UI.

🖌️ Polish 2: Shortcuts without jQuery.
Our commitment to the future. We want less dependencies, so we rely on our code.

🖌️ Polish 3: Code refactoring.
Our commitment to the future. We look at the entire codebase and shake it up a bit to remove some silly workarounds that were introduced in the past. There are still some left, but we will do this from time to time.

🖌️ Polish 4: Adding prefixes to Recoda CSS variables.
CSS variables are now prefixed, which should help avoid collisions.

🖌️ Polish 5: Live Server.
Now opens in a new tab, should remove WP admin bar after opening and after each reload. Fixed some other issues. If you try to open Live Server while editing reusable files, it shows that it is not possible.

🖌️ Polish 5: Blockpad
Now Blockpad shows the name of the code block and opening the Blockpad view can be done through the code block interface.
Image: https://cln.sh/ehIOg4

🔧 Fix 1: The command bar does not add a space when renaming elements with @.
🔧 Fix 2: Shift-B in code editor prevents uppercase letters (collision with function).
🔧 Fix 3: Ruler hidden behind command bar. 
🔧 Fix 4: Insert options are hidden in reusable templates due to Recoda CSS.

0.9.5 P1

Compatibility: Oxygen 3.9 / Oxygen 4.0 Alpha 1 Published: 22.02.2022.​

Size: 124kb

Blockpad Editor

New: Code block linking to opened BlockPad


New: Stylesheets linking (remember last edited stylesheet)

New: Breakpoints snippet (Stylesheet, Blockpad) [Ctrl-B]@ media max-width

  • New: Breakpoints snippet (Stylesheet, Blockpad) [Shift-B]@ media min-width

Command-line (ACTIONS)

New: command for creating Stylesheet (syntax: /stylesheetName)

New: command for creating Stylesheet (syntax: |folderName)New: command for importing GitHub Gist (more:


Fix: text selection not showing

Fix: Class higlighter option bug (adds just first class when this enabled)

Fix: Duplicate command performs duplication and multiplication

  • Fix: Change content command works only on first element

User Preference

New: Data format changed, added direct links to Docs

New: Added categories for organizing all options

New: Canvas small Scrollbar

New: Disable shortcuts

New: Stylesheets/ selector panel UI pack

New: Advantor style 5 options

New: Docking option

New: Margin/Padding 3 views (just for Oxygen 4.0)

  • New: Command-line auto-rename automation rule

Responsive Helpers

Polish: Canvas centered

  • New: Canvas Auto-Zoom to fit if device is bigger

Structure Filters

New: UI Tweaks, colored filters

Class switcher

New: Show delete class button on hover

Quickflow actions

New: Right click on Canvas Settings to generate @media query to clipboard (+ Ctrl for "Mobile first" min-width)

  • New: Right click on Breakpoint selector to generate @media query to clipboard (+ Ctrl for "Mobile first" min-width), just for Oxygen 4.0+

General UI/UX

  • New: Toast alerts above command-line after actions to indicate action
  • New: Toast alerts above command-line after actions to indicate action
  • Fix: Panelator Grey screen of death
  • Polish: Structure Style option - Sleek
  • Polish/Fix: Expand units option

Experimental Features

E1: Reororder Selectors (move up/down)

How to use?

  1. Select desired Selector
  2. Open Dev tools - Console
  3. Call function recoda. moveSelector ("up") or recoda. moveSelector ("down")

E2: Reororder Stylesheets (move up/down)

How to use?

  1. Select desired Stylesheet
  2. Open Dev tools + Console
  3. Call function recoda. moveStylesheet ("up") or recoda. moveStylesheet ("down")