Author 诗语

Client Control

Oxygen 3.6 introduces a new "Client Control" tab under Oxygen -> Settings in the WordPress admin panel. There, you'll find that we've consolidated the Role Manager and Post Type manager into this tab.
Role Manager

By default, access to Oxygen is only available to administrators. Access to Oxygen can be granted to other user roles at Oxygen -> Settings -> Client Control -> Role Manager in the WordPress admin area.
Oxygen's role manager works with the WordPress default user roles, any additional user roles added by custom code, and any additional user roles added by 3rd party plugins such as User Role Editor.
Access Levels
Note: Edit Mode will only be available on sites activated with an Oxygen Agency license.

In the access level dropdown for roles & users, you'll find Full Access, No Access, and Edit Only options.
Full Access will grant the given role or user complete, unrestricted access to Oxygen.
No Access will restrict the given role or user from accessing Oxygen at all, including all admin settings pages.
When Edit Only is chosen for a role or user, several restrictions are imposed for that role or user:

The Oxygen meta box is hidden. Instead, you'll find an Oxygen icon button in Gutenberg or a blue "Edit with Oxygen" button at the top of post edit screens using the Classic Editor.
The "Oxygen" admin menu is replaced with a single "Templates" link.
The Manage button in the builder is hidden. Edit Only users cannot access global settings, stylesheets, or selectors.
The +Add button is hidden.
The Conditions, Link, Duplicate, and Delete icons in the Properties Pane are hidden.
The add class button in the Selector Dropdown is hidden.
The copy, clear, and delete icons in the Selector Dropdown are hidden.
The Advanced tab in the Properties Pane is hidden.
Code Blocks cannot be clicked or edited.
In the Structure Pane, the hamburger menu for elements is hidden.
In the Structure Pane, the delete icon for elements is hidden.
Drag & drop is disabled.

These restrictions make it safe to let a client into Oxygen as they can only change styling and content. There's no access to code, global styles or settings, deletion, or re-arranging of elements.
This, however, may be far too restrictive for some cases, so we've added some granular controls that appear once you've chosen "Edit Only" access for a role or user:

Enable Elements: Allows role/user access to insert, duplicate, and delete specified elements.
Enable Advanced Tab: Allows role/user to use the Advanced Tab in the Properties Pane. All Custom CSS and JavaScript tabs will still be hidden.
Enable Drag & Drop: Allows role/user to drag and drop elements in the builder.
Enable Reusable Parts: Allows role/user to add Reusable Parts.
Enable Design Library: Allows role/user to add elements from the Design Library.
Disable Classes: Prevents role/user from being able to modify a class that has been applied to an element.
In addition to these restrictions, you can also lock roles/users with Edit Only access completely out of Oxygen on specific posts using the new "Lock Post In Edit Mode" checkbox in the Oxygen meta box. This does not restrict the role/user's ability to access the WordPress editor for that post.
Per User Access

In addition to the Role Manager and Post Type manager controls, you'll also find a "Per User Access" control section that allows you to define access on a per-user basis. Settings defined here will override role-based settings for a given user.
Post Type Manager

By default, Oxygen's metabox appears on the Edit screens for all post types.
You can hide the Oxygen metabox from post types where you do not need it via Oxygen -> Settings -> Client Control -> Post Type Manager in the WordPress admin area.
IMPORTANT SECURITY INFORMATION
Full access to Oxygen should only be granted to trusted users. This is because Oxygen provides the ability to execute PHP code, so any user granted access to Oxygen could execute code to make themselves an administrator.

Conditions

Conditions allow you selectively display any Oxygen element based on a condition or set of conditions, such as if a user is logged in, or if a user has a certain role or capability.
When an element's conditions evaluate to true, the element is shown. If the conditions evaluate to false, the element is hidden. By default, all of an element's conditions must evaluate to true in order for it to be shown, because the condition type defaults to AND. If you change the condition type to OR, only one of the conditions must evaluate to true for the element to be shown.
To set a condition for any element, select the element and click the condition icon at the top of the Properties Pane. If you wish to add a condition to a Shortcode element, you must wrap it in a Div and add the condition to the Div.

You'll then be presented with the condition menu.

Set Conditions
This button launches the Conditions Modal, where you can set the conditions for this element.
Condition Type
Choose whether the condition stack is evaluated as AND (all conditions must be true) or OR (one condition must be true).
In-Editor Behavior
Choose the visibility of the element in the builder preview. Choose Always Show to make the element always visible in the builder. Choose Always Hide to see what the design looks like when the element's conditions evaluate to false. To preview the element's visibility based on the actual evaluation of its conditions, choose Show/Hide Based on Conditions.
Conditions Modal
Clicking Set Conditions launches the Conditions Modal, where you can designate the conditions used for the element. To get started, click the Add your first condition button in the center of the Modal. Now, you'll be presented with three fields: Condition, Operator, and Value.

Use the left-most dropdown to choose your condition first. Oxygen includes a number of built-in conditions, but conditions registered via the Conditions API will also be listed here.
Once you've chosen a Condition, choose an Operator in the middle drop down field. Operators are used to evaluate some value (for example, the current post's ID) against the value you choose. There are a number of operators available depending on the chosen condition. Some operators, such as contains or does not contain are abstractions of string comparison functions, and work as their name implies. Some conditions may not need an operator, in which case the only available operator will be two dashes (--).
Finally, choose a value in the right hand field. This field may be a dropdown, an input field, or both, depending on the chosen condition. When inputting a custom value, be mindful of the type of data you're comparing. For example, you should not use a string, or text, as the value for a Post ID condition, since it's comparing your value to a number.
Once a condition has been set up on an element, you can see the condition indicator icon next to that element's name in the Structure Pane.

