How To Change the Content Width of the Gutenberg Editor

The new Block Editor (Gutenberg) gives us a more visual editing experience, but out-of-the-box it doesn’t (yet) give us full parity with the frontend.

We can do a few things to reduce this gap though and one of them is having the Block Editor’s content width match our theme content width.

For example, I’m working on a site right now where the content width is 720px and my “wide” content is 1280px. I’d like this to be the same in the editor so that when I’m creating content it better matches what I’m going to see on the frontend. Left to its defaults, the editor gives us 580px and 1080px.

The good news, it’s easy to change.

Here’s how…

We’re going to do 2 things:

  • Create a new CSS file
  • Add a snippet of code in our theme’s functions.php file to enqueue this new CSS file

The WordPress developer docs over on WordPress.org give good direction for what we’re doing now.

Let’s create the CSS file and call it style-editor.css and add it to the top level folder of our theme. To set our custom content widths we’re going to work with a couple of the available editor classes. The CSS we’re adding to style-editor.css looks like:

/* 
 * Main column width
 * This changes it from the default 580px to 720px
 */
.wp-block {
    max-width: 720px;
}

/* 
 * Width of "wide" blocks
 * This changes it from the default 1080px to 1280px
 */
.wp-block[data-align="wide"] {
    max-width: 1280px;
}

These changes now reflect the relevant widths of our theme on the frontend.

Now we need to make WordPress load this new stylesheet in the backend when the Block Editor is going.

To do this, add this to your theme’s functions.php file

function mytheme_add_editor_styles() {
    add_editor_style( 'style-editor.css' );
}
add_action( 'admin_init', 'mytheme_add_editor_styles' );

You’ll swap out mytheme with your own theme’s prefix.

Too easy hey!

I hope this helps you out. Any questions or comments, throw em in the comments below.

Happy block building. 😊

In the Lab: A Custom Post Grid block using WP_Query

Welcome back to the Lab.

We’ve seen a bunch of people build some great custom blocks using WP_Query, and a bunch more ask how it can be done. So in this tutorial we’re going to show you. 🙂

WP_Query is a WordPress class that provides numerous functions for common tasks within The Loop. A simple use case is wanting to display related posts on a single post page. In a page template, or in our case in a block, you can use WP_Query to loop through posts according to set properties such as the shared category with the single post.

If that’s still not 100% clear for you, check out the offical docs. Also, this tutorial should help show you how it all fits together.

So the custom block we’re building to today is going to be a simple Posts Grid block that lets you:

  • Select the post-type to display
  • Set the number of posts to display

When done, it’s going to look like this.

Custom Post Grid Block for WordPress Gutenberg How To Tutorial
Our Custom Post Grid Block

Let’s do this!

So our local setup for building the block looks like:

  • Theme: Atomic Blocks Child Theme
  • Plugins: Block Lab

In previous tutorials, our block fields have corresponded with individual content pieces, images, or style customisations in the block. For this block, we’re actually going to use the block fields to set the properties for our query. Now there are dozens or properties that can be passed to WP_Query. It’s worth looking over the documentation to see what is possible.

As mentioned further up, our block fields are:

Field LabelField SlugField TypeField Location
Number of Postsnumber-of-postsRangeEditor
Post Typepost-typeSelectEditor

So in our WordPress Admin and with the Block Lab plugin active, we go to Block Lab > New Block.

Give our new block the title of Post Grid and configure the block properties. This is what we have:

Custom Post Grid Block - Block Properties
Custom Block Properties

Now let’s add all our fields as per our table above:

Custom Post Grid Block - Fields

For the Select field, we set our choices as:

Custom Post Grid Block - Select Field Choices

Hit Publish.

You’ll notice that when you hit publish that at the top of the page a prompt appears telling us that our next step is to create a PHP template file and gives us the file name and path for this.

Custom Post Grid Block - Template Prompt
Custom Block Template Prompt

So let’s open up our text editor and create the file. In our child theme, in the top level folder, we’re going to add a new folder called blocks. In this folder we’re going to create a file called (as per the prompt above) block-post-grid.php.

