Correct styling for block widgets

WordPress 5.8 introduced new block widgets, that Mantra does not style well. On my limited usage of primary widget area, I used the following custom CSS to fix two issues I discovered.

/* Make headlines look the same as .widget-title in the legacy widgets */
.widget-area h1,
.widget-area h2,
.widget-area h3,
.widget-area h4,
.widget-area h5,
.widget-area h6 {
    color: #FFFFFF;
    background-color: #333333;
    width: 100%;
    width: calc( 100% + 2em );
    padding: 6px 15px;
    border-radius: 15px 0 0 0;
    font-size: 1.1em;
    margin-bottom: -30px; /* compensate for widget margin */
}

/* Apply the same style to recent comments block as RSS widgets uses */
.widget-area ul ol li {
    background: url(../mantra/resources/images/bullets/arrow_white.png) left calc( 2em / 2 - 4px ) no-repeat;
    margin: 5px 3px;
    display: block;
    float: none;
    width: auto;
    padding-left: 15px;
    line-height: 2;
}

Note that this is not an extensive list of custom CSS that. It’s only what I added to one of my sites based on my specific usage of Mantra as a parent theme. There might be more tweaks needed depending on the widgets actually used.

• This topic was modified 3 years, 8 months ago by Michal Stanke. Reason: fix markdown