DOCSEARCHbyAlgolia
Submit Docs

Recoda Workspace v2 Documentation

website·Indexed 31 days ago

https://docs.recoda.me/

Documentation for Recoda Workspace v2, a WordPress plugin toolkit that extends the functionality of Oxygen Builder. Features include the Blockpad code block editor, Quickflow actions for workflow optimization, a contrast ratio checker for accessibility, Grid Guides for design evaluation, and a Box Model component.

Tokens
4.3K
Snippets
6
Records
45
Agent score
55%

What's inside Recoda

  1. Overview of Recoda Workspace v2

    Recoda Workspace v2 is a WordPress plugin that extends the functionality of the Oxygen Builder. It provides advanced features across several domains including design preferences, box model enhancements, accessibility, SEO, code-related features, and a dedicated Actions CLI.

  2. Overview of Recoda Workspace v2

    Recoda Workspace v2 is a WordPress plugin that extends the functionality of the Oxygen Builder. It provides enhanced capabilities across several areas including design preferences, box model controls, accessibility, SEO features, code integration, and a dedicated Actions CLI.

  3. Overview of Recoda Workspace

    Recoda Workspace is a WordPress plugin and toolkit designed to extend the functionality of Oxygen Builder. It provides additional features and enhancements across design, code, and workflow to improve the overall development experience within the Oxygen Builder environment.

  4. Overview of Recoda Workspace for Oxygen Builder

    Recoda Workspace is a toolkit designed to extend Oxygen Builder with enhanced features for design, code, and workflow. A core principle of the plugin is the use of no-locking data, ensuring that the plugin can be safely uninstalled without permanently locking data into the site.

  5. Overview of the Box Model component

    The Box Model component in Oxygen Builder is a consolidated interface consisting of three main panels to manage element styling:

    1. Space: Controls margins, padding, and displays computed element size.
    2. Border: Manages border styles and border-radius.
    3. Size: Controls height, width, and overflow behavior.

    It supports auto PX to REM conversion, CSS variable shorthands, and CSS functions.

    Keyboard Shortcuts

    • Z: Open Space panel
    • X: Open Border panel
    • C: Open Size panel
    • V: Collapse/Expand panels

  6. Use advanced color and radius tools

    Recoda includes specialized tools for precise visual styling:

    • Color Tools: Provides feedback on contrast ratios and WCAG compliance levels against the current background.
    • HSL Color Wheel: Features a Hue wheel with dedicated Saturation and Lightness controls.
    • Advanced Radius Editor & Blob Radius Maker: Tools for complex border-radius editing and creating organic blob shapes.

  7. Use the Class Switcher for element management

    The Class Switcher provides a quick overview of element classes and allows one-click navigation between selectors. It includes a one-click class removal icon and supports copying a selector to the clipboard via double-click. This feature can be disabled in Preferences.

  8. Use the Blockpad code block editor

    Blockpad provides a Codepen-like editing experience for code blocks within Recoda, designed to make writing code feel intuitive and familiar for developers.

  9. Filter and audit page elements for SEO and Accessibility

    Recoda includes an Elements Filter to quickly locate and audit specific types of content on a page:

    • Code Blocks: Lists all code blocks and indicates if they contain PHP, CSS, or JS data.
    • Images: Lists all images and indicates whether they contain an alt attribute.
    • Headings: Provides an overview of all heading elements and their levels (e.g., H1, H2) to ensure a logical heading hierarchy.

  10. Requirements for reporting Recoda bugs

    To ensure a bug can be fixed quickly (often under 24 hours), the Recoda team must be able to replicate the issue. Bug reports should follow the standard reporting procedure and provide enough data to eliminate external causes (like 3rd party plugins or extensions) so the team does not have to guess the installation scenario.

  11. Use Codesense for CSS and JS smart hints

    Codesense provides intelligent suggestions in the code editor:

    • CSS: Provides property hints (e.g., suggestions for display:), finds all CSS variables on the page, and suggests Oxygen classes within Stylesheets and CLI.
    • JS: Provides JavaScript method hints.

  12. Manage styles with the Custom CSS window

    The Custom CSS window allows developers to write custom CSS in a dedicated space that occupies a small portion of the screen. This window can be undocked from the properties panel and dragged freely around the screen for a flexible workspace.