Author 诗语

User Design Library

User Design Library

The User Design Library feature allows you to create and use third party design sets in Oxygen.
Using A Third Party Design Set
To use a third party design set, you'll need to have the site key for that design set. To install it on your site, go to Oxygen > Settings > Library in the WordPress admin panel and tick the Enable 3rd Party Design Sets box, then click Update.

Next, click + Add Design Set and enter the Site Key of the design set you'd like to add.

Click Add Source Site. Now the new design set will be available under +Add > Library in the Oxygen builder. You can also install the entire design set from the site installation wizard, accessible via Oxygen > Home in the WordPress admin panel.
Creating A Design Set
Any Oxygen site can be made into a design set. First, visit Oxygen > Settings > Library and tick the Make this WordPress Install a Design Set box, then click Update. At this point, please also ensure your permalinks aren't set to Plain via Settings > Permalinks in the WordPress admin area, as it's not possible to add items from a design set that's using Plain permalinks.

Site Key - This is the key you'll need to enter in the Oxygen library settings to use this design set on another site. You can regenerate the key by clicking the Regenerate Key link below the Site Key field.
URL To Site Screenshot - This is where you can specify the screenshot that should be used for this design set. You can enter the URL of an image, select an image from the Media Library, or auto-generate a new screenshot.

The name of the Design Set is determined by the Site Title of the WordPress site as designated under Settings > General in the WordPress admin panel.
Now that the User Design Library feature is enabled, you will see an Oxygen Design Set Options meta box on pages, templates, and on a new post type that will now be available: Blocks.
Design Set Options -  Pages and Templates

Include this page/template in the default setup - This will cause this page or template to be automatically created when installing this design set via the installation wizard.
Include sections in this page/template in the library - If this is checked, all Sections from this page or template's design will be included as individual elements in the design set.
Include this entire page/template in the library - If this is checked, the entire page or template will be available in the Oxygen library as a single element.
Screenshots - Screenshots are used as a thumbnail of the design in the Oxygen library. Both pages and templates allow you to automatically generate screenshots. Templates also allow you to manually designate a screenshot.

Design Set Options - Blocks
Blocks are a post type that are enabled when the User Design Library feature is activated. You can create Blocks under Oxygen > Block Library in the WordPress admin panel. Blocks can contain the same types of Oxygen designs as pages and templates, but a Block and all of its contents are considered a single element in the library and can only be inserted as a group. It's best for each Block to contain a single Section.

Block Category - This is the category in the library under which this Block will be filed.
Screenshots - Click Generate Screenshot to generate a screenshot of this Block for the library.

Creating and Categorizing Design Set Sections
Block Sections are not categorized individually. Instead, the Block itself is categorized and will be listed under the chosen category in the library.
To include Sections from a page or template in your design set, you'll need to tick the Include sections in this page/template in the library in the Design Set Options meta box. Once the page or template's Sections are included in the library, they'll appear under Uncategorized in the library at +Add > Library > Design Sets > Your Design Set > Sections & Elements.
To categorize the Sections:

Edit the page or template in Oxygen
Find the Section you'd like to categorize in the Structure Pane
Click the hamburger icon on that Section
Click Categorize
Choose an appropriate category

Now, the categorized Section will be listed under the appropriate category in the Oxygen library.

Websites

Websites

To install a complete website from Oxygen's design library, click Oxygen > Home in the WordPress admin panel and then click Install a website.

Click view demo to preview the website, then click Install to install it.
Confirm installation by clicking Confirm & Install. The website is now installed.

You can edit the installed pages from Pages -> All Pages and the templates from Oxygen -> Templates.

Installing Oxygen

Installing Oxygen

Install Oxygen just like a normal WordPress plugin.
In your WordPress admin panel, go to Plugins -> Add New -> Upload, and upload the .zip file for Oxygen.
Then, activate the plugin just as you would activate any other WordPress plugin.
After activating Oxygen, choose Premade Website to load a premade website from the Design Library. Otherwise, choose Blank Installation.
Downloading Oxygen
After you have purchased Oxygen, you can login and download it from the customer portal.
Entering Your License Key
To get update notifications and download updates to Oxygen from your WordPress admin panel, enter your license key by going to the Oxygen -> Settings screen, then clicking the License tab. You can find your license key in the customer portal.
Troubleshooting
Fatal Error On Activation
Disable and delete all other versions of Oxygen that are active on your site. This can be done from Plugins page of your WordPress admin panel.
Make sure you are using PHP version 7.3 or 7.4.
PHP 8.0 is not yet supported.
The uploaded file exceeds the upload_max_filesize directive in php.ini
Contact your web host and ask them to increase the upload_max_filesize setting for you.
Further Reading: Troubleshooting Guide

Opening the Visual Editor

Opening the Visual Editor

Oxygen's visual editor can be opened by clicking the Edit with Oxygen button. The button appears on the Edit screen for posts, pages, and all custom post types.
To open Oxygen on a Page, follow these steps.

Go to the Pages screen in the WordPress admin panel
If the page is not yet created, click Add New button. Then click Save Draft or Publish. If the page is already created, point to its title and click Edit link.
Click Edit with Oxygen button to open the page in Oxygen.

Gutenberg Integration / Client Mode