This icon will assist in locating elements that may be hidden by a condition in the builder preview.
Conditions API
The Conditions API allows you to register your own conditions for use within Oxygen. This can be done from a custom plugin or via the Code Snippets plugin.
To begin, it's important to first check if the oxygen_vsb_register_condition function exists before we use it.
if( function_exists('oxygen_vsb_register_condition') ) { }

This prevents errors that would result from Oxygen not being active and our code still trying to call the oxygen_vsb_register_condition_function.
Next, we need to use the oxygen_vsb_register_condition() function to register our condition. The oxygen_vsb_register_condition function accepts the following required arguments:
Condition Name
(string) The name of the condition as it will appear in the Conditions list in Oxygen.
Values
(array) The array of pre-set values the user can choose from. Use the options key to list default values. Set the custom key's value to true to allow users to input custom values. Example: array('options'=>array('option 1', 'option 2', 'true', 'false'), 'custom'=>true).
Operators
(array) Array of operators that can be used in the Condition. Example: array('==', '!=').
Callback Function
(string) Name of function that will be used to handle the condition.
Condition Category
(string) Name of the category under which the Condition will appear in the Conditions dropdown.
In this example, we'll register a condition that checks the current post's ID.

if( function_exists('oxygen_vsb_register_condition') ) {
oxygen_vsb_register_condition('Current Post ID', array('options'=>array(), 'custom'=>true), array('==', '!=', '>=', '', 'array(), 'custom'=>true), array('==', '!=', '>=', '', '=") {
if ($current_post_id >= $value) {
return true;
} else {
return false;
}
} else if ($operator == "<=") {
if ($current_post_id ") {
if ($current_post_id > $value) {
return true;
} else {
return false;
}
} else if ($operator == "<") {
if ($current_post_id array(), 'custom'=>true), array('==', '!=', '>=', '', 'eval_int($current_post_id, $value, $operator);
}
}

If we were evaluating a string, we could use the $OxygenConditions->eval_string() function. To use either function, simply return the function after declaring the condition variables, and pass in the value we're comparing to ($current_post_id), the value the user has chosen ($value), and $operator.
Additionally, when registering Conditions, we can use the $oxy_condition_operators global variable to quickly insert common sets of operators for use in our condition.

if( function_exists('oxygen_vsb_register_condition') ) {
global $oxy_condition_operators;
oxygen_vsb_register_condition('Current Post ID', array('options'=>array(), 'custom'=>true), $oxy_condition_operators['int'], 'ex_condition_post_id_callback', 'Post');
function ex_condition_post_id_callback($value, $operator) {
$current_post_id = get_the_ID();
$value = intval($value);
return oxy_condition_eval_int($current_post_id, $value, $operator);
}
}

First, we must make the $oxy_condition_operators variable available with the line global $oxy_condition_operators. Next, we replace our operators argument in oxygen_vsb_register_condition() with this variable, and target which set of operators from the array we want to use. There are three sets: int, string, and simple.
$oxy_condition_operators['int'] = array('==', '!=', '>=', '', '<')
$oxy_condition_operators['string'] = array('==','!=','contains','does not contain')
$oxy_condition_operators['simple'] = array('==','!=')

Connecting to Typekit

Adobe Typekit is an online library of fonts. To use Typekit fonts with Oxygen, you must have a Typekit account.
You can connect Oxygen to your Typekit account from the Oxygen -> Typekit page of your WordPress admin panel.
Generating a Typekit API Token

Login to your Typekit account.
Click your Account Avatar at the top right, then click API Tokens.
Click Make me a new API token to add a token.
Copy the API token.

Connecting Oxygen to Typekit

Go to Oxygen -> Typekit in your WordPress admin panel.
Paste in the API token and click Submit.
Select the kit you want to use with Oxygen, and click Submit again. Your domain name is automatically added to this kit. Note that it may take up to 5 minutes for Typekit's servers to update and the fonts to be available for use with Oxygen.
The fonts in this kit will now be available on all of Oxygen's Font Family dropdown lists.

Creating a Kit on Typekit
Once you are logged into your Typekit account, you need to choose the fonts you wish to use with Oxygen by adding them to a kit.
First, click Kits > Create new kit at the top right.

Then, type a name for the kit. You may also specify the domain it will be used on, though this is not necessary.

Click Continue twice, and then click Browse All Fonts.
Once you've found a font you wish to add to the kit, browse to the font page and click Add to Kit.

Then, select the kit from the list and click Publish.

Repeat these steps to add additional fonts to the kit.

Custom SVG Icon Sets

Oxygen includes 500 icons from FontAwesome and Linearicons.
More icons can be added to Oxygen by importing them from an SVG icon set exported by IcoMoon. Please note that you must include the SVG titles for the icon set to work correctly in Oxygen - see Step 3 below.
Creating a set with IcoMoon

Visit IcoMoon.io and click IcoMoon App at the top right. You are redirected to the web app.
Choose the icons to add to your icon set. You can upload your own icons by clicking Import Icons in the top bar.
Once you have finished, click Generate SVG & More, click Preferences at the top and select "Add