Delivering an intuitive and easy to use Drupal editorial interface is something I’m quite passionate about, and I’ve found myself working with Text formats a lot within Drupal 8 CKEditor recently.

One of the things I’ve never quite understood is the Blockquote button.

The Blockquote button, as I’m sure you all know, is used to add a Testimonial within the WYSIWYG.

The issue is, I couldn’t for the life of me figure out why the button is useful if you can’t add an author?

Fortunately, I stumbled across the answer hidden away deep in the d.org issue queue.

Let me share this sorcery with you.

The data-caption solution for Blockquote Authors

Out the box, we can add a Testimonial to CKEditor by using the Blockquote button.

With this, we get our quote in a simple <p> tag, which is then wrapped in a <blockquote> element.

Now here’s the sorcery.

Head to the configuration page for your text format (or formats if you’re using different text formats for different user roles), and look at the filters.

Assuming you’re using the Basic HTML filter out the box then you’ve likely got <blockquote cite > by default.

Go ahead and add the data-caption attribute in here as follows <blockquote cite data caption >.

This should look a little something like this.

At this point, you want to double check that the Source button is also enabled in your editor.

Now head back to your content and add a Blockquote using the button.

Once you’ve added your Blockquote, hit the Source button and add your author to the Blockquote by adding the value of data-caption=”Author name” within the blockquote HTML tag, like so:

Now when you save the page with this attribute present, Drupal should render the markup completely differently. Here you can see how the markup changes when no data-caption value is present (first example) and when it is present (second example):

And there you have it!