Gutenberg Wide Alignments for Post Templates in Oxygen

le 26/10/2021
JAG

When using Gutenberg for writing posts on Oxygen sites, some of the features such as wide alignments for blocks aren’t activated by default. They need to be turned-on at a theme-level. As themeless Oxygen users, we can activate them and add some styling to fit our single post templates.
Activating the Wide Alignments
The code to add the functionality for wide alignments inside the editor is the following;
add_theme_support( 'align-wide' );
We can either add using code snippets plugin or inside our custom plugin, it doesn’t matter.
Once added, there will be two new alignments for blocks found inside the post editor. Named ‘wide width’ and ‘full width’. Wide width shown below, full width spans the whole viewport.

Styling Our new Alignments
The wide alignments will work out of the box while viewing the post inside the editor, but they won’t yet be doing anything on the front end.
We can add some styles to our Oxygen site to make the alignments work well with our post layouts.
The CSS needed will depend on our post template, but we’ll look at two main types of post layouts where these new alignments seem to make the most sense. Boxed and full width (without sidebar).
Oxygen Single Post Template
For a basic single post template in Oxygen, the structure will look like something like this;

The article header (title, post meta) can be created with Oxygen elements pulling in the dynamic data. The post content is an inner content component, which pulls in the blocks from Gutenberg.
Full width Template
With a full-width layout type, the post content has no border and looks similar to how the post looks inside the editor.

For this layout, the inner content would be inside a section, with a custom container width ensuring there aren’t too many words per line (700px shown). We want the wide blocks to break-out of that 700px container using negative margins & increasing max-widths.
Here is the CSS to add to our stylesheet in Oxygen for this layout type;
@media screen and (min-width: 992px) {

.single-post .ct-inner-content .alignfull {
margin-left : calc( -50vw + 50% );
margin-right : calc( -50vw + 50% );
max-width : 100vw;
}

.single-post .ct-inner-content .alignwide {
margin-left : -100px;
margin-right : -100px;
max-width : 900px;
}

}
Notice we’re using a min-width media query to ensure the smaller screen sizes aren’t affected.
Top & bottom margins can also be added to give these larger elements more breathing room away from the text content. This will be depending on our typography styles. For a guide, 2em or 3em could be used. (using em so the margin is automatically reduced if the font size is reduced)
Boxed Template
With a boxed template, the post content has an edge, usually either a border or box-shadow separating it from the rest of the site. The section will have a wider width to allow for the content padding (giving us the same words-per-line as before)

For this type of layout, align-full doesn’t make sense to use as it would look awkward, but align-wide can be used to span the entire width of the container. This is common on food blogs, for example, where the focus is the images.
Unfortunately, there isn’t a way yet to only activate just the wide alignments and not the full, so to make sure content editors don’t break the boxed layout we can just apply the same styles to both.
The important thing here is to make sure the negative margins are the same as the container padding & the max-width equals the container width.
eg if our post content section width was set at 840px and it had 70px padding around the content (giving us the same 700px text width as before), this would be the CSS needed to apply the wide alignments;
@media screen and (min-width: 992px) {

.single-post .ct-inner-content .alignfull,
.single-post .ct-inner-content .alignwide {
margin-left : -70px;
margin-right : -70px;
max-width : 840px;
}

}
Again, adding margin-top & margin-bottom would be useful to add more space, depending on the typography of the site.
Updating Images Sizes
As there will be now be larger images inside our posts, we then need to change our default image sizes in our media settings to ensure the correct widths are being used. Then regenerate thumbnails to prevent existing images to be blurry or stretched if working with existing content.
All done.
Now on the front end, we have our alignments working as expected and content editors get to use some of the new WP functionality for displaying their content in more dynamic ways.

Nos experts se tiennent à votre disposition
pour répondre à vos questions et vous conseiller
dans votre projet digital.

Vous souhaitez développer une application ?

Envie d’échanger avec l’un de nos experts ? Besoin d’en savoir plus ?
En savoir plus

Recevez notre newsletter

La protection des données nous tient à cœur. JAG utilise les informations que vous fournissez afin de vous proposer des informations et du contenu pertinent sur nos produits et services. Vous pouvez vous désinscrire de ce type de communications à tout moment. Pour plus d'informations, consultez notre politique de confidentialité
© 2022 JAG Consulting, sas. Tous droits réservés.
© 2022 JAG Consulting, sas. Tous droits réservés.
4.8
Lire les 51 avis
google
Brieuc Pauly
08/09/2022

Créative, dynamique et très professionnelle, c'est à mon sens les piliers qui soutiennent cette équipe talentueuse ! Une agence à taille humaine qui privilégie la qualité et le résultat. Alors si vous souhaitez le meilleur pour votre communication adressez vous les yeux fermés à ces passionnés, plus que compétents ! (Translated by Google) Creative, dynamic and very professional, these are in my opinion the pillars that support this talented team! A human-sized agency that favors quality and results. So if you want the best for your communication, turn your eyes closed to these enthusiasts, who are more than competent!

google
Amaury Tardier
08/09/2022

Merci à Julien et son équipe, plus que satisfait par le travail fourni ! Je recommande vivement ! (Translated by Google) Thanks to Julien and his team, more than satisfied with the work provided! I highly recommend !

Ravi de travailler avec l'équipe JAG pour la gestion de mon site de e-Commerce. Equipe réactive et toujours pleine de bonnes idées pour améliorer les performances du site (Translated by Google) Glad to work with the JAG team for the management of my e-Commerce site. Responsive team always full of good ideas to improve the performance of the site

Merci à Julien pour son accompagnement dans mon projet, je recommande à 200% c est le Top (Translated by Google) Thanks to Julien for his support in my project, I recommend 200% it is the top

Excellente agence. Equipe est très pro, à l'écoute et de bon conseils. (Translated by Google) Excellent agency. The team is very professional, attentive and gives good advice.

Temps de réponse hors pair quand il y a eu un pb sur mon site, je vous recommande chaleureusement Julien :-) (Translated by Google) Unparalleled response time when there was a problem on my site, I warmly recommend Julien :-)

Charger plus
listarrow-right
Julien

Julien

Votre conseiller

I will be back soon

Une question ?

Julien
Bonjour ! Je suis Julien.
Comment puis-je vous aider?
Démarrer la conversation:
chat Live Chat