How to Customize Embed Styles in Your WordPress Theme Using the figure .wp-block-embed Class

WordPress has made it simple for users to embed various types of content into their posts and pages using the block editor, also known as Gutenberg. One of the most common blocks for embedding is the Embed block, which wraps the embedded content in a figure tag with the class .wp-block-embed. Customizing the appearance of these embeds can enhance your website’s design and ensure it aligns with your overall theme. This article will guide you through the process of editing the embed style using the figure .wp-block-embed class in your WordPress theme.

Step 1: Understanding the Structure

When you embed content using the Embed block in WordPress, the HTML structure typically looks something like this:

<figure class="wp-block-embed">
    <div class="wp-block-embed__wrapper">
        <!-- Embedded content such as a YouTube video, Tweet, etc. -->
    </div>
</figure>

The outer figure element with the class wp-block-embed is what you’ll target with your CSS to apply custom styles.

Step 2: Accessing Your Theme’s CSS

To edit the embed styles, you’ll need to access your theme’s CSS file. This can be done in a few different ways:

Using the WordPress Customizer

1. Go to your WordPress dashboard.
2. Navigate to Appearance > Customize.
3. In the Customizer, go to Additional CSS.
4. Here, you can add your custom CSS.

Editing the Theme’s Style.css File

1. Go to your WordPress dashboard.
2. Navigate to Appearance > Theme Editor.
3. Select the style.css file from the list of theme files on the right.
4. Add your custom CSS at the end of the file.

Note: It’s recommended to use a child theme for customizations to prevent your changes from being overwritten during theme updates.

Step 3: Writing Custom CSS

With access to your CSS file, you can now write custom styles for the .wp-block-embed class. Here are a few examples to get you started:

Basic Customization

To add a border, padding, and change the background color of your embeds:

figure.wp-block-embed {
    border: 2px solid #ccc;
    padding: 10px;
    background-color: #f9f9f9;
    margin: 20px 0;
}

Responsive Styling

To make sure your embeds look good on all devices, you can use media queries:

@media (max-width: 768px) {
    figure.wp-block-embed {
        padding: 5px;
        background-color: #fff;
    }
}

Customizing the Wrapper

To style the inner wrapper that contains the embedded content, you can target .wp-block-embed__wrapper:

figure.wp-block-embed .wp-block-embed__wrapper {
    border-radius: 10px;
    overflow: hidden;
}

Adding a Shadow

To add a shadow effect to the embeds, use the following CSS:

figure.wp-block-embed {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

Centering the Embedded Content

To center the embedded content, you can set the margin to auto:

figure.wp-block-embed {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
}

Step 4: Testing Your Changes

After adding your custom CSS, make sure to:

1. Save your changes in the Customizer or theme editor.
2. Clear any caches if you’re using a caching plugin.
3. Preview your site to ensure the changes look as expected.

Conclusion

Customizing the embed styles in your WordPress theme using the figure .wp-block-embed class allows you to create a more cohesive and visually appealing design. By accessing your theme’s CSS and applying targeted styles, you can easily enhance the presentation of embedded content on your website. Remember to test your changes across different devices and browsers to ensure a consistent user experience. Happy styling!

Notes:

This basic script, CSS style, and plugin are designed to function optimally assuming minimal interference from your theme or other plugins. If conflicts occur or further customization is needed, additional adjustments may be necessary. Please note that this script, CSS style, or plugin must be used AS IS.

Wp Scriptly