From 9c3ef7bec3373f65de2288e5b59bb1dd99a24693 Mon Sep 17 00:00:00 2001
From: Tetrakern <26898880+Tetrakern@users.noreply.github.com>
Date: Fri, 27 Jan 2023 01:23:02 +0100
Subject: [PATCH] Add class option to shortcodes

---
 DOCUMENTATION.md                             | 24 ++++---
 includes/functions/_shortcodes.php           | 75 ++++++++++++++++----
 partials/_latest-chapters-compact.php        |  3 +-
 partials/_latest-chapters.php                |  3 +-
 partials/_latest-posts.php                   |  3 +-
 partials/_latest-recommendations-compact.php |  2 +-
 partials/_latest-recommendations.php         |  3 +-
 partials/_latest-stories-compact.php         |  2 +-
 partials/_latest-stories.php                 |  3 +-
 partials/_latest-updates-compact.php         |  3 +-
 partials/_latest-updates.php                 |  3 +-
 partials/_showcase.php                       |  3 +-
 12 files changed, 97 insertions(+), 30 deletions(-)

diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md
index 8c50ad79..33d0d208 100644
--- a/DOCUMENTATION.md
+++ b/DOCUMENTATION.md
@@ -396,7 +396,7 @@ Renders a two-column grid of small bookmark cards, ordered by date of creation.
 
 ### Chapter List
 
-Renders a list of chapters identical to those on story pages, ordered by sequence in the source. Must have either the **story** or **chapters** parameter. Optional parameters are **count**, **offset**, **group**, and **heading**.
+Renders a list of chapters identical to those on story pages, ordered by sequence in the source. Must have either the **story** or **chapters** parameter. Optional parameters are **count**, **offset**, **group**, **heading**, **class**, and **class**.
 
 * **story:** ID of a single story. You need either this or **chapters**.
 * **chapters:** Comma-separated list of chapter IDs. You need either this or **story**.
@@ -404,6 +404,7 @@ Renders a list of chapters identical to those on story pages, ordered by sequenc
 * **offset:** Skip a number of chapters, which can make sense if you query all.
 * **heading:** Show a heading with collapse toggle above the list.
 * **group:** Only show chapters with a specific group name, which can transcend stories.
+* **class:** Additional CSS classes, separated by whitespace.
 
 ```
 [fictioneer_chapter_list story="69"]
@@ -421,7 +422,7 @@ Renders a list of chapters identical to those on story pages, ordered by sequenc
 
 ### Contact Form
 
-Renders a contact form with various (optional) fields. Submissions are validated, sanitized, have basic spam protection, and are checked against the WordPress disallow list under **Settings > Discussions**. If all steps are passed, the submission is sent to the email addresses listed under **Fictioneer > General > Contact Form Receivers**, which are never revealed to the public. If empty, the admin email address is used instead. Optional parameters are **title**, **submit**, **privacy_policy**, **required**, **email**, **name**, **text_[1-6]**, and **check_[1-6]**.
+Renders a contact form with various (optional) fields. Submissions are validated, sanitized, have basic spam protection, and are checked against the WordPress disallow list under **Settings > Discussions**. If all steps are passed, the submission is sent to the email addresses listed under **Fictioneer > General > Contact Form Receivers**, which are never revealed to the public. If empty, the admin email address is used instead. Optional parameters are **title**, **submit**, **privacy_policy**, **required**, **email**, **name**, **text_[1-6]**, **check_[1-6]**, and **class**.
 
 * **title:** Title of the form shown in emails. Defaults to "Nameless Form".
 * **submit:** Label of the submit button. Defaults to "Submit".
@@ -431,6 +432,7 @@ Renders a contact form with various (optional) fields. Submissions are validated
 * **name:** Sender name for personal replies.
 * **text_[1-6]:** Custom text fields 1 to 6, e.g. **text_1** to **text_6**.
 * **check_[1-6]:** Custom checkboxes 1 to 6, e.g. **check_1** to **check_6**.
+* **class:** Additional CSS classes, separated by whitespace.
 
 ```
 [fictioneer_contact_form]
@@ -458,7 +460,7 @@ Renders two buttons to deal with cookies, "Reset Consent" and "Clear Cookies". B
 
 ### Latest Chapters
 
