Oftentimes, I find myself going back to older Posts/Pages and hunting down a specific block (created using GenerateBlocks) I used previously, just so I wouldn’t have to spend time recreating it.
Initially, I tried the native Reusable Block option to manage my collection of blocks. Then I tried using the GenerateBlocks’ Pattern Library (previously known as Local Templates) option to manage the blocks.
While these options worked as intended, with frequent changes to the Blocks (i.e. spacing on mobile view, colours, borders, etc) I had to keep removing and adding the new reusable locks. Needless to say, it was becoming too much of a nuisance to manage.
As a temporary solution, I ended up creating a Page where I stored and managed all the pre-built blocks. The page was left as a draft, so no one had access to it.
Anytime I needed a block I would head over to that page, Copy the block I wanted and Paste it into the new page.
All of my custom-built blocks were on one page and I could make quick adjustments to the blocks without having to remove the old block and adding the new one to the Reusable Block option.
It was a simple solution that served me well.
— Sometime Later —
I published an article called Closer Look at GenerateBlocks, which showcased the capabilities of the plugin. Not long after I started receiving inquiries on whether I would publish the pre-built blocks that I showcased on the page.
My response – Absolutely!
It would be awesome to see other people in the GeneratePress + GenerateBlocks community put these blocks to good use.
It was just a matter of figuring out the best method for making it available to be downloaded.
View Creator Blocks
A free collection of pre-built WordPress blocks created exclusively for GenerateBlocks.
Exploring Options for Publishing Reusable Blocks.
There were few options available and it was just a matter of figuring out the best option for providing access to the pre-built blocks.
Option 1
Use Default Reusable Blocks
I could make the pre-built blocks into Reusable Blocks, then Export as JSON file. I could then make the file available for download.
Possible Issues
1
Maintaining Changes
If I make any minor changes, now I have to maintain a changelog with version control. This might be time-consuming.
2
Managing Blocks
Do people want all the blocks I built? Maybe they just want a few and don’t want to manage 30 or 40 re-usable blocks.
Option 2
Local Templates by GenerateBlocks
Alternatively, I could use the Local Templates feature within GenerateBlocks to save the blocks. Then use the Export function to produce a downloadable file.
Possible Issues
1
Maintaining Changes
Again, if I make changes then have to maintain some form of a changelog with version control. Something I was trying to avoid.
2
Preview Mode
On Preview Mode, you cannot see what each pre-built block looks like unless an image of the block (low-res JPG) was added to it. This isn’t practical considering if changes are made, the preview image needs to be constantly updated.
Option 3
Direct Copy & Paste
This is identical to my current process, where I hunt down the block I want to use, then Copy and Paste it into the new page.
GenerateBlocks is an extension of WordPress Blocks and allows for Copying and Pasting on another site. It’s simple and easy to maintain if adjustments are made.
Challenge
How To Implement Option 3?
I found an approach that could work. Now, how on earth do I implement it?
Visitors will not have access to the backend editor which makes it easy to copy and paste. So, I have to find a way to allow copying of a block from a published page.
Step 1
Copy The Code From The Blocks
When you click on the Copy function on a Block, it’s actually copying the code for the block. And when you Paste, WordPress is converting the code back into a visual block. Unless you paste it as a text or into a Code Block, you won’t actually see the code.
Here’s an example of what the code looks like when you Copy a GenerateBlocks’s block:
<!-- wp:generateblocks/container {"uniqueId":"e037e245","containerWidth":1312,"paddingTop":"120","paddingRight":"20","paddingBottom":"80","paddingLeft":"20","paddingRightTablet":"40","paddingLeftTablet":"40","paddingRightMobile":"10","paddingLeftMobile":"10","borderRadiusTopRight":"3","borderRadiusBottomRight":"3","borderRadiusBottomLeft":"3","borderRadiusTopLeft":"3","backgroundColor":"#f7f7f7","gradientDirection":170,"gradientColorOne":"#f7f8f9","gradientColorOneOpacity":1,"gradientColorStopOne":50,"gradientColorTwo":"#ffffff","gradientColorTwoOpacity":1,"gradientColorStopTwo":50,"align":"full","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/grid {"uniqueId":"e7c03b47","columns":2,"horizontalGap":140,"verticalGapTablet":30,"verticalGapMobile":10,"horizontalAlignmentTablet":"center","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"72cac129","isGrid":true,"gridId":"316face0","width":50,"widthTablet":100,"widthMobile":100,"orderTablet":1,"orderMobile":1,"paddingBottomTablet":"10","paddingRightMobile":"0","paddingLeftMobile":"0","gradientDirection":270,"gradientColorOne":"#ffffff","gradientColorOneOpacity":0,"gradientColorStopOne":40,"gradientColorTwo":"#f7f7f7","gradientColorTwoOpacity":1,"gradientColorStopTwo":40,"verticalAlignment":"center","innerZindex":1,"isDynamic":true,"blockVersion":2} -->
<!-- wp:image {"align":"center","id":10197,"sizeSlug":"full","linkDestination":"custom"} -->
<div class="wp-block-image"><figure class="aligncenter size-full"><img src="https://skool.house/wp-content/uploads/Mae-Wu-Cherry-unsplash.jpg" alt="" class="wp-image-10197"/></figure></div>
<!-- /wp:image -->
<!-- /wp:generateblocks/container -->
<!-- wp:generateblocks/container {"uniqueId":"37e37825","isGrid":true,"gridId":"316face0","width":50,"widthTablet":100,"widthMobile":100,"orderTablet":2,"orderMobile":2,"paddingTopTablet":"0","paddingRightTablet":"80","paddingBottomTablet":"40","paddingLeftTablet":"80","paddingRightMobile":"10","paddingLeftMobile":"10","verticalAlignment":"center","removeVerticalGapTablet":true,"removeVerticalGapMobile":true,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"39ddb05c","element":"h1","textColor":"","fontWeight":"600","fontSizeMobile":40,"lineHeight":1.3,"letterSpacing":-0.025,"marginBottom":"30","marginBottomMobile":"20"} -->
<h1 class="gb-headline gb-headline-39ddb05c gb-headline-text">Oh So Delicious!</h1>
<!-- /wp:generateblocks/headline -->
<!-- wp:paragraph -->
<p>Nullam turpis tempus fringilla pulvinar adipiscing tempor odio auctor, litora parturient vivamus fusce non quisque lacinia fermentum class, vel per eget convallis nulla bibendum integer. </p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Eget curae accumsan velit massa purus ridiculus urna at, risus aptent est cras facilisis primis finibus dictum nam, quis mi proin conubia dolor placerat mus.</p>
<!-- /wp:paragraph -->
<!-- wp:generateblocks/headline {"uniqueId":"3130ca0e","element":"p","linkColor":"#999","linkColorHover":"#46c0a8","className":"loud-link"} -->
<p class="gb-headline gb-headline-3130ca0e gb-headline-text loud-link"><a href="#">View Page</a></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->
<!-- /wp:generateblocks/container -->You can take this code and paste it into a WordPress site with the GenerateBlocks plugin installed, and the code will be converted into a visual block.
While it works, it’s not the ideal solution for two reasons:
1
Not Easy to Copy The Entire Code
Realistically, would someone want to manually highlight the codes that extend beyond the full screen? It would be more beneficial to have a button that allows Copy to Clipboard.
2
Visual Distraction
Is there a way to hide the code and still display the block? The code takes up the entire screen and it is visually distracting.
Step 2
Introduce Copy to Clipboard Button
While there are a few plugins which allow you to copy anything on the clipboard, I try and avoid installing additional plugins as they tend to add bloat to the website.
In this case, I was a bit lucky because I was already using Prism JS for Syntax Highlighting and it already came with a built-in Copy to Clipboard function.
Recommended
If you want Prism JS up and running on your website, Start Blogging 101 provides a great step-by-step tutorial on implementing Prism JS.
Prism JS comes with a Copy button on the top right corner, which copies over any text within the Code block.
See the sample below.
.author-description {
margin-bottom: 1em;
margin-left: 4.6em;
color: #777;
}Now, I can Paste the code from the block I copied and allow anyone to copy the code with a click of a button.
Step 3
Button Styling & Hiding Code Block
The original Copy to the Clipboard button was a bit small, so I added some CSS styling to make the button appear larger so it would be easy to spot.
Next, the Code Block itself was visually distracting. Again, using CSS I hid the Code Block while maintaining the Copy Button.
By using adding a new Hook in Elements from GeneratePress, I was able to apply the CSS to a specific page without affecting the rest of the site.
See below for the specific CSS used to stylize the button and hide the Code Block.
<style>
.code[class*=language-], pre[class*=language-] {
display: none;
}
div.code-toolbar>.toolbar {
top: 0 !important;
right: 0 !important;
}
div.code-toolbar>.toolbar>.toolbar-item>button {
font-size: 0.9em;
padding: 0.6em 2em;
-webkit-border-radius: 3em;
-moz-border-radius: 3em;
border-radius: 3em;
}
@media (max-width: 425px) {
div.code-toolbar>.toolbar {
font-size: 0.8em;
}
}
</style>Step 4
Adjust The Appearance On Block Editor
While the published page looked much more presentable, the back-end Block Editor looked like a mess! The Code Block was taking up the entire screen on the Block Editor.
Using editor-style.css, I was able to change the appearance of the Block Editor. I included CSS styling to set the height of Code Block to 100px so it doesn’t take up the entire screen.
Ideally, I didn’t want to limit the height of the Code Block on all the pages, just for this specific page only. I reached out to the GeneratePress Support team and they helped me implement it.
4A
Adjust for Mobile View
I added the following CSS code within the same Element as Step 3. This will bring the Copy button in alignment in mobile view.
<style>
@media (max-width: 767px) {
div.code-toolbar>.toolbar {
top: -42px !important;
}
}
</style>4B
Introduce New Style Sheet
To adjust the height of the screen size in the Editor, I had to introduce a new style sheet called editor-style.css. Then I added the following CSS code and uploaded it into my Child Theme folder.
.editor-styles-wrapper .block-editor-block-list__layout pre {
max-height: 100px;
}4C
Update Functions PHP File
Lastly, I wanted the new editor-style.css to be only applied to specific pages, so I added the following code to functions.php file.
add_action( 'enqueue_block_editor_assets', function() {
if(get_the_ID() == 13508 || get_the_ID() == 13276){
wp_enqueue_style( 'my-block-editor-styles', get_stylesheet_directory_uri() . "/editor-style.css", false,'1.0', 'all' );
}
} );Big thanks to GeneratePress Support Team!
I was having a difficult time with Step 4C which allows you to target specific pages. For some reason, the code provided by Fernando (GeneratePress Support) to target a specific page didn’t work and neither did any following solutions.
At one point, I just gave up and was willing to settle that the CSS code to limit the height would apply to the entire site.
Fernando on the other hand kept offering new solutions even after I admitted defeat. Talk about persistence! This motivated me to keep looking for a solution and I did eventually find one that worked.
Conclusion
Having worked with WordPress for so long, one thing that I’m constantly reminded of is that with every solution there’s a new problem. It takes a lot of patience and persistence to work with it. Be patient, and be persistent.
What I implemented above is not an elegant solution, but for a simple blog like this, it works well and serves its purpose.
If you are looking to build something similar or curious about how I implemented some of the functions, I hope this post has been helpful to you.
