Examples
Source:
blocks/clicktotweet/style.scss, line 16
View Source
Default styling
.has-format-highlight
A tweet block with highlighted text from format bar.
Markup blocks/clicktotweet/bu-blocks-block-clicktotweet.hbs
{{#ifContains modifier_class 'has-format-highlight' }}
<h3>Tweet a subsection of this paragraph:</h3>
<p class="wp-block-bu-clicktotweet {{modifier_class}}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius vestibulum ligula, id blandit mi ultricies a. Morbi ac condimentum purus, vel mollis arcu. Vestibulum blandit, lorem eu ullamcorper euismod, felis risus sodales mi, id aliquet nulla eros ac justo. <span class="wp-block-bu-clicktotweet-highlight">Phasellus elementum tortor ante, a porttitor quam porttitor eu. <button class="wp-block-bu-clicktotweet-action js-wp-block-clicktotweet-action">Tweet this</button></span> Vestibulum ut massa dapibus, accumsan velit eu, mollis libero. Proin orci metus, aliquet non porttitor et, vehicula fringilla eros.
</p>
{{else}}
<h3>Tweet this whole paragraph:</h3>
<p class="wp-block-bu-clicktotweet">
<span class="wp-block-bu-clicktotweet-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius vestibulum ligula, id blandit mi ultricies a. Morbi ac condimentum purus, vel mollis arcu. Vestibulum blandit, lorem eu ullamcorper euismod, felis risus sodales mi, id aliquet nulla eros ac justo. Vestibulum ut massa dapibus, accumsan velit eu, mollis libero.
</span>
<button class="wp-block-bu-clicktotweet-action js-wp-block-clicktotweet-action">Tweet this</button>
</p>
{{/ifContains}}