-Renders a two-column grid of small cards, showing the latest four chapters ordered by publishing date, descending. Optional parameters are **count**, **type**, **author**, **order**, **orderby**, **spoiler**, **source**, and **chapters**.
+Renders a two-column grid of small cards, showing the latest four chapters ordered by publishing date, descending. Optional parameters are **count**, **type**, **author**, **order**, **orderby**, **spoiler**, **source**, **chapters**, and **class**.
 
 * **count:** Limit chapters to any positive number, although you should keep it reasonable. Default `4`.
 * **type:** Either `default`, `simple`, or `compact`. The other variants are smaller with less data.
@@ -468,6 +470,7 @@ Renders a two-column grid of small cards, showing the latest four chapters order
 * **spoiler:** The excerpt is obfuscated, set `true` if you want to reveal it. Default `false`.
 * **source:** Set `false` to hide the author and story nodes. Default `true`.
 * **chapters:** Comma-separated list of post IDs, if you want to pick from a curated pool.
+* **class:** Additional CSS classes, separated by whitespace.
 
 ```
 [fictioneer_latest_chapters]
@@ -481,11 +484,12 @@ Renders a two-column grid of small cards, showing the latest four chapters order
 
 ### Latest Posts
 
-Renders the last blog post or a list of blog posts, ignoring sticky posts, ordered by publishing date, descending. Optional parameters are **count**, **author**, and **posts**.
+Renders the last blog post or a list of blog posts, ignoring sticky posts, ordered by publishing date, descending. Optional parameters are **count**, **author**, **posts**, and **class**.
 
 * **count:** Limit posts to any positive number, although you should keep it reasonable. Default `1`.
 * **author:** Only show posts of a specific author. Make sure to write the name right.
 * **posts:** Comma-separated list of post IDs, if you want to pick from a curated pool.
+* **class:** Additional CSS classes, separated by whitespace.
 
 ```
 [fictioneer_latest_posts]
@@ -499,7 +503,7 @@ Renders the last blog post or a list of blog posts, ignoring sticky posts, order
 
 ### Latest Recommendations
 
-Renders a two-column grid of small cards, showing the latest four recommendations ordered by publishing date, descending. Optional parameters are **count**, **type**, **author**, **order**, **orderby**, and **recommendations**.
+Renders a two-column grid of small cards, showing the latest four recommendations ordered by publishing date, descending. Optional parameters are **count**, **type**, **author**, **order**, **orderby**, **recommendations**, and **class**.
 
 * **count:** Limit recommendations to any positive number, although you should keep it reasonable. Default `4`.
 * **type:** Either `default` or `compact`. The compact variant is smaller with less data.