We’re also going to create a CSS file where we are going to add our CSS code for styling the block. This file will be named exactly the same as the main PHP file except the file extension will be .css instead of .php. The Block Lab plugin auto-magically pairs these two files together. So for our block it will be block-post-grid.css.

With these files saved, we can go back to our Block Editor in WordPress, hit refresh, and we’ll see that our new template file is being picked up now as the prompt has disappeared and now instead shows the template file path.

Custom Post Grid Block - Title

Great! Our template file is added. Now let’s build it out.

In our PHP template file lets set up our WP_Query Loop. Our code will look like this:

<div class="block-post-grid <?php block_field( 'className') ?>">
    
    <?php
    // Variables
    $post_count = block_value( 'number-of-posts' );
    $post_type  = block_value( 'post-type' );

    // WP_Query arguments
    $args = array(
        'post_type'         => array( $post_type ),
        'posts_per_page'    => $post_count,
    );

    // The Query
    $post_grid_query = new WP_Query( $args );

    // The Loop
    while ( $post_grid_query->have_posts() ) {
        $post_grid_query->the_post();
        
    }

    // Restore original Post Data
    wp_reset_postdata();
    ?>

</div>

The things to note here are:

  • We’ve wrapped everything in a <div> and given it a CSS class of block-post-grid as well as using the reserved className to add the Additional Class
  • We’ve set up a few variables by using the Block Lab block_value function and interacting with our 2 block fields
  • We’ve defined the arguments (properties) that we want to pass to WP_Query using these variables
  • We’ve started the Query
  • We’ve started the Loop
  • We’ve reset the postdata

It’s important that we reset the post data as this custom block can be dropped in on any page or post and that the rest of the post/page content will need to continue being “looped” through after this block.

Now let’s fill out the content of our Loop. This is what will be rendered each time the Loop runs.

Our Loop code looks like this:

<div class="block-post-grid--post">
    <div class="block-post-grid--post-thumbnail" style="background-image: url('<?php the_post_thumbnail_url( 'large' ); ?>');">
    </div>
    <div class="block-post-grid--post-content">
        <h4><?php the_title(); ?></h4>
        <p><?php the_excerpt(); ?></p>
        <a href="<?php the_permalink(); ?>" >Read More</a>
    </div>
</div>

Note that:

  • We’re got a few new CSS classes now that handle styling for each individual post
  • We’ve got the post thumbnail (feature image) at the top, which we’ve set as a background image on a div
  • As we’re in the Loop now, we can access the post title, excerpt, and post link (permalink) nice and easily

So with all our code together, our PHP template file looks like this:

<div class="block-post-grid <?php block_field( 'className') ?>">
    
    <?php
    // Variables
    $post_count = block_value( 'number-of-posts' );
    $post_type  = block_value( 'post-type' );

    // WP_Query arguments
    $args = array(
        'post_type'      => array( $post_type ),
        'posts_per_page' => $post_count,
    );

    // The Query
    $post_grid_query = new WP_Query( $args );

    // The Loop
    while ( $post_grid_query->have_posts() ) {
        $post_grid_query->the_post();
        ?>

        <div class="block-post-grid--post">
            <div class="block-post-grid--post-thumbnail" style="background-image: url('<?php the_post_thumbnail_url( 'large' ); ?>');">
            </div>
            <div class="block-post-grid--post-content">
                <h4><?php the_title(); ?></h4>
                <p><?php the_excerpt(); ?></p>
                <a href="<?php the_permalink(); ?>">Read More</a>
            </div>
        </div>

        <?php
    }

    // Restore original Post Data
    wp_reset_postdata();
    ?>

</div>

So that’s it for our HTML and PHP. This is now a functional block, but now we need to make it look nice. Over in our CSS template file (block-post-grid.css), let’s add the following CSS.

.block-post-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 80px;
}

