Creating Overlapping Media Text Block

Note: This post is part 1 of leaning efforts to get familiarize full site editing (FSE) interface to customize block themes. This learning post is still in active development and updated regularly.

Recently I came across another interesting short video and blog posts from Jamie Marsland on how to create overlapping column with block editor. I thought to give it a try and create a pattern of it.

The overlapping Image and text pattern that we are going to develop is similar to the following screenshot from Jamie’s tutorial post.

The overlapping Image and text pattern that we are going to develop is similar to the following screenshot from Jamie’s tutorial post.

Screenshot source: Pootlepress Blog

Next we will follow the following step-by-step guide from Jamie’s tutorial blog post.

Step 1: Add media a text block

From the text editor, add a Media and Text block in a page.

Screenshot showing block list view (left panel), added media block and empty content area block (right panel)

As shown above, on the left is image and on right is text content area.

Step 2: Replace the paragraph block with Columns block

If we look at its list view, the Media Text block is simple Media and paragraph blocks.

To create overlapping text, we need to transform the current content area (paragraph block) with Columns block. Because Columns block is a container block where multiple blocks can be added within it later and also add background color.

While Content area selected type /columns and select single Column block (see below))

Next, lets add some header, description and button link below.

  • Select Header block and add some text in.
  • Then select Paragraph block and some description
  • Finally, add a Button block and link it to image Pixaby image source.

To add background color, select column block and then add background color from right sidebar panel.

Screenshot showing content block with background (left panel) and image block (right panel)
Step 3: Create the Column overlap

For this we need to add the following custom CSS from Jami’s post to our theme’s style.css file:

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
	margin-right: -150px;
}

.wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content {
	margin-left: -150px;
}

@media (max-width: 640px) {
    .wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content {
        margin-left: 0px !important;
    }
    
    .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
        margin-right: 0px !important;
    } 
}

Now if we view our customized Media and Text overlap block, we should see similar to the screenshot below:

Screenshot showing overlapping content with background (left panel) and a image block (right panel).
Wrapping Up

In this short how-to learning post, with few additional CSS styling and transforming a the original content paragraph block intro column block, a nice overlapping block with background was created. In the next post, I will transform this block into pattern, so that it can be bundle into my theme.

NEXT POST: Creating Overlapping Media Text Block Pattern

Useful Resources

The following is list of references link that I gathered during my brief research. While preparing this post, I have also referred some of the following references extensively. Please to refer original posts for more detailed information.