Mohammad Ibrahim Jaber

Scope (How the Integration Came to be)

I have recently migrated all my posts from DIVI builder to Gutenberg and plan to use it going forward. Recently diving into Oxygen Builder I found some mismatches in the CSS and they were bugging me a lot. Being a curious new player in the field I wanted to fix it.

• Scope (How the Integration Came to be)
• Version History
• Version 1 - NOV 2019
• Version 2 - 10 FEB 2020
• Installation - Oxygen Template System
• Steps
• Codes
• PHP & HTML
• CSS

Version History

Version 1 - NOV 2019

The first set of integration work is live and is working flawlessly with few errors. Almost all the blocks were working correctly except the Embed of Facebook & Audio.

Version 2 - 10 FEB 2020

Updated it too look better on some cases.
Fixed Bug: Caption links and caption texts on images

Installation - Oxygen Template System

The Installation of this integration is fairly easy. One of the greatest feature in oxygen comes to play regarding this, Inner Content. Inner Content out of the box does not do anything but the mixing of code levels it up.

Steps

1. Create New Template - No Design Inherits & in the others section toggle Inner Content. What this will do is capture everything that is passes the inner content but is not built with Oxygen Builder itself. Example if a page is made with Gutenberg only that will pass through this template nothing else.
2. Go to Templates and Navigate to your Blog Post Template (Single Blog Post). Open the template in Oxygen.
3. Once the Oxygen builder opens, click add and then add a section. Inside the section place a inner content element. This is the default system meant for Oxygen to work correctly. you should already have the inner content template. On the same section follow step 4.
4. Add a Code Block Element to the section below inner content. Add the below codes to the code block respectively to get them working.

Codes

PHP & HTML

<?php
add_theme_support( 'responsive-embeds' );
add_theme_support( 'customize-selective-refresh-widgets' );
add_theme_support( 'wp-block-styles' );
add_theme_support( 'align-wide' );
add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' );
?>

CSS

.wp-block-preformatted {
display: block;
  font-family: Menlo, Consolas, monaco, monospace;
  white-space: pre-wrap;
  word-wrap: break-word;
  text-align: justify;
  margin: 1em 0;}

    
.wp-block-code {
	font-family: Menlo, Consolas, monaco, monospace;
	font-size: 14px;
	color: #23282d;
	padding: 0.8em 1em;
	border: 1px solid #e2e4e7;
	border-radius: 4px;
 	white-space: pre-wrap;
}

.wp-block-audio{
color: #23282d;
	font-size: $default-font-size;
  text-align: center;}

pre.wp-block-verse {
  white-space: pre-wrap;
}

.wp-block-image figcaption {
  overflow-wrap: break-word;
  text-align: center;
  font-size: x-small;
}

The above should work for all Oxygen versions.

Ads Temporarily Disabled