.block-post-grid--post {
    border-bottom: 1px solid #f4f4f4;
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.block-post-grid--post-thumbnail {
    height: 240px;
    background-size: cover;
    background-position: center;
}

.block-post-grid--post-content {
    padding: 30px 40px 0 40px;
    margin: -40px 40px 0 40px;
    background-color: #fff;
}

.block-post-grid--post-content h4 {
    text-decoration: none;
    font-family: sans-serif;
    color: #2C2936;
}

.block-post-grid--post-content p {
    font-family: sans-serif;
    font-size: 16px;
    margin-left: 20px;
    color: #67607D;
}

.block-post-grid--post-content a {
    position: relative;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #5C34E8;
    margin-left: 20px;
}

.block-post-grid--post-content a:after {
    display: block;
    position: absolute;
    content: "";
    border-top: 3px solid #5C34E8;
    border-right: 3px solid #5C34E8;
    border-top-right-radius: 3px;
    width: 8px;
    height: 8px;
    transform: rotate( 45deg );
    top: 4px;
    right: -20px;
    transition-duration: 0.1s;
}

.block-post-grid--post-content a:hover:after {
    right: -26px;
}

@media (max-width: 720px) {
    .block-post-grid {
        grid-template-columns: 1fr;
    }
}

So what’s going on here?

  • We’re using CSS Grid to handle our columns.
  • We’ve set a fixed height for our Thumbnail div. This means that no matter the actual size of the post thumbnail (feature image), it will display at the same height.
  • We’ve used some padding and a bit of negative margin on our post content to get our overlapped effect with the thumbnail image.
  • Some styling on paragraph and anchors
  • We’ve used the pseudo class :after on our anchor to give us our little arrow
  • We’ve used the pseudo class :hover on our anchor to give us the hover effect on the arrow
  • We’ve used a media query to set our grid to one column on smaller screens

And that is the final piece of this Post Grid puzzle. Let’s go create a new Page in WordPress, add our block, fill out the fields and see what it looks like.

In the editor, we can select and add the block to the page:

Custom Post Grid Block - Adding the Block
Adding our custom block to the page

Fill in the fields:

Custom Post Grid Block - Filling out the Fields
The fields in the Editor

And check it out:

Custom Post Grid Block - Finished block on the Frontend

Looking good!!!

So this block is a nice and easy example of how to use WP_Query. With all the power that WP_Query brings to the table, there are some pretty cool things you could build with it. If you build something yourself, share a link in the comments below. We’d love to check it out!

If you want to learn more, have a look at these previous tutorials:

Happy block building!

Introducing The Lab – a Slack community for WordPress themers

As Block Lab grows, we’re continually impressed by the huge variety in custom blocks that folk are building. It’s so cool to see people take interesting or complex ideas and turn them in to easy-to-use blocks for content creators.

But until now, there’s been no obvious place for Block Lab users to share more about what they’ve been creating.

That’s why we decided to make it easy for like-minded block builders to connect, share, and learn more about building Gutenberg-first themes.

Introducing: The Lab – a Slack community for Block Lab users and WordPress theme builders. The Lab is a place to discuss Gutenberg best practices, tips for building themes the “Gutenberg Way”, and of course using Block Lab to its full potential.

The Lab is also the place we discuss the future of Block Lab. You can hang out with the dev team in our weekly calls, and have your say while we discuss new features and ideas.

You can read more here, or join The Lab right now.

Can’t wait to meet you!

In the Lab: A Custom Notification Bar Block

Welcome back to the Lab.

For this tutorial we’re going to build a custom notification bar block. Perfect for when you need to drop a notification, notice, or super simple call-to-action on to a page or post.

It’s gonna look something like this:

The custom notification bar block with 3 different styles

Colours and background images will be customisable as well as the text and buttons.

So our local setup for building the block looks like this:

  • Theme: Atomic Blocks Child Theme
  • Plugins: Block Lab

That’s it. Nice and simple. Let’s do this!

First, we plan our block’s fields based on the design. Each field basically corresponds to a unique element in the block. So they are:

Field LabelField TypeField Location
MessageTextEditor
Button TextTextEditor
Button URLURLEditor
ColorColorInspector
Background ImageImageInspector

So in our WordPress Admin and with the Block Lab plugin active, we go to Block Lab > New Block.

Give our new block the title of Notification Bar and configure the block properties. This is what we have:

Custom Block Properties

Now let’s add all our fields as per our table above.

Custom Block Fields

Hit Publish.

You’ll notice that when you hit publish that at the top of the page a prompt appears telling us that our next step is to create a PHP template file and gives us the file name and path for this.

Block Template Prompt

So let’s open up our text editor of choice and create the file. In our child theme, in the top level folder, we’re going to add a new folder called blocks. In this folder we’re going to create a file called (as per the prompt above) block-notification-bar.php.

We’re also going to create a CSS file where we are going to add our CSS code for styling for the block. This file will be named exactly the same as the main PHP file except the file extension will be .css instead of .php. The Block Lab plugin auto-magically pairs these two files together.

With these files saved, we can go back to our Block Editor in WordPress, hit refresh, and we’ll see that our new template file is being picked up now as the prompt has disappeared and now shows the template file path.

Great, so our template file is all set up. Now let’s build it out.

In the PHP template file, let’s stub out our HTML and give the block a CSS class.

<div class="block-notification-bar" >
    <span></span>
    <a></a>
</div>

Next work with the PHP functions that Block Lab gives us for interacting with our custom block and its fields. The primary functions are:

  • block_value()
  • block_field()

block_value stores the data saved to the field. block_field echos the data out. For our block today, we only need to use block_field. So with these functions available to us, our template file looks like:

<div class="block-notification-bar" style="background-image: url('<?php esc_html( block_field( 'background-image' ) ); ?>'); background-color: <?php esc_html( block_field( 'color' ) ); ?>;">
    <span><?php esc_html( block_field( 'message' ) ); ?></span>
    <a style="color: <?php esc_html( block_field( 'color' ) ); ?>;" href="<?php esc_html( block_field( 'button-url' ) ); ?>"><?php esc_html( block_field( 'button-text' ) ); ?></a>
</div>

So what we’re doing here is 2 things. We’re using the block_field function to:

  1. add our content (message, button text, and button url) to their appropriate places in the HTML, and
  2. add inline CSS to handle our dynamic styling

Note that we are also sanitising our function outputs with esc_html. This follows WordPress coding best practices. You can learn more about that here.

For our CSS styling let’s jump over to our CSS template file. The CSS we’re adding looks like this:

.block-notification-bar {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 22px;
    font-size: 16px;
    line-height: 16px;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
    border-radius: 2px;
    font-family: sans-serif;
    background-size: cover;
    margin-bottom: 40px;
}
.block-notification-bar a {
    background-color: rgba(250,250,250,1);
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 12px;
    box-shadow: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    text-decoration: none;
    line-height: 12px;
}
.block-notification-bar a:hover {
    background-color: rgba(250,250,250,0.9);
}

Our CSS is fairly simple. The trickiest part is that we’re using Flexbox to position our content. Flexbox is new-ish to CSS and if you’ve not checked it out yet, I highly encourage you to.

And that is the final piece of this puzzle. Let’s go create a new Page in WordPress, add our block, fill out the fields and see what it looks like.

In the editor, we can select and add the block to the page:

Adding the Custom Block to the WordPress Editor

Fill in the fields:

The Block Fields in the Editor
The Block Fields in the Inspector

Preview in the editor:

The Custom Block in preview in the Editor

And check it out on the front end:

The Custom Block on the Front End

Sweet!

So to take this even further you could:

  • Conditionally display the button so you can add notifications that don’t require a user action.
  • Add a text color field so you can handle light background colors with better color contrast.
  • Remove the color/background fields and instead handle variations through fixed options with a select field (error, success, message, etc) and some clever conditional CSS classes in the template.

This was nice and easy, but certainly one that could prove to be pretty handy.

If you want to learn more, check out these previous tutorials:

Happy block building!

New Taxonomy Field for Block Lab Pro

Good news today for our Block Lab Pro Early Access Pass holders. You now have access to the Taxonomy field.

The Taxonomy field in the Block Builder

When adding this field to your blocks you can set it to either pull a list of categories or tags.

Selecting Categories or Tags

If you’re building a block that pulls in posts, e.g. a “check out these posts” block, then this field could prove really useful.

This rounds out the Object style fields nicely with the following all now available to Early Access Pass holders:

  • User Field
  • Posts Field
  • Taxonomy Field

Returning the object is now standard for all similar fields types and will be the approach taken moving forward.

Because of the improved UI, the User field is not backward-compatible. Please go to the block UI for every block that has a User field, and click “Update.” There’s no need to change anything on that screen, though.

Also, please select the user again from the user field in the block editor.

Any thoughts, questions, or ideas? Let us know in the comments.

P.s. Stay tuned as we’ll be announcing something pretty cool soon around community.

Backwards Compatability Break for the Image Field

Hi everyone,

If you’re using the image field in Block Lab, you should be aware of a minor backwards compatibility break in the latest plugin update.

The changes are related to when using the block_value() function with the image field. This function now returns an integer attachment ID. Previously it returned the attachment URL.

This breaking change will only occur if:

  1. You are using the image field in a block, and
  2. The template retrieves the image field’s value using the block_value() function or block_field() with the second argument of false, and
  3. The image field has been used in post content with an external URL (not a file hosted in your Media Library).

This change was made as it gives more versatility to what you can do when interacting with the field in your block templates.

The table below gives a good breakdown of how things work moving forward.

Function callExpected resultNotes
block_value( 'foo-valid-url' )returns attachment IDDifferent from before, used to return the URL
block_value( 'foo-invalid-url' )returns 0Also different from before. Returns 0 if the URL isn’t on the same site, or if it doesn’t match an existing attachment (image).
block_field( 'foo-valid-or-invalid-url' )echoes the string URLSimply echoes the string (no change from previous behavior)

When passing a second argument of false to block_field(), like block_field( ‘foo-field’, false), please see the “Function call” documentation above for block_value().

block_field( 'foo-url' ) will have the same result as before, even if it used to have an external URL.

If the URL was previously for an external image, not an image hosted in the Media Library, block_value( 'foo-url' ) will now return 0.

If you have any questions, please don’t hesitate to ask. Additionally, we encourage you to update the plugin on a testing environment or at least have a site backup ready to roll back to should you notice anything broken.

An even better block building experience with v1.2.2

Today we release version 1.2.2 of Block Lab.

This version introduces a bunch of user interface improvements that make it even easier to build blocks within the WordPress admin, particularly for those just getting started with Block Lab.

There are 3 general areas of improvement:

1. Block Properties in Sidebar

The block properties (slug, icon, categories, keywords) are now moved over to the sidebar rather than in the main content column. This simplifies the adding and configuring of fields, which is where you spend most of your time when building a new block.

2. Contextual Prompts

Prompts, “next steps”, and documentation links are displayed when building a new block to help guide you through the process. These only appear at relevant points of the process and disappear once you’ve moved on.

A prompt that includes a template file copy-paste feature. The prompt appears after you hit “Publish” or “Save Draft” and disappears once you create your template file.

3. Add Fields Panel

The “Add fields” panel has some improvements in how it positions rows when adding/moving between them. When you add or select a field row it now positions itself at the top of the panel. This saves you having to scroll to maximise your view of the field settings.

The overall impact of these changes is that the experience of adding, configuring, and publishing a new block is even more streamlined.

Have suggestions for how we can improve the experience even further? Comment on this post or join us over on Github.

In the Lab: A Custom eBook Download Block

Welcome back to the Lab.

For this tutorial we’re going to build a custom eBook download/call-to-action block. It will include a picture of our book, some text, and a button to download the book.

It’s gonna look something like this:

So our local setup for building the block looks like this:

  • Theme: Atomic Blocks Child Theme
  • Plugins: Block Lab

That’s it. Nice and simple. Let’s do this!

Looking at our design above we can figure out the block fields we’re going to need and where we want them to be. Each field basically corresponds to a unique element in the block. So they are:

Field LabelField TypeField Location
Book ImageImageEditor
PretextTextEditor
HeadingTextEditor
TextTextareaEditor
Button TextTextEditor
Button URLURLEditor
Accent ColorColorInspector

Most of these are pretty self-explanatory. The final field Accent Coloris something a little extra. In our design we have that bold blue, but we’re going to make that configurable (apart from the actual image of the book that is). We’re going to let the person adding the block choose an “accent” color that will be used for the button and the little pretext on the right.

So in our WordPress Admin and with the Block Lab plugin active, we go to Block Lab > New Block.

Give our new block a title and configure the basic block settings. This is what we have:

Now let’s add all our fields as per our table above.

Hit Publish.

You’ll notice that when you hit publish that over on the right a notification appears telling us that the plugin is looking for a template file. Currently it’s unable to find it and is letting us know.

So let’s open up our text editor of choice and create the file. In our child theme, in the top level folder, we’re going to add a new folder called blocks. In this folder we’re going to create a file called block-ebook-cta.php. Notice that the notification lets us know what the file needs to be called.

With this file saved we can go back to our Block Editor in WordPress, hit refresh, and we’ll see that our new template file is being picked up now.

Great, so our template file is all set up. Now let’s build it out.

Let’s first stub out our HTML and give the elements CSS classes.

<section class="alignwide block-ebook-cta">
    <div class="block-ebook-cta--wrapper">
        <div>
            <img class="block-ebook-cta--book-image" src="">
        </div>
        <div>
            <span class="block-ebook-cta--pretext"></span>
            <h2 class="block-ebook-cta--heading"></h2>
            <p class="block-ebook-cta--text"></p>
            <a class="block-ebook-cta--button" href=""></a>
        </div>
    </div>
</section>

Next let’s use the two PHP functions that Block Lab gives us for interacting with our custom block and its fields. These functions are:

  • block_value()
  • block_field()

block_value stores the data saved to the field. block_field echos the data out. So with these functions available to us, our template file looks like:

<section class="alignwide block-ebook-cta">
    <div class="block-ebook-cta--wrapper">
        <div>
            <img class="block-ebook-cta--book-image" src="<?php esc_html( block_field( 'book-image' ) ); ?>" alt="">
        </div>
        <div>
            <span class="block-ebook-cta--pretext"><?php esc_html( block_field( 'pretext' ) ); ?></span>
            <h2 class="block-ebook-cta--heading"><?php esc_html( block_field( 'heading' ) ); ?></h2>
            <p class="block-ebook-cta--text"><?php esc_html( block_field( 'text' ) ); ?></p>
            <a class="block-ebook-cta--button" href="<?php esc_html( block_field( 'button-url' ) ); ?>"><?php esc_html( block_field( 'button-text' ) ); ?></a>
        </div>
    </div>
</section>

Note that we are sanitising our function outputs with esc_html. This follows WordPress coding best practices. You can learn more about that here.

We can actually now use this block. If you create a new page or post in WordPress, you’ll be able to add this block. All the fields are there and the saved data is being output. It will look like this in the editor and the frontend:

Before we move on to styling, we’re going to create a variable that can store the accent-color. We can then interact with this variable when styling.

Our variable PHP looks like this:

<?php
$accent_color = block_value( 'accent-color' );
?>

Note that when we added the Accent Color field to the block in the Block Editor, we gave it a default color so that the variable will always have a saved value.

For our CSS styling we’re going use a new feature of Block Lab. In version 1.2.1 we introduced a better way to manage styling. In our blocks folder we’re going to add a CSS file called block-ebook-cta.css. The plugin will auto-magically pair this file with the PHP file of the same name.

So in this CSS file we’re going to add the following:

.block-ebook-cta {
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .block-ebook-cta--wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 40px;
    }
    .block-ebook-cta--wrapper>div:nth-child(1) {
        background-color: #f4f4f4;
        padding: 80px;
    }
    .block-ebook-cta--wrapper>div:nth-child(2) {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        max-width: 460px;
        padding: 40px;
    }
    .block-ebook-cta--book-image {
        /* border: 8px solid #fff; */
        max-width: 80%;
        margin: auto;
        /* margin-top: -40px;
        margin-bottom: -80px; */
        box-shadow: 1px 10px 40px 0px rgba(0,0,0,0.28);
    }
    .block-ebook-cta--pretext {
        text-transform: uppercase;
        font-size: 14px;
        line-height: 1em;
        letter-spacing: 1px;
        font-weight: 800;
        margin-bottom: 20px;
    }
    .block-ebook-cta--heading {
        font-weight: 800;
        margin-bottom: 40px;
    }
    .block-ebook-cta--text {
        font-size: 16px;
        margin-left: 20px;
    }
    .block-ebook-cta--button {
        display: inline-block;
        color: #fff;
        padding: 24px 24px;
        text-transform: uppercase;
        font-size: 12px;
        line-height: 1em;
        letter-spacing: 1px;
        font-weight: 800;
        margin-left: 20px;
        box-shadow: 1px 10px 40px 0px rgba(0,0,0,0.28);
    }
    .block-ebook-cta--button:hover {
        box-shadow: 1px 10px 40px 0px rgba(0,0,0,0.4);
        color: #fff;
    }

This gets us 99% of the way. The final piece of CSS is actually going to sit in the PHP template file. The reason for this is that we want it to interact with our stored accent_color variable. So down a the bottom of the block-ebook-cta.php file we’re going to add:

<style>
    .block-ebook-cta--button {
        background-color: <?php echo esc_html( $accent_color ); ?>;
    }
    .block-ebook-cta--pretext {
        color: <?php echo esc_html( $accent_color ); ?>;
    }
 </style>

And that is the final piece of this puzzle. Let’s go create a new Page in WordPress, add our block, fill out the fields and see what it looks like. To change it up, let’s set the accent color to purple.

Nice!

So to take this even further you could:

  • Add other button options. E.g. text color
  • Add CSS to handle the blocks responsiveness for smaller screens

I hope you like this one. I’m pretty happy with how it turned out. 😀

If you want to learn more, check out this previous tutorials:

  • Custom Hero Block
  • Custom Gravity Form Block
  • Custom Pricing Table Block

Happy block building!

New Feature: A better way of handling Block Styling (CSS)

From the first version of Block Lab there have been a couple of ways of handling styling for your custom blocks. You could:

  • Add the styling to the block template file
  • Add the styling to the theme

These were both OK, but there were a couple of weaknesses.

If you added styling to the block template file, that snippet of CSS was loaded for every instance the block was added to the page. For example, if you added 3 custom Testimonial blocks to your page, the CSS would be included 3 times. Not great for performance.

Alternatively, if you added the styles to the theme you didn’t get your styling in the editor. This is because (typically) the theme stylesheet isn’t loaded in the WordPress admin.

Granted there were ways around these issues, but they weren’t a part of the “blocks made easy” ethos of Block Lab.

So we came up with a better solution.

Inside the /blocks folder in your theme, where you keep your block template files, you can now add a block-{block name}.css file.

your-theme/blocks/block-foo.php
your-theme/blocks/block-foo.css

As long as you follow the naming convention, Block Lab automatically recognises that this CSS file is paired with the related template file.

Here’s the really cool part though

  1. The CSS can now be loaded, by the plugin, to the WordPress admin so you get your styling in the editor without having to duplicate code, and
  2. The CSS is CONDITIONALLY loaded, only once, on the front end, and only if the relevant block is on the page

This new feature is a fantastic, yet super simple, solution to making conditional stylesheets accessible to even the most beginner WordPress dev.

We’re really excited about this feature and you can read more about it in the documentation.

Get the latest release of Block Lab from WordPress.org and give it a go.

Block Lab Pro – Early Access

Block Lab Pro is coming mid-2019.

We’re hard at work on it right now. Block Lab Pro is going to take the best of the free plugin (which will continue to get better) and power it up with features that make it the perfect tool for agencies and freelancers. The features we’re building, as well as the premium support, will bring massive efficiencies to site-build workflows around the new WordPress editor.

Today we’re launching the Early Access Pass – A pre-purchase that gives you early access to some of the Pro features as they’re developed in the coming months, as well as locking in a lifetime discount on the annual unlimited site license.

The Early Access Pass includes:

  • A locked-in lifetime saving on the annual license for unlimited sites. $99 instead of $399. That’s 75% off for life.
  • Access to a handful of Pro features that will be made available before Pro release. This includes our Block Import / Export feature which is available right now.
  • A big high-five and thank you from us for being awesome and supporting us as we build and launch Block Lab Pro.

The Early Access Pass is a way for us to accelerate towards the launch of Block Lab Pro. The funds we generate will be reinvested to help ramp-up development and lay the foundation for our premium plugin and service.

Check out the Early Access Pass page for more details including Block Lab Pro features as well as a few FAQ’s around licenses etc.

Save 75% on the Unlimited Sites License

Buy an Early Access Pass for Block Pro and save 75% on the annual license for unlimited sites.

 

Check it out!

You have Successfully Subscribed!