Add provisional Support for blockquotes to support ckeditor 5 when using bootstrap barrio

Created on 2 October 2023, about 1 year ago
Updated 22 January 2024, 10 months ago

Problem/Motivation

When using Bootstrap Barrio Starter Theme, (bootstrap barrio subtheme), I notice that ckeditor 5 has support for blockquotes.

The bootstrap framework also has some support for blockquote, both with and without the use of figure and figcaption.

e.g.

https://getbootstrap.com/docs/5.3/content/typography/#blockquotes

It is possible to manually add this or similar markup from ckeditor. However ckeditor contains the following styles around this:

.ck-content blockquote {
border-left: 5px solid #ccc;
font-style: italic;
margin-left: 0;
margin-right: 0;
overflow: hidden;
padding-left: 1.5em;
padding-right: 1.5em;
}

Styles around the blockquote, namely

// Blockquotes
.blockquote {
  margin-bottom: $blockquote-margin-y;
  @include font-size($blockquote-font-size);

  > :last-child {
    margin-bottom: 0;
  }
}

.blockquote-footer {
  margin-top: -$blockquote-margin-y;
  margin-bottom: $blockquote-margin-y;
  @include font-size($blockquote-footer-font-size);
  color: $blockquote-footer-color;

  &::before {
    content: "\2014\00A0"; // em dash, nbsp
  }
}

Is also contained within bootstrap _types.scss file.

To overcome this issue I took the following steps:

1. copy and add _types.scss file to my bootsrap_barrio_subtheme
2. add some additional output to keep some indents and styling as per ckeditor
3. modify ck editor config to support the addition of figure and figcaption

here is the additional css that I have added to my subtheme.

  .blockquote {
    border-left: var(--bs-blockquote-border-width) solid var(--bs-primary-border-subtle);  
    font-style: italic;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
    padding-left: var(--bs-blockquote-padding);
    padding-right: var(--bs-blockquote-padding);
  }

Perhaps we could do something similar as my feeling is that something as basic as ckeditor blockquotes should be supported out of the box when using bootstrap_barrio based theme

Feature request
Status

Active

Version

5.5

Component

Code

Created by

🇬🇧United Kingdom 2dareis2do

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024