Themes Overview

Design considerations for all of the default themes.

The default themes included have been meticulously tested and use modern design best practices.

Let's go over one default theme to go over all of the various built-in features.

Designed to be 100% Symmetric

Browser Tested

The themes have been designed to be mobile-friendly and work in all modern browsers.

Same CSS for Front-end and Block Editor

The block should look 100% the same in the back-end and the front-end by design.

Semantic Markup

The theme is designed with semantic markup with room to grow.

The entire quote is wrapped by a div with class quotes-dlx-wrapper.

Quote HTML Markup

The Quote HTML markup is as follows:

<div class="quotes-dlx-wrapper">
	<figure>
		<blockquote class="quotes-dlx-text quotes-dlx-text-wrapper">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis gravida lorem, in dignissim arcu
			tincidunt et. Vestibulum semper magna eget magna porta, non tempus nunc condimentum.<br>
			<br>
			– By <a href="https://bridgetwillard.com">Bridget Willard</a>
		</blockquote>
	</figure>
	<!-- more markup -->
</div>

The above markup is recommended for modern blockquote symantic HTML. There's also room to grow in case the block has a citation needed.

No citation? Citations within blockquote elements are not a best practice. With trying to make the block as versatile as possible, it was decided to allow the user of the block to place whatever they want in the quote and not be forced to a standard.

The blockquote is designed deliberately to not be clickable. Most Click to Tweet solutions make the entire block clickable. This is not desirable behavior from a user standpoint.

With making the blockquote not being clickable, the user can:

Select any Blockquote text
Click on any links within the Blockquote
Open up the meatball menu (contextual menu) to perform other tweet actions
Click on the dedicated Click to Tweet button

There is also an option to disable to Click to Tweet button, so users of the block can just use the block for quotes only and not have to worry about click states.

Another reason Blockquotes are generally left alone in this plugin is that the contextual menu and Click to Tweet block can be made optional.

Tweet Action Markup

<div class="quotes-dlx-wrapper">
	<!-- Blockquote Markup ^ -->
	<div class="quotes-dlx-button-wrapper right">
		<button class="quotes-dlx-button full quotes-dlx-button-icon-right" data-hashtags="blaH%2CTWEET"
			data-username="ronaldhuereca"
			data-tweet="Lorem+ipsum+dolor+sit+amet%2C+consectetur+adipiscing+elit.+Lestibulum+semper+magna+eget+magna+porta%2C+non+tempus+nunc+condimentum.%0A%0D"
			data-url="https%3A%2F%2Fbeaverbuilder.local%2Fhighlight-and-share-yo-yo-yo%2F%23qdlx-1">
			<span class="quotes-dlx-button-text">
				Click to Tweet </span>
			<span class="quotes-dlx-button-icon">
				<svg width="24" height="24">
					<use xlink:href="#quotes-dlx-twitter-icon"></use>
				</svg>
			</span>
		</button>
	</div>
	<!-- Meataball Menu Markup ... -->
</div>

The above is the Click to Tweet section.

The Click to Tweet button section can be aligned left, centered, or right. In addition, the button can have an icon only, text only, or both.

The design goal is to only make the Button clickable.

<div class="quotes-dlx-wrapper">
	<!-- Markup Above ^ -->>
	<div class="quotes-dlx-meatball-menu">
		<div class="quotes-dlx-meatball-content">
			<input type="checkbox" aria-label="Open Menu Options">
			<ul>
				<li class="quotes-dlx-meatball-menu-item quotes-dlx-meatball-menu-item-copy-tweet">
					<button class="button-reset" data-clipboard-action="copy"
						data-clipboard-target="#quotes-dlx-tweet-text">
						<span class="quotes-dlx-meatball-menu-icon">
							<svg width="24" height="24">
								<use xlink:href="#quotes-dlx-copy-icon"></use>
							</svg>
						</span>
						Copy Tweet </button>
					<div class="quotes-dlx-copy-tweet-textarea" style="width: 0; height: 0; display: none;"
						aria-hidden="true">
						<textarea id="quotes-dlx-tweet-text">													Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lestibulum semper magna eget magna porta, non tempus nunc condimentum.

#blaH #TWEET 

Via @ronaldhuereca

https://beaverbuilder.local/highlight-and-share-yo-yo-yo/#qdlx-1												</textarea>
					</div>
				</li>
				<li class="quotes-dlx-meatball-menu-item quotes-dlx-meatball-menu-item-copy-link"
					data-url="https://beaverbuilder.local/highlight-and-share-yo-yo-yo/#qdlx-1">
					<button class="button-reset">
						<span class="quotes-dlx-meatball-menu-icon">
							<svg width="24" height="24">
								<use xlink:href="#quotes-dlx-link-icon"></use>
							</svg>
						</span>
						Copy Link </button>
				</li>
				<li class="quotes-dlx-meatball-menu-item quotes-dlx-meatball-menu-item-tweet-this">
					<button class="button-reset" data-hashtags="blaH%2CTWEET" data-username="ronaldhuereca"
						data-tweet="Lorem+ipsum+dolor+sit+amet%2C+consectetur+adipiscing+elit.+Lestibulum+semper+magna+eget+magna+porta%2C+non+tempus+nunc+condimentum.%0A%0D"
						data-url="https%3A%2F%2Fbeaverbuilder.local%2Fhighlight-and-share-yo-yo-yo%2F%23qdlx-1">
						<span class="quotes-dlx-meatball-menu-icon">
							<svg width="24" height="24">
								<use xlink:href="#quotes-dlx-twitter-icon"></use>
							</svg>
						</span>
						Tweet This </button>
				</li>
			</ul>
			<div class="quotes-dlx-meatball-icon-wrapper" aria-hidden="true">
				<div class="quotes-dlx-meatball-icon">
					<span></span>
				</div>
			</div>
		</div>
	</div>
</div>