BU Blocks Style Guide

Editorial Drawer BlockLink

Ready New Issue

A block that works a bit like BU Collapsible to open and close a drawer of content. When the closed state (or aside) is clicked, drawer opens in place. The drawer block can contain nested blocks within it. In the first example below, it contains a video and text block.

Drawer Teaser supports image block, heading block, text block

Drawer supports columns, image block, video block, heading block, text block

Different options include hide teaser, style round (applies to any photos), the default align options, plus narrow, small, medium and wide sizes as well as a light or dark background

Examples Source: blocks/drawer/style.scss, line 15 View Source

Default styling

.has-hide-teaser

Hide teaser checkbox option enabled

.is-style-round

Example of drawer with rounded image

.alignright

Example of a right-aligned layout

.alignleft

Example of a left-aligned layout

.alignfull

Example of a full-width layout

.is-size-narrow

Example of a quarter width closed drawer

.is-size-small

Example of a third width closed drawer

.is-size-medium

Example of a half width closed drawer

.is-size-wide

Example of a two-third width closed drawer

.has-light-background

Example of a light background

.has-dark-background

Example of a dark background

Markup blocks/drawer/bu-blocks-block-drawer.hbs

<div class="wrapper">
			<main id="main" role="main" class="content">
				<article class="content-area">
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas massa augue, sodales nec convallis in, viverra in tortor. Cras lacus orci, scelerisque non dictum ac, molestie a urna. Nunc ultricies in tortor interdum dictum. Fusce ut mi aliquam, efficitur libero ac, ultricies est. Etiam pellentesque sapien ex, at porttitor urna pulvinar ac. Donec aliquam, dui eget porta rutrum, libero sapien faucibus nibh, ut blandit massa massa eget eros. Curabitur erat nunc, dapibus eget convallis non, tristique ac enim.</p>
		
		
					<aside class="wp-block-editorial-drawer {{modifier_class}} js-bu-block-drawer">
						<div class="wp-block-editorial-drawer-teaser">
							<figure><img src="https://placekitten.com/300/200" alt="Image Block" /></figure>
							<h2>Heading Block</h2>
							<p>Paragraph block. consectetur adipiscing elit. Maecenas massa augue.</p>
							<a href="#" class="button js-bu-block-drawer-open">Button block</a>
						</div>
						<section class="wp-block-editorial-drawer-content js-bu-block-drawer-content">
							<div class="wp-block-editorial-drawer-wrapper">
		
							<!-- inner blocks here -->
		
							<!-- close button always inserted -->
							<div class="wp-block-editorial-drawer-close">
								<button class="wp-block-editorial-drawer-close-button js-bu-block-drawer-close">Close</button>
							</div>
		
							</div>
						</section>
					</aside>
		
					<p>Nullam ultrices neque in quam malesuada, volutpat varius diam vulputate. Nulla facilisi. Proin pulvinar, lectus sit amet pellentesque luctus, elit arcu euismod turpis, et iaculis urna odio et nisl. Ut in molestie elit. Praesent lacinia sodales euismod. Ut consequat eleifend nulla, eu auctor nisl euismod vel. Curabitur luctus rhoncus mauris id porta. Etiam faucibus tellus non porta egestas. Praesent et tincidunt ex, ac tincidunt tortor. Vivamus ullamcorper nulla nunc, a scelerisque augue elementum vel. Nullam ultrices neque in quam malesuada, volutpat varius diam vulputate. Nulla facilisi. Proin pulvinar, lectus sit amet pellentesque luctus, elit arcu euismod turpis, et iaculis urna odio et nisl. Ut in molestie elit. Praesent lacinia sodales euismod. Ut consequat eleifend nulla, eu auctor nisl euismod vel.</p>
		
					<p>Nullam ultrices neque in quam malesuada, volutpat varius diam vulputate. Nulla facilisi. Proin pulvinar, lectus sit amet pellentesque luctus, elit arcu euismod turpis, et iaculis urna odio et nisl. Ut in molestie elit. Praesent lacinia sodales euismod. Ut consequat eleifend nulla, eu auctor nisl euismod vel. Curabitur luctus rhoncus mauris id porta. Etiam faucibus tellus non porta egestas. Praesent et tincidunt ex, ac tincidunt tortor. Vivamus ullamcorper nulla nunc, a scelerisque augue elementum vel. Nullam ultrices neque in quam malesuada, volutpat varius diam vulputate. Nulla facilisi. Proin pulvinar, lectus sit amet pellentesque luctus, elit arcu euismod turpis, et iaculis urna odio et nisl. Ut in molestie elit. Praesent lacinia sodales euismod. Ut consequat eleifend nulla, eu auctor nisl euismod vel.</p>
		
		
		
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas massa augue, sodales nec convallis in, viverra in tortor. Cras lacus orci, scelerisque non dictum ac, molestie a urna. Nunc ultricies in tortor interdum dictum. Fusce ut mi aliquam, efficitur libero ac, ultricies est. Etiam pellentesque sapien ex, at porttitor urna pulvinar ac. Donec aliquam, dui eget porta rutrum, libero sapien faucibus nibh, ut blandit massa massa eget eros.</p>
				</article>
			</main>
		</div>