@@ -507,6 +511,7 @@ Renders a two-column grid of small cards, showing the latest four recommendation
 * **order:** Either `desc` (descending) or `asc` (ascending). Default `desc`.
 * **orderby:** The default is `date`, but you can also use `modified` and [more](https://developer.wordpress.org/reference/classes/wp_query/#order-orderby-parameters).
 * **recommendations:** Comma-separated list of post IDs, if you want to pick from a curated pool.
+* **class:** Additional CSS classes, separated by whitespace.
 
 ```
 [fictioneer_latest_recommendations]
@@ -520,7 +525,7 @@ Renders a two-column grid of small cards, showing the latest four recommendation
 
 ### Latest Stories
 
-Renders a two-column grid of small cards, showing the latest four stories ordered by publishing date, descending. Optional parameters are **count**, **type**, **author**, **order**, **orderby**, and **stories**.
+Renders a two-column grid of small cards, showing the latest four stories ordered by publishing date, descending. Optional parameters are **count**, **type**, **author**, **order**, **orderby**, **stories**, and **class**.
 
 * **count:** Limit stories to any positive number, although you should keep it reasonable. Default `4`.
 * **type:** Either `default` or `compact`. The compact variant is smaller with less data.
@@ -528,6 +533,7 @@ Renders a two-column grid of small cards, showing the latest four stories ordere
 * **order:** Either `desc` (descending) or `asc` (ascending). Default `desc`.
 * **orderby:** The default is `date`, but you can also use `modified` and [more](https://developer.wordpress.org/reference/classes/wp_query/#order-orderby-parameters).
 * **stories:** Comma-separated list of post IDs, if you want to pick from a curated pool.
+* **class:** Additional CSS classes, separated by whitespace.
 
 ```
 [fictioneer_latest_stories]
@@ -541,13 +547,14 @@ Renders a two-column grid of small cards, showing the latest four stories ordere
 
 ### Latest Updates
 
-Renders a two-column grid of small cards, showing the latest four updated stories ordered by date of the last chapter change, descending. Optional parameters are **count**, **type**, **author**, **order**, and **stories**.
+Renders a two-column grid of small cards, showing the latest four updated stories ordered by date of the last chapter change, descending. Optional parameters are **count**, **type**, **author**, **order**, **stories**, and **class**.
 
 * **count:** Limit updates to any positive number, although you should keep it reasonable. Default `4`.
 * **type:** Either `default`, `simple`, or `compact`. The other variants are smaller with less data.
 * **author:** Only show updates of a specific author. Make sure to write the name right.
 * **order:** Either `desc` (descending) or `asc` (ascending). Default `desc`.
 * **stories:** Comma-separated list of post IDs, if you want to pick from a curated pool.
+* **class:** Additional CSS classes, separated by whitespace.
 
 ```
 [fictioneer_latest_updates]
@@ -578,7 +585,7 @@ Renders the search form with advanced options (if not disabled in the settings).
 
 ### Showcase
 
-Renders dynamic grid of thumbnails with title, showing the latest eight posts of the specified type ordered by publishing date, descending. Required **for** parameter. Optional parameters are **count**, **author**, **order**, **orderby**, **posts**, and **no_cap**. The thumbnail is either the **Landscape Image** or **Cover Image** (if available), with chapters defaulting to the parent story.
+Renders dynamic grid of thumbnails with title, showing the latest eight posts of the specified type ordered by publishing date, descending. Required **for** parameter. Optional parameters are **count**, **author**, **order**, **orderby**, **posts**, **no_cap**, and **class**. The thumbnail is either the **Landscape Image** or **Cover Image** (if available), with chapters defaulting to the parent story.
 
 * **for:** Desired post type, either `stories`, `chapters`, `collections`, or `recommendations`.
 * **count:** Limit posts to any positive number, although you should keep it reasonable. Default `8`.
@@ -587,6 +594,7 @@ Renders dynamic grid of thumbnails with title, showing the latest eight posts of
 * **orderby:** The default is `date`, but you can also use `rand` and [more](https://developer.wordpress.org/reference/classes/wp_query/#order-orderby-parameters).
 * **posts:** Comma-separated list of post IDs, if you want to pick from a curated pool.
 * **no_cap:** Set `true` if you want to hide the caption.
+* **class:** Additional CSS classes, separated by whitespace.
 
 ```
 [fictioneer_showcase for="collections"]
diff --git a/includes/functions/_shortcodes.php b/includes/functions/_shortcodes.php
index 9662767c..bc1b5de8 100644
--- a/includes/functions/_shortcodes.php
+++ b/includes/functions/_shortcodes.php
@@ -86,6 +86,7 @@ add_action( 'save_post', 'fictioneer_update_shortcode_relationships', 10, 2 );
  * @param string|null $attr['order']    Optional. Order direction. Default 'DESC'.
  * @param string|null $attr['orderby']  Optional. Order argument. Default 'date'.
  * @param array|null  $attr['post_ids'] Optional. Limit items to specific post IDs.
+ * @param string|null $attr['class']    Optional. Additional CSS classes, separated by whitespace.
  *
  * @return string The rendered shortcode HTML.
  */
@@ -101,6 +102,7 @@ function fictioneer_shortcode_showcase( $attr ) {
   $orderby = $attr['orderby'] ?? 'date';
   $no_cap = $attr['no_cap'] ?? false;
   $post_ids = [];
+  $classes = [];
 
   if ( ! empty( $attr['posts'] ) ) {
     $post_ids = str_replace( ' ', '', $attr['posts'] );
@@ -108,6 +110,9 @@ function fictioneer_shortcode_showcase( $attr ) {
     $post_ids = is_array( $post_ids ) ? $post_ids : [];
   }
 
+  // Extra classes
+  if ( ! empty( $attr['class'] ) ) $classes[] = esc_attr( wp_strip_all_tags( $attr['class'] ) );
+
   // Prepare arguments
   $args = array(
     'count' => $count,
@@ -115,7 +120,8 @@ function fictioneer_shortcode_showcase( $attr ) {
     'orderby' => $orderby,
     'order' => $order,
     'post_ids' => $post_ids,
-    'no_cap' => $no_cap == 'true' || $no_cap == '1'
+    'no_cap' => $no_cap == 'true' || $no_cap == '1',
+    'classes' => $classes
   );
 
   switch ( $attr['for'] ) {
@@ -161,6 +167,7 @@ add_shortcode( 'fictioneer_showcase', 'fictioneer_shortcode_showcase' );
  * @param string|null $attr['spoiler']  Optional. Whether to show spoiler content.
  * @param string|null $attr['source']   Optional. Whether to show author and story.
  * @param array|null  $attr['chapters'] Optional. Limit items to specific post IDs.
+ * @param string|null $attr['class']    Optional. Additional CSS classes, separated by whitespace.
  *
  * @return string The rendered shortcode HTML.
  */
@@ -175,6 +182,7 @@ function fictioneer_shortcode_latest_chapters( $attr ) {
   $spoiler = $attr['spoiler'] ?? false;
   $source = $attr['source'] ?? 'true';
   $post_ids = [];
+  $classes = [];
 
   if ( ! empty( $attr['chapters'] ) ) {
     $post_ids = str_replace( ' ', '', $attr['chapters'] );
@@ -183,6 +191,9 @@ function fictioneer_shortcode_latest_chapters( $attr ) {
     $count = count( $post_ids );
   }
 
+  // Extra classes
+  if ( ! empty( $attr['class'] ) ) $classes[] = esc_attr( wp_strip_all_tags( $attr['class'] ) );
+
   // Buffer
   ob_start();
 
@@ -198,7 +209,8 @@ function fictioneer_shortcode_latest_chapters( $attr ) {
           'orderby' => $orderby,
           'spoiler' => $spoiler == 'true',
           'source' => $source == 'true',
-          'post_ids' => $post_ids
+          'post_ids' => $post_ids,
+          'classes' => $classes
         )
       );
       break;
@@ -214,7 +226,8 @@ function fictioneer_shortcode_latest_chapters( $attr ) {
           'orderby' => $orderby,
           'spoiler' => $spoiler == 'true',
           'source' => $source == 'true',
-          'post_ids' => $post_ids
+          'post_ids' => $post_ids,
+          'classes' => $classes
         )
       );
   }
@@ -240,6 +253,7 @@ add_shortcode( 'fictioneer_chapter_cards', 'fictioneer_shortcode_latest_chapters
  * @param string|null $attr['type']    Optional. Choose between 'default' and 'compact'.
  * @param string|null $attr['orderby'] Optional. Order argument. Default 'date'.
  * @param array|null  $attr['stories'] Optional. Limit items to specific post IDs.
+ * @param string|null $attr['class']   Optional. Additional CSS classes, separated by whitespace.
  *
  * @return string The rendered shortcode HTML.
  */
@@ -252,6 +266,7 @@ function fictioneer_shortcode_latest_stories( $attr ) {
   $order = $attr['order'] ?? 'desc';
   $orderby = $attr['orderby'] ?? 'date';
   $post_ids = [];
+  $classes = [];
 
   if ( ! empty( $attr['stories'] ) ) {
     $post_ids = str_replace( ' ', '', $attr['stories'] );
@@ -260,6 +275,9 @@ function fictioneer_shortcode_latest_stories( $attr ) {
     $count = count( $post_ids );
   }
 
+  // Extra classes
+  if ( ! empty( $attr['class'] ) ) $classes[] = esc_attr( wp_strip_all_tags( $attr['class'] ) );
+
   // Buffer
   ob_start();
 
@@ -273,7 +291,8 @@ function fictioneer_shortcode_latest_stories( $attr ) {
           'author' => $author,
           'order' => $order,
           'orderby' => $orderby,
-          'post_ids' => $post_ids
+          'post_ids' => $post_ids,
+          'classes' => $classes
         )
       );
       break;
@@ -286,7 +305,8 @@ function fictioneer_shortcode_latest_stories( $attr ) {
           'author' => $author,
           'order' => $order,
           'orderby' => $orderby,
-          'post_ids' => $post_ids
+          'post_ids' => $post_ids,
+          'classes' => $classes
         )
       );
   }
@@ -311,6 +331,7 @@ add_shortcode( 'fictioneer_story_cards', 'fictioneer_shortcode_latest_stories' )
  * @param string|null $attr['author']  Optional. Limit items to a specific author.
  * @param string|null $attr['type']    Optional. Choose between 'default', 'simple', and 'compact'.
  * @param array|null  $attr['stories'] Optional. Limit items to specific post IDs.
+ * @param string|null $attr['class']   Optional. Additional CSS classes, separated by whitespace.
  *
  * @return string The rendered shortcode HTML.
  */
@@ -322,6 +343,7 @@ function fictioneer_shortcode_latest_story_updates( $attr ) {
   $author = $attr['author'] ?? false;
   $order = $attr['order'] ?? 'desc';
   $post_ids = [];
+  $classes = [];
 
   if ( ! empty( $attr['stories'] ) ) {
     $post_ids = str_replace( ' ', '', $attr['stories'] );
@@ -330,6 +352,9 @@ function fictioneer_shortcode_latest_story_updates( $attr ) {
     $count = count( $post_ids );
   }
 
+  // Extra classes
+  if ( ! empty( $attr['class'] ) ) $classes[] = esc_attr( wp_strip_all_tags( $attr['class'] ) );
+
   // Buffer
   ob_start();
 
@@ -342,7 +367,8 @@ function fictioneer_shortcode_latest_story_updates( $attr ) {
           'count' => $count,
           'author' => $author,
           'order' => $order,
-          'post_ids' => $post_ids
+          'post_ids' => $post_ids,
+          'classes' => $classes
         )
       );
       break;
@@ -355,7 +381,8 @@ function fictioneer_shortcode_latest_story_updates( $attr ) {
           'author' => $author,
           'order' => $order,
           'simple' => $type == 'simple',
-          'post_ids' => $post_ids
+          'post_ids' => $post_ids,
+          'classes' => $classes
         )
       );
   }
@@ -380,6 +407,7 @@ add_shortcode( 'fictioneer_update_cards', 'fictioneer_shortcode_latest_story_upd
  * @param string|null $attr['author']          Optional. Limit items to a specific author.
  * @param string|null $attr['type']            Optional. Choose between 'default' and 'compact'.
  * @param array|null  $attr['recommendations'] Optional. Limit items to specific post IDs.
+ * @param string|null $attr['class']           Optional. Additional CSS classes, separated by whitespace.
  *
  * @return string The rendered shortcode HTML.
  */
@@ -392,6 +420,7 @@ function fictioneer_shortcode_latest_recommendations( $attr ) {
   $order = $attr['order'] ?? 'desc';
   $orderby = $attr['orderby'] ?? 'date';
   $post_ids = [];
+  $classes = [];
 
   if ( ! empty( $attr['recommendations'] ) ) {
     $post_ids = str_replace( ' ', '', $attr['recommendations'] );
@@ -400,6 +429,9 @@ function fictioneer_shortcode_latest_recommendations( $attr ) {
     $count = count( $post_ids );
   }
 
+  // Extra classes
+  if ( ! empty( $attr['class'] ) ) $classes[] = esc_attr( wp_strip_all_tags( $attr['class'] ) );
+
   // Buffer
   ob_start();
 
@@ -413,7 +445,8 @@ function fictioneer_shortcode_latest_recommendations( $attr ) {
           'author' => $author,
           'order' => $order,
           'orderby' => $orderby,
-          'post_ids' => $post_ids
+          'post_ids' => $post_ids,
+          'classes' => $classes
         )
       );
       break;
@@ -426,7 +459,8 @@ function fictioneer_shortcode_latest_recommendations( $attr ) {
           'author' => $author,
           'order' => $order,
           'orderby' => $orderby,
-          'post_ids' => $post_ids
+          'post_ids' => $post_ids,
+          'classes' => $classes
         )
       );
   }
@@ -450,6 +484,7 @@ add_shortcode( 'fictioneer_recommendation_cards', 'fictioneer_shortcode_latest_r
  * @param int|null    $attr['count']  Optional. Maximum number of items. Default 1.
  * @param string|null $attr['author'] Optional. Limit items to a specific author.
  * @param array|null  $attr['posts']  Optional. Limit items to specific post IDs.
+ * @param string|null $attr['class']  Optional. Additional CSS classes, separated by whitespace.
  *
  * @return string The rendered shortcode HTML.
  */
@@ -459,6 +494,7 @@ function fictioneer_shortcode_latest_posts( $attr ) {
   $author = $attr['author'] ?? false;
   $count = max( 1, intval( $attr['count'] ?? 1 ) );
   $post_ids = [];
+  $classes = [];
 
   if ( ! empty( $attr['posts'] ) ) {
     $post_ids = str_replace( ' ', '', $attr['posts'] );
@@ -467,6 +503,9 @@ function fictioneer_shortcode_latest_posts( $attr ) {
     $count = count( $post_ids );
   }
 
+  // Extra classes
+  if ( ! empty( $attr['class'] ) ) $classes[] = esc_attr( wp_strip_all_tags( $attr['class'] ) );
+
   // Buffer
   ob_start();
 
@@ -476,7 +515,8 @@ function fictioneer_shortcode_latest_posts( $attr ) {
     array(
       'count' => $count,
       'author' => $author,
-      'post_ids' => $post_ids
+      'post_ids' => $post_ids,
+      'classes' => $classes
     )
   );
 
@@ -557,6 +597,7 @@ add_shortcode( 'fictioneer_cookie_buttons', 'fictioneer_shortcode_cookie_buttons
  * @param int|null    $attr['offset']   Optional. Skip a number of posts.
  * @param string|null $attr['group']    Optional. Only show chapters of the group.
  * @param string|null $attr['heading']  Optional. Show <h5> heading above list.
+ * @param string|null $attr['class']    Optional. Additional CSS classes, separated by whitespace.
  *
  * @return string The rendered shortcode HTML.
  */
@@ -592,6 +633,7 @@ function fictioneer_shortcode_chapter_list( $attr ) {
   $can_checkmarks = get_option( 'fictioneer_enable_checkmarks' );
   $chapter_ids = [];
   $chapters = [];
+  $classes = [];
 
   // Extract chapter IDs (if any)
   if ( ! empty( $attr['chapters'] ) ) {
@@ -611,6 +653,10 @@ function fictioneer_shortcode_chapter_list( $attr ) {
     $chapters = $chapter_ids;
   }
 
+  // Extra classes
+  if ( get_option( 'fictioneer_hide_chapter_icons' ) ) $classes[] = '_no-icons';
+  if ( ! empty( $attr['class'] ) ) $classes[] = esc_attr( wp_strip_all_tags( $attr['class'] ) );
+
   // Apply offset
   if ( ! $group ) $chapters = array_slice( $chapters, $offset );
 
@@ -624,7 +670,7 @@ function fictioneer_shortcode_chapter_list( $attr ) {
   ob_start();
 
   // Start HTML ---> ?>
-  <div class="chapter-group <?php echo $hide_icons ? ' _no-icons' : ''; ?>">
+  <div class="chapter-group <?php echo implode( ' ', $classes ); ?>">
     <?php if ( $heading ) : ?>
       <?php $discriminator = md5( $heading . microtime() ); ?>
       <input id="group-toggle-<?php echo $discriminator; ?>" class="chapter-group__toggle" type="checkbox" hidden>
@@ -747,6 +793,7 @@ add_shortcode( 'fictioneer_chapter_list', 'fictioneer_shortcode_chapter_list' );
  * @param string|null  $attr['name']           Optional. Name field.
  * @param string|null  $attr["text_{$i}"]      Optional. Up to 6 extra text field(s).
  * @param string|null  $attr["check_{$i}"]     Optional. Up to 6 extra checkbox field(s).
+ * @param string|null  $attr['class']          Optional. Additional CSS classes, separated by whitespace.
  *
  * @return string The rendered shortcode HTML.
  */
@@ -760,6 +807,10 @@ function fictioneer_shortcode_contact_form( $attr ) {
   $email = $attr['email'] ?? '';
   $name = $attr['name'] ?? '';
   $fields = [];
+  $classes = [];
+
+  // Extra classes
+  if ( ! empty( $attr['class'] ) ) $classes[] = esc_attr( wp_strip_all_tags( $attr['class'] ) );
 
   // HTML snippets
   if ( ! empty( $email ) ) {
@@ -810,7 +861,7 @@ function fictioneer_shortcode_contact_form( $attr ) {
    */
 
   // Start HTML ---> ?>
-  <form class="contact-form">
+  <form class="contact-form <?php echo implode( ' ', $classes ); ?>">
     <div class="contact-form__message">
       <textarea class="contact-form__textarea adaptive-textarea" style="opacity: 0;" name="message" maxlength="65525" placeholder="<?php _e( 'Please enter your message.', 'fictioneer' ); ?>" required></textarea>
     </div>
diff --git a/partials/_latest-chapters-compact.php b/partials/_latest-chapters-compact.php
index 6479a34f..8edbf497 100644
--- a/partials/_latest-chapters-compact.php
+++ b/partials/_latest-chapters-compact.php
@@ -15,6 +15,7 @@
  * @internal $args['spoiler']  Whether to obscure or show chapter excerpt.
  * @internal $args['source']   Whether to show author and story.
  * @internal $args['post_ids'] Comma-separated list of chapter IDs. Overrides count.
+ * @internal $args['class']    Additional classes.
  */
 ?>
 
@@ -42,7 +43,7 @@ $entries = new WP_Query( $query_args );
 
 ?>
 
-<section class="small-card-block latest-chapters latest-chapters--compact">
+<section class="small-card-block latest-chapters _compact <?php echo implode( ' ', $args['classes'] ); ?>">
   <?php if ( $entries->have_posts() ) : ?>
 
     <ul class="two-columns _collapse-on-mobile">
diff --git a/partials/_latest-chapters.php b/partials/_latest-chapters.php
index a4b57220..1bb7f8b4 100644
--- a/partials/_latest-chapters.php
+++ b/partials/_latest-chapters.php
@@ -16,6 +16,7 @@
  * @internal $args['source']   Whether to show author and story.
  * @internal $args['post_ids'] Comma-separated list of chapter IDs. Overrides count.
  * @internal $args['simple']   Whether to show the simple variant.
+ * @internal $args['class']    Additional classes.
  */
 ?>
 
@@ -43,7 +44,7 @@ $entries = new WP_Query( $query_args );
 
 ?>
 
-<section class="small-card-block latest-chapters">
+<section class="small-card-block latest-chapters <?php echo implode( ' ', $args['classes'] ); ?>">
   <?php if ( $entries->have_posts() ) : ?>
 
     <ul class="two-columns _collapse-on-mobile">
diff --git a/partials/_latest-posts.php b/partials/_latest-posts.php
index 00ae19b5..43c0703a 100644
--- a/partials/_latest-posts.php
+++ b/partials/_latest-posts.php
@@ -11,6 +11,7 @@
  * @internal $args['author']   The author provided by the shortcode.
  * @internal $args['count']    The number of posts provided by the shortcode.
  * @internal $args['post_ids'] Comma-separated list of post IDs. Overrides count.
+ * @internal $args['class']    Additional classes.
  */
 ?>
 
@@ -38,7 +39,7 @@ $latest_entries = new WP_Query( $query_args );
 
 ?>
 
-<section class="latest-posts">
+<section class="latest-posts <?php echo implode( ' ', $args['classes'] ); ?>">
   <?php if ( $latest_entries->have_posts() ) : ?>
 
     <?php while ( $latest_entries->have_posts() ) : $latest_entries->the_post(); ?>
diff --git a/partials/_latest-recommendations-compact.php b/partials/_latest-recommendations-compact.php
index de74df87..51431c79 100644
--- a/partials/_latest-recommendations-compact.php
+++ b/partials/_latest-recommendations-compact.php
@@ -40,7 +40,7 @@ $entries = new WP_Query( $query_args );
 
 ?>
 
-<section class="small-card-block latest-recommendations latest-recommendations--compact">
+<section class="small-card-block latest-recommendations _compact <?php echo implode( ' ', $args['classes'] ); ?>">
   <?php if ( $entries->have_posts() ) : ?>
 
     <ul class="two-columns _collapse-on-mobile">
diff --git a/partials/_latest-recommendations.php b/partials/_latest-recommendations.php
index d98dbbbf..ce23aabe 100644
--- a/partials/_latest-recommendations.php
+++ b/partials/_latest-recommendations.php
@@ -13,6 +13,7 @@
  * @internal $args['order']    Order of posts. Default 'desc'.
  * @internal $args['orderby']  Sorting of posts. Default 'date'.
  * @internal $args['post_ids'] Comma-separated list of recommendation IDs. Overrides count.
+ * @internal $args['class']    Additional classes.
  */
 ?>
 
@@ -40,7 +41,7 @@ $entries = new WP_Query( $query_args );
 
 ?>
 
-<section class="small-card-block latest-recommendations">
+<section class="small-card-block latest-recommendations <?php echo implode( ' ', $args['classes'] ); ?>">
 
   <?php if ( $entries->have_posts() ) : ?>
 
diff --git a/partials/_latest-stories-compact.php b/partials/_latest-stories-compact.php
index f9dfc132..b42601a2 100644
--- a/partials/_latest-stories-compact.php
+++ b/partials/_latest-stories-compact.php
@@ -38,7 +38,7 @@ $entries = new WP_Query( $query_args );
 
 ?>
 
-<section class="small-card-block latest-stories latest-stories--compact">
+<section class="small-card-block latest-stories _compact">
   <?php if ( $entries->have_posts() ) : ?>
 
     <ul class="two-columns _collapse-on-mobile">
diff --git a/partials/_latest-stories.php b/partials/_latest-stories.php
index a1daf09f..ecba85ab 100644
--- a/partials/_latest-stories.php
+++ b/partials/_latest-stories.php
@@ -13,6 +13,7 @@
  * @internal $args['order']    Order of posts. Default 'desc'.
  * @internal $args['orderby']  Sorting of posts. Default 'date'.
  * @internal $args['post_ids'] Comma-separated list of story IDs. Overrides count.
+ * @internal $args['class']    Additional classes.
  */
 ?>
 
@@ -38,7 +39,7 @@ $entries = new WP_Query( $query_args );
 
 ?>
 
-<section class="small-card-block latest-stories">
+<section class="small-card-block latest-stories <?php echo implode( ' ', $args['classes'] ); ?>">
   <?php if ( $entries->have_posts() ) : ?>
 
     <ul class="two-columns _collapse-on-mobile">
diff --git a/partials/_latest-updates-compact.php b/partials/_latest-updates-compact.php
index 820d1ee3..ab540a3a 100644
--- a/partials/_latest-updates-compact.php
+++ b/partials/_latest-updates-compact.php
@@ -16,6 +16,7 @@
  * @internal $args['author']   The author provided by the shortcode.
  * @internal $args['order']    Order of posts. Default 'desc'.
  * @internal $args['post_ids'] Comma-separated list of story IDs. Overrides count.
+ * @internal $args['class']    Additional classes.
  */
 ?>
 
@@ -45,7 +46,7 @@ $entries = new WP_Query( $query_args );
 
 ?>
 
-<section class="small-card-block latest-updates">
+<section class="small-card-block latest-updates <?php echo implode( ' ', $args['classes'] ); ?>">
   <?php if ( $entries->have_posts() ) : ?>
 
     <ul class="two-columns _collapse-on-mobile">
diff --git a/partials/_latest-updates.php b/partials/_latest-updates.php
index 408d852c..bd62363a 100644
--- a/partials/_latest-updates.php
+++ b/partials/_latest-updates.php
@@ -18,6 +18,7 @@
  * @internal $args['order']    Order of posts. Default 'desc'.
  * @internal $args['post_ids'] Comma-separated list of story IDs. Overrides count.
  * @internal $args['simple']   Whether to show the simple variant.
+ * @internal $args['class']    Additional classes.
  */
 ?>
 
@@ -46,7 +47,7 @@ $entries = new WP_Query( $query_args );
 
 ?>
 
-<section class="small-card-block latest-updates">
+<section class="small-card-block latest-updates <?php echo implode( ' ', $args['classes'] ); ?>">
   <?php if ( $entries->have_posts() ) : ?>
 
     <ul class="two-columns _collapse-on-mobile">
diff --git a/partials/_showcase.php b/partials/_showcase.php
index 3f79b26c..23e947ad 100644
--- a/partials/_showcase.php
+++ b/partials/_showcase.php
@@ -17,6 +17,7 @@
  * @internal $args['orderby']  Order argument. Default 'date'.
  * @internal $args['author']   Limit query to specific author. Default none.
  * @internal $args['post_ids'] Limit items to specific post IDs. Default empty array.
+ * @internal $args['class']    Additional classes.
  */
 ?>
 
@@ -42,7 +43,7 @@ $query = new WP_Query( $query_args );
 ?>
 
 <?php if ( $query->have_posts() ) : ?>
-  <section class="showcase">
+  <section class="showcase <?php echo implode( ' ', $args['classes'] ); ?>">
     <ul class="showcase__list">
       <?php while ( $query->have_posts() ) : $query->the_post(); ?>
         <li class="showcase__list-item">