The new favorite thing called
patterns
The wordPress community seems to have a new favorite thing called patterns.
Also, we at larslo make use of them a lot. Let me explain why.
The pros of patterns
- you don’t need even more blocks
- can be completely self-contained, and be integrated into any WordPress without any coding
- can contain inline instructions
- can be used for sections or whole pages/posts
- can also contain PHP
I would like to explain a bit more about, what I call ‘self-contained patterns‘.
Self Contained Patterns
By simply applying some additional classes to a combination of core blocks, we are able to produce a wide range of page layouts or special sections.
Let me demonstrate that with the following ‘ticker-like headline‘.
These special headings are available as a pattern on this WordPress system.
These scroll-moving, ticker-like headlines can work as section separators. These scroll-moving, ticker-like headlines can work as section separators. These scroll-moving, ticker-like headlines can work as section separators.
Heading 2 – moves left – repeat yourself if its too short. Repeat yourself if too short – Heading 2 – moves left – repeat yourself if its too short. Repeat yourself if too short
Inlined Instructions in ticker-like headline pattern
Besides the headings themselves, the pattern contains also some instructions, useful for first-time usage or when you forget about the details later.
Text of following headlines will move similar to a ticker based on scrolling.
1. First heading moves text left
2. Second moves text right
(and so on)
Duplicate the Headings to repeat the effect.
Make sure that the page is long enough to be scroll-able.
The position on the page is relevant. When having it later / more at the bottom, headlines need to be longer (repeat the text) in order to fill the whole width.
The instructions will be removed then by simply deleting one or two paragraph blocks.
Patterns with inline styles and script
Patterns also can contain their own style or script. This can be done by simply appending a html block, like so:
<!-- wp:html -->
add <script> or <style> here
<!-- /wp:html -->For example the ticker-like headlines we speak about here, contains the following:
<style>
.wp-block-post-content .yours59__text-as-page-sep_wrapper {
/* --- edit this --- to change the 'speed' */
--sideroll-speed: .5;
--sideroll-speed-mobile: 6;
position: relative;
max-width: var(--100vw, 100vw);
}
.wp-block-post-content .yours59__text-as-page-sep_wrapper .yours59__text-as-page-sep {
white-space: nowrap;
will-change: transform;
transform-style: preserve-3d;
transform: translate3d(calc(var(--scroll, .5) * var(--sideroll-speed, 1) * -100%),0,0);
}
.wp-block-post-content .yours59__text-as-page-sep_wrapper .yours59__text-as-page-sep:nth-of-type(2n){
top:calc(50px + var(--size,1rem)) !important;
transform: translate3d(calc( 10% - (var(--scroll, .5) * var(--sideroll-speed, 1) * -100%)),0,0);
text-align: center;
direction: rtl;
right:0 !important;
}
@media screen and (max-width:768px) {
.wp-block-post-content .yours59__text-as-page-sep_wrapper .yours59__text-as-page-sep {
transform: translate3d(calc(var(--scroll, .5) * var(--sideroll-speed-mobile, 1) * -100%),0,0);
}
}
</style>Even if that is not the most elegant way (the html-block will be shown in editor), I think its quite lean for having such a effect like these tickers-like headlines. And it should integrate into almost any website with much struggle or running any deployment processes.
By the way, the CSS above makes use of the CSS Custom Property (CSSCP) var(--scroll,.5). Without that the headings are not moving at all. Add the following one-liner somewhere in your JavaScript for adding the --scroll CSSCP.
window.addEventListener('scroll', function(){
document.body.style.setProperty('--scroll', window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
}, false);