Gutenberg Integration / Client Mode

Note: Oxygen's Gutenberg integration is only accessible if the Oxygen Gutenberg plugin is installed and activated.
Oxygen's Gutenberg integration allows you to design entire pages or individual blocks in Oxygen, and then use and edit them directly in the Gutenberg block editor. You will be able to edit the following field types directly in Gutenberg:

Text
Rich Text
Images
Icons
Link URLs
Section Background Images

By using Gutenberg, you or your clients can make content-only changes easily in the Gutenberg editor with no chance of making bigger changes or tampering with parts of the design that shouldn't be changed.
How to create a block
Oxygen blocks for Gutenberg can be created in three ways:

Go to Oxygen -> Block Library and create a new block
Click the hamburger icon on a Section or Div's label in the Structure pane, and click "Copy to Block"
After designing a page, check the "Make This Full Page Editable In Gutenberg" checkbox in the Oxygen meta box for that page

Once a block has been created in one of these ways, you can use and edit them directly in the Gutenberg editor on posts and pages.
USING A BLOCK IN THE GUTENBERG EDITOR
If you're adding a block created via the Block Library or the Structure pane in Oxygen, click the + button in Gutenberg and select the Oxygen Blocks category. Click the block name to add it to your page or post.

If you'd like to add an entire page that's been saved as a block via the Oxygen meta box, choose the Oxygen Full Page Blocks category and click the full page block name to add it to your page or post.

Once the blocks you've chosen are inserted into Gutenberg, you're ready to edit their content.
EDIT THE CONTENT IN THE GUTENBERG EDITOR
Text, images and link text can be edited by clicking on the relevant item within the builder. Icons, background images and URLs can be edited from the Block Sidebar menu to the right of the page content.

To identify which element a field in the Block Sidebar belongs to, hover over or click it. When you hover a field, the associated element is outlined in blue. When you click it, the element animates briefly.

CLIENT MODE
Once you've moved all of your Oxygen pages or designs into Gutenberg, you can effectively switch Oxygen to client mode by going to Oxygen -> Settings -> Post Type Manager and checking the box for all post types where you'd like to have the Oxygen meta box hidden. In cases where you're the only user with administrative access, you can go to Settings -> Role Manager and disable Oxygen access for all non-administrative users.
EDITING THE BLOCK IN OXYGEN
Editing an in-use block in Oxygen will change the design everywhere that the block has been used. Content changes that have been made in Gutenberg will remain unless the elements whose content has been changed are deleted from the block or page design in Oxygen.
Unsupported elements
Some elements, such as the Repeater and Dynamic Data elements are not supported in Gutenberg. They will work on the front end, but will not be displayed in the Gutenberg editor. Instead, you'll see a placeholder when an unsupported element is present in Gutenberg.

To change the placeholder labels (.e.g "Repeater Preview Unavailable"), simply rename the element in Oxygen by clicking its hamburger menu in the Structure Pane and clicking "Rename".

Advanced Query Builder

Advanced Query Builder

In addition to the default, custom, and manual query options available for Easy Posts and Repeater elements, you can also choose the advanced option.
This query type allows you to visually build a query based off of WP_Query parameters and optionally, dynamic data from WordPress.

You can build virtually any type of query that WP_Query supports by using the advanced query option:

Related posts by taxonomy
Queries based on custom field values (e.g. ACF relationship fields)
Author archive queries
Child post queries

The advanced query option includes a few presets that cover some of these use-cases without having to manually configure the query.
Building Your Query
Note: advanced queries are an advanced topic and it's very helpful if you understand how WP_Query works. You can see a full list of WP_Query parameters, along with descriptions of their function, at https://www.billerickson.net/code/wp_query-arguments/.
To begin building your query, select your Easy Posts or Repeater element and navigate to the Query settings in the Properties Pane. Choose advanced and then, if you're not using a preset from the preset dropdown, click Edit Query.

You'll then see the Advanced Query modal. Begin building your query by clicking the blue Add Query Parameter button.
Next, choose the desired query parameter from the dropdown.

Once a parameter is chosen, click the Add Value button.

Depending on which parameter is chosen, you'll either be presented with a text input field or a dropdown. All text input fields in the Advanced Query modal can be populated with dynamic data by clicking the data button in a given field.
Some query parameters accept multiple values or multiple different types of values. One example of this is tax_query, which accepts an array of data to help identify the posts that should be returned.

Once array is chosen from the dropdown for the tax_query, you can then add values to the array itself to build the query.
As you can see from this example, it's possible to build very complex queries using the Advanced Query option. You can also add multiple query parameters to a query.

Examples
ACF Relationship Field
To use an ACF Relationship field, edit your Advanced Query and add the post__in parameter.
Next, add a value. Then click the data button in the parameter's value field.
In the Dynamic Data dialog, click Advanced Custom Field and then your ACF relationship field from the list of available fields.
On the next screen, make sure to put a single comma ( , ) in the separator field.

Next, click INSERT.
Now, close the Advanced Query dialog and click Apply Query Params button in the Properties Pane to see the result. Note that you must be previewing a post with a populated ACF relationship field in order to see the results as expected.
You can further narrow your query by adding post_type and other parameters to make it more efficient.