How to build a custom app showcase block

Those of us that build or design websites, apps, and games, know how important it is to have a killer portfolio. In this tutorial, we’ll build a beautiful (and flexible) Showcase block to highlight our best work.

The best bit about this block is that all you have to do is drop in your screenshot. The block itself will wrap the screenshot image in the device.

When in use, it will look something like the image up top.

Let’s do this!

Step 1: Configure the Block

With the Block Lab plugin installed and active, we’re going create a new block. Note, we’re going to use the repeater field for this block, which is a Block Lab Pro feature, but you could achieve the same thing with our free plugin. The repeater field means we can include a variable number of screenshots.

In the admin, go to Block Lab > Add New.

In the new block screen (Block Builder), we choose a name, a slug, an icon, a category, and a couple of keywords. We also add a single repeater field called Screens and an image sub-field called Screen.

Here’s what it looks like.

Sweet! Not too much going on here. Let’s build out our template files.

Step 2: Block Templates

Open up your theme files in your editor of choice.

The options for folder and file structure for creating block templates are nice and simple. For this block we’re going to go with:

/my-theme
    /blocks
        /app-showcase
            /block.php
            /block.css

For our php template file we’re going to work with a while loop to interact with our repeater field. There are some nuances to working with the repeater field versus other fields so make sure you check out the docs.

Our template file looks like this:

<div  class="block-app-showcase alignwide">
<?php

if ( block_rows( 'screens' ) ) :

    while ( block_rows( 'screens' ) ) :
        block_row( 'screens' );

        ?>
            <div class="block-app-showcase__screen">
                <img src="<?php block_sub_field( 'screen' ); ?>" alt="">
            </div>
        <?php
        
    endwhile;

    reset_block_rows( 'screens' );

endif;

?>
</div>

Things to note:

  • We’re following the recommended looping method as outlined in the Block Lab docs for repeater fields.
  • We use the function block_sub_field to retrieve the data (image URL from the image field) stored in the screen field we created when setting up the block.
  • Along with our custom CSS classes, we’re using the alignwide class which is one that the active theme (and many others) has for increasing the width of the block beyond the default content width.

Nice and easy!

For our CSS template file, we have this:

.block-app-showcase {
    display: flex;
    justify-content: space-around;
}

.block-app-showcase__screen {
    position: relative;
    width: 30%;
    border: calc(100vw * .01) solid #000;
    border-radius: calc(100vw * .04);
    overflow: hidden;
    box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.18), inset 0px 0px 0px 2px rgba(0,0,0,1);
}

.block-app-showcase__screen:before {
    position: absolute;
    display: block;
    content: "";
    width: 50%;
    height: calc(100vw * .03);
    border-radius: calc(100vw * .015);
    top: calc(100vw * -.015);
    left: 50%;
    margin-left: -25%;
    background-color: #000;
}

.block-app-showcase__screen:after {
    position: absolute;
    display: block;
    content: "";
    width: 44%;
    height: calc(100vw * .005);
    border-radius: 5px;
    bottom: 12px;
    left: 50%;
    margin-left: -22%;
    background-color: #000;
}

Things to note:

  • Flexbox FTW! Flex makes handling multiple screens a lot easier!
  • block-app-showcase__screen is the class for the div that wraps the screen image and what lets us give the device a border etc.
  • We’re using calc quite a lot for various widths etc. The reason for this is that I want the border width, radius, etc of the phone device to scale nicely with different screen sizes and maintain a proper aspect ratio. We can’t directly use % in border-width or border-radius in CSS, but we can use calc.
  • The pseudo CSS classes :before and :after handle the notch at the top of the device as well as the familiar home line at the bottom of the iOS interface.

That’s it!

Let’s check it out in the Block Editor. We can add the block now as we can add any other standard Gutenberg block. With the repeater field we can add as many screenshots as we like. For this, let’s add 3. The screens I’m using come from this freebie on Dribbble from Alex Pushkin.

With the block added and our screenshot images added, this is what have on the page. 🎉

Easy, but super cool! I love the value this block brings. Being able to simply drop a screenshot in and have it wrapped in the device is very useful!

There are a few further things you could do to improve things even more:

  • Various toggle fields for changing device colours
  • Some media queries for handling different screen sizes
  • A select field which lets you select other device types + the styling that would handle the differences
  • Device orientation

Hope you liked this one! Let me know if you have any thoughts or questions.

Until next time, happy block building!

New Kid on the block?

Subscribe, stay connected, and keep up to date with the latest.

  • This field is for validation purposes and should be left unchanged.

Leave a Reply

Your email address will not be published. Required fields are marked *