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:
<divclass="quotes-dlx-wrapper"> <figure> <blockquoteclass="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 <ahref="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
<divclass="quotes-dlx-wrapper"><!-- Blockquote Markup ^ --> <divclass="quotes-dlx-button-wrapper right"> <buttonclass="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"> <spanclass="quotes-dlx-button-text"> Click to Tweet </span> <spanclass="quotes-dlx-button-icon"> <svgwidth="24"height="24"> <usexlink: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.
Contextual Menu Markup
<divclass="quotes-dlx-wrapper"><!-- Markup Above ^ -->> <divclass="quotes-dlx-meatball-menu"> <divclass="quotes-dlx-meatball-content"> <inputtype="checkbox"aria-label="Open Menu Options"> <ul> <liclass="quotes-dlx-meatball-menu-item quotes-dlx-meatball-menu-item-copy-tweet"> <buttonclass="button-reset"data-clipboard-action="copy"data-clipboard-target="#quotes-dlx-tweet-text"> <spanclass="quotes-dlx-meatball-menu-icon"> <svgwidth="24"height="24"> <usexlink:href="#quotes-dlx-copy-icon"></use> </svg> </span> Copy Tweet </button> <divclass="quotes-dlx-copy-tweet-textarea"style="width: 0; height: 0; display: none;"aria-hidden="true"> <textareaid="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 @ronaldhuerecahttps://beaverbuilder.local/highlight-and-share-yo-yo-yo/#qdlx-1 </textarea> </div> </li> <liclass="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"> <buttonclass="button-reset"> <spanclass="quotes-dlx-meatball-menu-icon"> <svgwidth="24"height="24"> <usexlink:href="#quotes-dlx-link-icon"></use> </svg> </span> Copy Link </button> </li> <liclass="quotes-dlx-meatball-menu-item quotes-dlx-meatball-menu-item-tweet-this"> <buttonclass="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"> <spanclass="quotes-dlx-meatball-menu-icon"> <svgwidth="24"height="24"> <usexlink:href="#quotes-dlx-twitter-icon"></use> </svg> </span> Tweet This </button> </li> </ul> <divclass="quotes-dlx-meatball-icon-wrapper"aria-hidden="true"> <divclass="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.
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.
Creating Your Own Theme
Please see Creating Your Own Theme for how to add your own theme.
