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.
Blockquote Padding
Block Spacing
Click to Tweet Container
The themes have been designed to be mobile-friendly and work in all modern browsers.
The block should look 100% the same in the back-end and the front-end by design.
Block Editor Theme
Block Editor in Preview Mode
The theme is designed with semantic markup with room to grow.
The entire quote is wrapped by a
div with class quotes-dlx-wrapper.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:
- 1.Select any Blockquote text
- 2.Click on any links within the Blockquote
- 3.Open up the meatball menu (contextual menu) to perform other tweet actions
- 4.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.
User Selecting Text in the Quote
Another reason Blockquotes are generally left alone in this plugin is that the contextual menu and Click to Tweet block can be made optional.
Quote without menu and button
<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.
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>
The markup for the Meatball Menu (Contextual Menu) is pretty complex, but you really only need to care about the
input and ul portions.When the
input checkbox is checked, the ul portion displays as part of the menu.
Contextual Menu
The menu must be clicked to open. It also must be clicked to be closed. This results in the most desired behavior from a user perspective.
Each theme can customize the contextual menu to match the quote theme.
Please see Creating Your Own Theme for how to add your own theme.
Last modified 1yr ago