Introduction

Oxygen is an extremely powerful page builder that has no equal when it comes to customization and speed. Version 3.5 introduced the ability to apply data-attributes to elements, making it finally possible to use spx in it's full glory. The following guide is referring to spx 2.0+.

There are two possible ways to use spx with Oxygen:

• wrapper element
• code blocks

Which way you want to go totally depends on your use case. For many, using the wrapper element is a completely fine and viable option.

Element

The wrapper element can be found in the component section of Oxygen. It is located right next to the code block:

Technically, it is very similar to any of the other elements that Oxygen offers, with one little twist. It can become any of the spx components.

The decision to integrate all components as one element was made to speed up the development process of the plugin, as every new element, property or feature is immediately available to be used inside Oxygen.

To put it into relation, before 2.0, every new detail of the plugin had to be duplicated for usage within Oxygen, making development stale and opposite to the versatile nature of web components.

Attributes

Controlling the components is done by using the attribute textarea. In spx, attributes are used to apply different settings to components, similarly to how it would be done outside of Oxygen.

The component will update with the new settings once the "Apply Params" button at the bottom of the panel has been pressed.

A full list of available properties, slots and methods for each component can be found in the documentation.

Slots

Sometimes, more control is needed to really make some of the components work for you. Slots are useful in that regard, as they allow you to replace some of the standard behaviour with different markup. Let's replace the header of the accordion component with something more customised using the slot attribute like so:

This will give the heading element a slot attribute, instructing it to replace the default header text.

Code Block

Since all spx elements are just Web Components, they can be used in any environment where HTML is allowed. Since Oxygens Code Block also allows for PHP to be used, it is possible to make use of some of the PHP helpers that spx provides.

Usage

Code blocks are very comparable to writing code in themes, as there are no helpers on the way. This has the advantage that it is possible to just copy and paste code and see some instant results.

For example, let's copy this code from the playground:

Pasted into Oxygens code block it looks like this:

Pretty neat, right? Of course this example is only scratching the possibilities of the code block. All spx components can be used within loops and queries without any problems, making them a perfect solution for more complex tasks.

FAQ

Let's create an FAQ section using the accordion component and ACF repeater functionality.

For this example, we are filling the fields with some dummy data like so:

To get all of the entries, we are also going to use the repeater element inside Oxygen, which is able to query the ACF fields.

Instead of using the standard accordion header, we are going to insert data from the question field of the ACF repeater.

Again, this is done by applying a slot attribute with the value header to the heading element.

The same procedure has to be repeated for the content, this time applying the content attribute to the slot attribute.

Et voila, the final product will look like that: