Add optional sidebar column

2024-08-04 23:48:09 +02:00 · 2024-08-04 23:48:09 +02:00 · 6d977f374b
commit 6d977f374b
parent 4ac50db1a8
19 changed files with 625 additions and 25 deletions
--- a/ACTIONS.md
+++ b/ACTIONS.md
@ -684,6 +684,7 @@ Fires after opening the site’s `<main>` container.
 **Hooked Actions:**
 * `fictioneer_main_observer()` – Renders the main observer element. Priority 1.
 * `fictioneer_page_background()` – Renders the page background. Priority 10.
+* `fictioneer_sidebar() – Renders the sidebar if enabled. Priority 10.

 ---

--- a/DOCUMENTATION.md
+++ b/DOCUMENTATION.md
@ -194,6 +194,12 @@ The theme has two menu locations: Navigation and Footer Menu. You can create and
 * `hide-if-logged-in` - Hides the menu item if the user is logged in.
 * `hide-if-logged-out` - Hides the menu item if the user is logged out.

+## Sidebar
+
+You can enable the optional sidebar under **Appearance > Customize > Layout**, choosing either left or right alignment along with other options. Typically, this also requires some manual adjustments to the layout. Increasing the site width is recommended to accommodate the new column; 1100px is a good start for a 256px wide sidebar.
+
+Enabling the sidebar also reduces the default page padding, which can be overridden further down with custom layout properties. If space becomes an issue, consider reducing the horizontal page padding to zero and turning off the page background for an open site appearance.
+
 ## Stories

 Stories are added under **Stories > Add New**. Required fields are the short description, status, and age rating. You should be thorough with the setup, especially the taxonomies if you have more than a few stories on your site, because they can be searched for. Just avoid adding excessive lists of tags. Also note that stories are not supposed to be used like chapters, for example as oneshot, because they lack all chapter features, including comments.
@ -467,6 +473,7 @@ These fields and options are available in most post types, which does not mean t
 | Patreon Amount Cents | Number | Patreon pledge threshold to ignore the password protection (if set up).
 | Expire Post Password | Date | Choose a date and time to automatically remove the post password (set your time zone).
 | Disable new comments | Check | Disable new comments but keep the current ones visible.
+| Disable sidebar | Check | Disable the sidebar on this post or page (if any).

 ### SEO & Meta Tags

--- a/css/application.css
+++ b/css/application.css
--- a/css/complete.css
+++ b/css/complete.css
--- a/css/editor.css
+++ b/css/editor.css
--- a/css/properties.css
+++ b/css/properties.css
--- a/functions.php
+++ b/functions.php
@ -5,9 +5,9 @@
 // =============================================================================

 // Version
-define( 'FICTIONEER_VERSION', '5.22.0-beta2' );
+define( 'FICTIONEER_VERSION', '5.22.0-beta3' );
 define( 'FICTIONEER_MAJOR_VERSION', '5' );
-define( 'FICTIONEER_RELEASE_TAG', 'v5.22.0-beta2' );
+define( 'FICTIONEER_RELEASE_TAG', 'v5.22.0-beta3' );

 if ( ! defined( 'CHILD_VERSION' ) ) {
  define( 'CHILD_VERSION', null );
--- a/includes/functions/_customizer-settings.php
+++ b/includes/functions/_customizer-settings.php
@ -1404,6 +1404,178 @@ function fictioneer_add_layout_customizer_settings( $manager ) {
    )
  );

+  // Sidebar style
+  $manager->add_setting(
+    'sidebar_style',
+    array(
+      'capability' => 'edit_theme_options',
+      'sanitize_callback' => 'sanitize_text_field',
+      'default' => 'none'
+    )
+  );
+
+  $sidebar_styles = array(
+    'none' => _x( 'None (Default)', 'Customizer sidebar style option.', 'fictioneer' ),
+    'left' => _x( 'Left', 'Customizer header sidebar option.', 'fictioneer' ),
+    'right' => _x( 'Right', 'Customizer header sidebar option.', 'fictioneer' )
+  );
+
+  $manager->add_control(
+    'sidebar_style',
+    array(
+      'type' => 'select',
+      'priority' => 10,
+      'section' => 'layout',
+      'label' => __( 'Sidebar', 'fictioneer' ),
+      'description' => __( 'Choose whether and where to render the sidebar. You can set it up under Widgets.', 'fictioneer' ),
+      'choices' => apply_filters( 'fictioneer_filter_customizer_sidebar_style', $sidebar_styles )
+    )
+  );
+
+  // Sidebar width
+  $manager->add_setting(
+    'sidebar_width',
+    array(
+      'capability' => 'edit_theme_options',
+      'sanitize_callback' => 'absint',
+      'default' => 256
+    )
+  );
+
+  $manager->add_control(
+    'sidebar_width',
+    array(
+      'type' => 'number',
+      'priority' => 10,
+      'section' => 'layout',
+      'label' => __( 'Sidebar Width', 'fictioneer' ),
+      'description' => __( 'Width of the sidebar in pixels. Default 256.', 'fictioneer' ),
+      'input_attrs' => array(
+        'placeholder' => '256',
+        'style' => 'width: 80px',
+        'min' => 100
+      )
+    )
+  );
+
+  // Sidebar gap
+  $manager->add_setting(
+    'sidebar_gap',
+    array(
+      'capability' => 'edit_theme_options',
+      'sanitize_callback' => 'absint',
+      'default' => 48
+    )
+  );
+
+  $manager->add_control(
+    'sidebar_gap',
+    array(
+      'type' => 'number',
+      'priority' => 10,
+      'section' => 'layout',
+      'label' => __( 'Sidebar Gap', 'fictioneer' ),
+      'description' => __( 'Gap between sidebar and content in pixels. Default 48.', 'fictioneer' ),
+      'input_attrs' => array(
+        'placeholder' => '48',
+        'style' => 'width: 80px',
+        'min' => 0
+      )
+    )
+  );
+
+  // Disable story sidebar
+  $manager->add_setting(
+    'sidebar_disable_in_stories',
+    array(
+      'capability' => 'edit_theme_options',
+      'default'=> 0
+    )
+  );
+
+  $manager->add_control(
+    new WP_Customize_Color_Control(
+      $manager,
+      'sidebar_disable_in_stories',
+      array(
+        'type' => 'checkbox',
+        'priority' => 10,
+        'label' => __( 'Disable sidebar in stories', 'fictioneer' ),
+        'section' => 'layout',
+        'settings' => 'sidebar_disable_in_stories'
+      )
+    )
+  );
+
+  // Disable chapter sidebar
+  $manager->add_setting(
+    'sidebar_disable_in_chapters',
+    array(
+      'capability' => 'edit_theme_options',
+      'default'=> 0
+    )
+  );
+
+  $manager->add_control(
+    new WP_Customize_Color_Control(
+      $manager,
+      'sidebar_disable_in_chapters',
+      array(
+        'type' => 'checkbox',
+        'priority' => 10,
+        'label' => __( 'Disable sidebar in chapters', 'fictioneer' ),
+        'section' => 'layout',
+        'settings' => 'sidebar_disable_in_chapters'
+      )
+    )
+  );
+
+  // Disable collection sidebar
+  $manager->add_setting(
+    'sidebar_disable_in_collections',
+    array(
+      'capability' => 'edit_theme_options',
+      'default'=> 0
+    )
+  );
+
+  $manager->add_control(
+    new WP_Customize_Color_Control(
+      $manager,
+      'sidebar_disable_in_collections',
+      array(
+        'type' => 'checkbox',
+        'priority' => 10,
+        'label' => __( 'Disable sidebar in collections', 'fictioneer' ),
+        'section' => 'layout',
+        'settings' => 'sidebar_disable_in_collections'
+      )
+    )
+  );
+
+  // Disable recommendation sidebar
+  $manager->add_setting(
+    'sidebar_disable_in_recommendations',
+    array(
+      'capability' => 'edit_theme_options',
+      'default'=> 0
+    )
+  );
+
+  $manager->add_control(
+    new WP_Customize_Color_Control(
+      $manager,
+      'sidebar_disable_in_recommendations',
+      array(
+        'type' => 'checkbox',
+        'priority' => 10,
+        'label' => __( 'Disable sidebar in recommendations', 'fictioneer' ),
+        'section' => 'layout',
+        'settings' => 'sidebar_disable_in_recommendations'
+      )
+    )
+  );
+
  // Header style
  $manager->add_setting(
    'header_style',
--- a/includes/functions/_customizer.php
+++ b/includes/functions/_customizer.php
@ -630,6 +630,7 @@ function fictioneer_build_customize_css( $context = null ) {
  $card_style = get_theme_mod( 'card_style', 'default' );
  $card_frame = get_theme_mod( 'card_frame', 'default' );
  $footer_style = get_theme_mod( 'footer_style', 'default' );
+  $sidebar_style = get_theme_mod( 'sidebar_style', 'none' );
  $css = '';

  if ( $context === 'preview' ) {
@ -714,6 +715,8 @@ function fictioneer_build_customize_css( $context = null ) {
  $font_lightness_offset_light = (int) get_theme_mod( 'font_lightness_offset_light', 0 );
  $site_width = (int) get_theme_mod( 'site_width', 960 );
  $main_offset = (int) get_theme_mod( 'main_offset', 0 );
+  $sidebar_width = (int) get_theme_mod( 'sidebar_width', 256 );
+  $sidebar_gap = (int) get_theme_mod( 'sidebar_gap', 48 );
  $logo_height = (int) get_theme_mod( 'logo_height', 210 );
  $title_min = (int) get_theme_mod( 'site_title_font_size_min', 32 );
  $title_max = (int) get_theme_mod( 'site_title_font_size_max', 60 );
@ -749,6 +752,8 @@ function fictioneer_build_customize_css( $context = null ) {
  $css .= ":root {
    --site-width: {$site_width}px;
    --main-offset: {$main_offset}px;
+    --sidebar-width: {$sidebar_width}px;
+    --sidebar-gap: {$sidebar_gap}px;
    --hue-offset: {$hue_offset_dark}deg;
    --saturation-offset: " . $saturation_offset_dark / 100 . ";
    --lightness-offset: " . $lightness_offset_dark / 100 . ";
@ -796,6 +801,13 @@ function fictioneer_build_customize_css( $context = null ) {

  // --- Custom layout ---------------------------------------------------------

+  if ( $sidebar_style !== 'none' ) {
+    $css .= ":root, :root[data-theme=base] {
+      --layout-spacing-horizontal: " . fictioneer_get_css_clamp( 20, 48, 480, $site_width ) . ";
+      --layout-spacing-horizontal-small: " . fictioneer_get_css_clamp( 10, 20, 320, 400 ) . ";
+    }";
+  }
+
  if ( get_theme_mod( 'use_custom_layout', false ) ) {
    $vertical_min = (int) get_theme_mod( 'vertical_spacing_min', 24 );
    $vertical_max = (int) get_theme_mod( 'vertical_spacing_max', 48 );
@ -815,6 +827,13 @@ function fictioneer_build_customize_css( $context = null ) {
      --layout-border-radius-small: {$small_border_radius}px;
      --chapter-list-gap: {$chapter_list_gap}px;
    }";
+
+    if ( $sidebar_style !== 'none' ) {
+      $css .= ".has-sidebar {
+        --layout-spacing-horizontal: " . fictioneer_get_css_clamp( $horizontal_min, $horizontal_max, 480, $site_width ) . ";
+        --layout-spacing-horizontal-small: " . fictioneer_get_css_clamp( $horizontal_small_min, $horizontal_small_max, 320, 400 ) . ";
+      }";
+    }
  }

  // --- Dark mode font weight adjustment --------------------------------------
--- a/includes/functions/_setup-meta-fields.php
+++ b/includes/functions/_setup-meta-fields.php
@ -3297,15 +3297,34 @@ function fictioneer_render_extra_metabox( $post ) {
  }

  // Checkbox: Disable new comments
-  if ( in_array( $post->post_type, ['post', 'page', 'fcn_story', 'fcn_chapter'] ) ) {
-    $output['flags_heading'] = '<div class="fictioneer-meta-field-heading">' .
-      _x( 'Flags', 'Metabox checkbox heading.', 'fictioneer' ) . '</div>';
+  $flag_count = 0;
+  $output['flags_heading'] = '<div class="fictioneer-meta-field-heading">' .
+    _x( 'Flags', 'Metabox checkbox heading.', 'fictioneer' ) . '</div>';

+  if ( in_array( $post->post_type, ['post', 'page', 'fcn_story', 'fcn_chapter'] ) ) {
    $output['fictioneer_disable_commenting'] = fictioneer_get_metabox_checkbox(
      $post,
      'fictioneer_disable_commenting',
      __( 'Disable new comments', 'fictioneer' )
    );
+
+    $flag_count++;
+  }
+
+  // Checkbox: Disable new comments
+  if ( current_user_can( 'manage_options' ) && get_theme_mod( 'sidebar_style', 'none' ) !== 'none' ) {
+    $output['fictioneer_disable_sidebar'] = fictioneer_get_metabox_checkbox(
+      $post,
+      'fictioneer_disable_sidebar',
+      __( 'Disable sidebar', 'fictioneer' )
+    );
+
+    $flag_count++;
+  }
+
+  // Remove Flags heading if no flags are rendered
+  if ( ! $flag_count ) {
+    unset( $output['flags_heading'] );
  }

  // --- Filters ---------------------------------------------------------------
@ -3502,6 +3521,11 @@ function fictioneer_save_extra_metabox( $post_id ) {
    $fields['fictioneer_disable_commenting'] = fictioneer_sanitize_checkbox( $_POST['fictioneer_disable_commenting'] );
  }

+  // Checkbox: Disable sidebar
+  if ( isset( $_POST['fictioneer_disable_sidebar'] ) && current_user_can( 'manage_options' ) ) {
+    $fields['fictioneer_disable_sidebar'] = fictioneer_sanitize_checkbox( $_POST['fictioneer_disable_sidebar'] );
+  }
+
  // --- Filters -----------------------------------------------------------------

  $fields = apply_filters( 'fictioneer_filter_metabox_updates_advanced', $fields, $post_id );
--- a/includes/functions/_setup-theme.php
+++ b/includes/functions/_setup-theme.php
@ -193,7 +193,7 @@ function fictioneer_register_sidebar() {
    array(
      'name' => __( 'Fictioneer Sidebar', 'fictioneer' ),
      'id' => 'fictioneer-sidebar',
-      'description' => __( 'This sidebar is not rendered by default and has no styles. It is meant to be inserted with the <code>[fictioneer_sidebar]</code> shortcode or a custom call. It can also be rendered with the Elementor plugin.', 'fictioneer' ),
+      'description' => __( 'To render this sidebar, enable it in the Customizer or insert it with the <code>[fictioneer_sidebar]</code> shortcode. It can also be rendered with the Elementor plugin.', 'fictioneer' ),
      'before_widget' => '<div id="%1$s" class="widget %2$s">',
      'after_widget' => '</div>',
      'before_title' => '<h2 class="widgettitle">',
@ -206,6 +206,48 @@ if ( ! get_option( 'fictioneer_disable_all_widgets' ) ) {
  add_action( 'widgets_init', 'fictioneer_register_sidebar' );
 }

+/**
+ * Renders sidebar
+ *
+ * @since 5.22.0
+ *
+ * @param string $context  Render context (story, chapter, etc.) of the sidebar.
+ */
+
+function fictioneer_sidebar( $context ) {
+  $post = get_post();
+  $sidebar_disabled = array(
+    'fcn_story' => get_theme_mod( 'sidebar_disable_in_stories' ),
+    'fcn_chapter' => get_theme_mod( 'sidebar_disable_in_chapters' ),
+    'fcn_collection' => get_theme_mod( 'sidebar_disable_in_collections' ),
+    'fcn_recommendation' => get_theme_mod( 'sidebar_disable_in_recommendations' )
+  );
+  $is_sidebar_disabled = false;
+
+  if ( isset( $sidebar_disabled[ $post->post_type ] ) && $sidebar_disabled[ $post->post_type ] ) {
+    $is_sidebar_disabled = true;
+  }
+
+  // Do not render sidebar if...
+  if (
+    get_theme_mod( 'sidebar_style', 'none' ) === 'none' ||
+    get_post_meta( $post->ID, 'fictioneer_disable_sidebar', true ) ||
+    $is_sidebar_disabled
+  ) {
+    return;
+  }
+
+  // Start HTML ---> ?>
+  <aside class="fictioneer-sidebar _layout">
+    <div class="fictioneer-sidebar__wrapper _layout padding-top padding-bottom"><?php dynamic_sidebar( 'fictioneer-sidebar' ); ?></div>
+  </aside>
+  <?php // <--- End HTML
+}
+
+if ( ! get_option( 'fictioneer_disable_all_widgets' ) && is_active_sidebar( 'fictioneer-sidebar' ) ) {
+  add_action( 'fictioneer_main', 'fictioneer_sidebar' );
+}
+
 // =============================================================================
 // AFTER UPDATE
 // =============================================================================
@ -562,6 +604,7 @@ function fictioneer_root_attributes() {

 function fictioneer_add_classes_to_body( $classes ) {
  // Setup
+  $post = get_post();
  $user = wp_get_current_user();
  $includes = [];

@ -602,6 +645,34 @@ function fictioneer_add_classes_to_body( $classes ) {
    $classes[] = 'content-list-style-' . get_theme_mod( 'content_list_style' );
  }

+  // Sidebar
+  $sidebar_style = get_theme_mod( 'sidebar_style', 'none' );
+  $sidebar_disabled = array(
+    'fcn_story' => get_theme_mod( 'sidebar_disable_in_stories' ),
+    'fcn_chapter' => get_theme_mod( 'sidebar_disable_in_chapters' ),
+    'fcn_collection' => get_theme_mod( 'sidebar_disable_in_collections' ),
+    'fcn_recommendation' => get_theme_mod( 'sidebar_disable_in_recommendations' )
+  );
+  $is_sidebar_disabled = false;
+
+  if ( isset( $sidebar_disabled[ $post->post_type ] ) && $sidebar_disabled[ $post->post_type ] ) {
+    $is_sidebar_disabled = true;
+  }
+
+  if (
+    $sidebar_style !== 'none' &&
+    ! get_option( 'fictioneer_disable_all_widgets' ) &&
+    is_active_sidebar( 'fictioneer-sidebar' ) &&
+    ! get_post_meta( $post->ID, 'fictioneer_disable_sidebar', true ) &&
+    ! $is_sidebar_disabled
+  ) {
+    $classes[] = 'has-sidebar';
+
+    if ( $sidebar_style === 'right' ) {
+      $classes[] = 'has-sidebar-right';
+    }
+  }
+
  // Continue filter
  return $classes;
 }
--- a/readme.txt
+++ b/readme.txt
@ -7,7 +7,7 @@ Contributors: tetrakern
 Requires at least: 6.1.0
 Tested up to: 6.6.1
 Requires PHP: 7.4
-Stable tag: 5.22.0-beta2
+Stable tag: 5.22.0-beta3
 License: GNU General Public License v3.0 or later
 License URI: http://www.gnu.org/licenses/gpl.html

--- a/src/scss/_minimal.scss
+++ b/src/scss/_minimal.scss
@ -113,4 +113,13 @@
  .padding-bottom {
    padding-bottom: var(--layout-spacing-vertical-minimal);
  }
+
+  .has-sidebar {
+    --layout-spacing-horizontal: var(--layout-spacing-horizontal-minimal);
+    --layout-spacing-horizontal-small: var(--layout-spacing-horizontal-minimal);
+
+    @include bp(desktop) {
+      --layout-spacing-horizontal-minimal: 48px;
+    }
+  }
 }
--- a/src/scss/_sidebar.scss
+++ b/src/scss/_sidebar.scss
@ -3,13 +3,24 @@

  &.widget_block .wp-block-heading {
    font-size: 1.1em;
-    margin-bottom: -1.5rem;
  }

  .widgettitle {
    font-size: 1.1em;
    margin-bottom: .625rem;
  }
+
+  &:where(:not(:last-child)) {
+    margin-bottom: var(--layout-widget-spacing);
+
+    &:where(:has(.wp-block-heading)) {
+      margin-bottom: .6rem;
+    }
+  }
+
+  .wp-block-separator {
+    margin: 0;
+  }
 }

 .widget_meta {
@ -27,3 +38,133 @@
  }
 }

+.has-sidebar {
+  --layout-spacing-horizontal: #{get_clamp(20, 48, 480, $full-width)};
+  --layout-spacing-horizontal-small: #{get_clamp(10, 20, 320, 400)};
+
+  &:where(:not(.has-sidebar-right)) {
+    .main__wrapper {
+      order: 1;
+
+      @include bp(desktop) {
+        order: 2;
+      }
+
+      .padding-left {
+        @include bp(desktop) {
+          order: 2;
+          padding-left: var(--sidebar-gap, 3rem);
+        }
+      }
+    }
+
+    .fictioneer-sidebar._layout {
+      order: 2;
+
+      @include bp(desktop) {
+        order: 1;
+      }
+    }
+  }
+
+  &.has-sidebar-right {
+    .main__wrapper {
+      order: 1;
+
+      .padding-right {
+        @include bp(desktop) {
+          padding-right: var(--sidebar-gap, 3rem);
+        }
+      }
+    }
+
+    .fictioneer-sidebar._layout {
+      order: 2;
+
+      .fictioneer-sidebar__wrapper {
+        @include bp(desktop) {
+          padding: var(--layout-spacing-vertical) var(--layout-spacing-horizontal) var(--layout-spacing-vertical) 0;
+        }
+      }
+    }
+  }
+
+  .fictioneer-sidebar__wrapper._layout {
+    padding: var(--layout-spacing-vertical) var(--layout-spacing-horizontal-small);
+    min-width: calc(var(--sidebar-width) + var(--layout-spacing-horizontal-small));
+
+    @include bp(400px) {
+      padding: var(--layout-spacing-vertical) var(--layout-spacing-horizontal);
+      min-width: calc(var(--sidebar-width) + var(--layout-spacing-horizontal));
+    }
+
+    @include bp(desktop) {
+      padding: var(--layout-spacing-vertical) 0 var(--layout-spacing-vertical) var(--layout-spacing-horizontal);
+    }
+  }
+
+  .main {
+    display: flex;
+    flex-direction: column;
+
+    @include bp(desktop) {
+      flex-direction: row;
+      min-width: calc(640px + var(--sidebar-width));
+    }
+
+    &__wrapper {
+      flex: 999999 1 auto;
+
+      @include bp(desktop) {
+        max-width: calc(100% - var(--sidebar-width));
+      }
+    }
+  }
+
+  .current-reading::after,
+  .selected-paragraph::after {
+    border-radius: var(--layout-border-radius-small);
+
+    @include bp(desktop) {
+      max-width: calc(100% + var(--layout-spacing-horizontal));
+    }
+  }
+
+  .current-bookmark::before {
+    @include bp(desktop) {
+      max-width: calc(100% + var(--layout-spacing-horizontal));
+    }
+  }
+}
+
+.fictioneer-sidebar,
+.elementor-widget-sidebar {
+  position: relative;
+  z-index: 1;
+  flex: 1 1 100%;
+
+  @include bp(desktop) {
+    flex: 1 0 var(--sidebar-width);
+    padding-top: var(--page-inset-top);
+  }
+
+  &__wrapper,
+  .elementor-widget-container {
+    container-type: inline-size;
+  }
+}
+
+.fictioneer-sidebar._layout,
+.elementor-widget-sidebar {
+  .widget {
+    --block-latest-posts-title-font-size: 1.1em;
+    color: var(--fg-700);
+  }
+
+  .wp-block-latest-posts {
+    @include bp(desktop) {
+      --this-row-gap: 1.25rem;
+      --this-col-gap: 1.25rem;
+    }
+  }
+}
--- a/src/scss/common/_blocks.scss
+++ b/src/scss/common/_blocks.scss
@ -730,6 +730,8 @@ figure.wp-block-pullquote:where(:not(.no-theme-style)) {
 // =============================================================================

 .wp-block-calendar:where(:not(.no-theme-style)) {
+  float: none !important;
+  text-align: center;
  container-type: inline-size;

  :is(.wp-calendar-table, .wp-calendar-nav) {
@ -743,6 +745,8 @@ figure.wp-block-pullquote:where(:not(.no-theme-style)) {
  :is(th, td) {
    font-size: inherit;
    text-align: center;
+    padding: .25em;
+    border: 1px solid;
  }

  th {
@ -764,10 +768,19 @@ figure.wp-block-pullquote:where(:not(.no-theme-style)) {
    }
  }

+  .wp-calendar-table {
+    border-collapse: collapse;
+    width: 100%;
+  }
+
  .wp-calendar-nav {
    color: var(--calendar-color);
    padding-top: .25em;

+    i {
+      opacity: .8;
+    }
+
    a {
      color: var(--widget-link-color);

@ -803,6 +816,7 @@ figure.wp-block-pullquote:where(:not(.no-theme-style)) {
  --this-row-gap: calc(var(--grid-columns-row-gap, 1.5rem) * var(--grid-columns-row-gap-multiplier, 1) + .5rem);
  --this-col-gap: calc(var(--grid-columns-col-gap, 1.5rem) * var(--grid-columns-col-gap-multiplier, 1) + .5rem);
  gap: var(--this-row-gap) var(--this-col-gap);
+  padding-left: 0;

  &.has-background {
    padding: var(--this-col-gap) var(--this-row-gap);
@ -867,9 +881,9 @@ figure.wp-block-pullquote:where(:not(.no-theme-style)) {
    container-type: inline-size; // Enable container query units

    > * {
-      font-family: var(--ff-card-body);
-      font-size: var(--card-content-font-size, clamp(13.5px + var(--card-font-size-min-mod, 0px), 3.125cqw + var(--card-font-size-grow-mod, 0px), 15px + var(--card-font-size-max-mod, 0px)));
-      line-height: var(--card-line-height, 1.45);
+      font-family: var(--ff-note);
+      font-size: var(--block-latest-posts-content-font-size, clamp(13.5px, 3.125cqw, 15px));
+      line-height: var(--block-latest-posts-line-height, 1.45);
      overflow-wrap: break-word;
    }
  }
@ -877,16 +891,16 @@ figure.wp-block-pullquote:where(:not(.no-theme-style)) {
  .wp-block-latest-posts__post-title:is(a) {
    flex: 1 1 100%;
    display: inline-block;
-    color: var(--card-heading-link, var(--heading-link-color));
-    font: var(--font-weight-heading) 1em/1.3 var(--ff-card-title);
-    font-size: var(--card-title-font-size, clamp(15px + var(--card-font-size-min-mod, 0px), 3.765cqw + var(--card-font-size-grow-mod, 0px), 17px + var(--card-font-size-max-mod, 0px)));
+    color: var(--heading-link-color);
+    font: var(--font-weight-heading) 1em/1.3 var(--ff-heading);
+    font-size: var(--block-latest-posts-title-font-size, clamp(15px, 3.765cqw, 17px));
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;

    @container (min-width: 640px) {
-      font-size: var(--card-title-font-size, clamp(15px + var(--card-font-size-min-mod, 0px), 3.065cqw + var(--card-font-size-grow-mod, 0px), 18px + var(--card-font-size-max-mod, 0px)));
+      font-size: var(--block-latest-posts-title-font-size, clamp(15px, 3.065cqw, 18px));
    }

    &:not(:last-child) {
@ -894,7 +908,7 @@ figure.wp-block-pullquote:where(:not(.no-theme-style)) {
    }

    &:hover {
-      color: var(--card-heading-link-hover, var(--heading-link-color-hover));
+      color: var(--heading-link-color-hover);
    }
  }

@ -959,3 +973,72 @@ figure.wp-block-pullquote:where(:not(.no-theme-style)) {
    }
  }
 }
+
+// =============================================================================
+// LATEST COMMENTS
+// =============================================================================
+
+.wp-block-latest-comments:where(:not(.no-theme-style)) {
+  list-style: none;
+  padding-left: 0;
+
+  article {
+    display: inline;
+    font-family: var(--ff-card-body);
+  }
+
+  a {
+    color: var(--widget-link-color);
+
+    &:hover {
+      color: var(--widget-link-color-hover);
+    }
+  }
+
+  &.has-avatars .wp-block-latest-comments__comment {
+    min-height: 40px;
+  }
+
+  .wp-block-latest-comments__comment {
+    position: relative;
+    margin-bottom: 0;
+
+    &:where(:not(:last-child)) {
+      margin-bottom: 1rem;
+    }
+  }
+
+  .wp-block-latest-comments__comment-avatar {
+    float: left;
+    margin: 3px 8px 4px 0;
+    border-radius: var(--layout-border-radius-small);
+    height: 32px;
+    width: 32px;
+  }
+
+  .wp-block-latest-comments__comment-meta {
+    font-size: 13.5px;
+    font-weight: var(--font-weight-semi-strong);
+    line-height: 1.3;
+    margin-left: 0 !important;
+  }
+
+  .wp-block-latest-comments__comment-excerpt {
+    margin-top: .3rem;
+    margin-left: 0 !important;
+
+    p {
+      font-size: 13.5px;
+      line-height: 1.45;
+      margin: 0;
+    }
+  }
+
+  .wp-block-latest-comments__comment-date {
+    display: block;
+    color: var(--fg-800);
+    font-size: 13px;
+    font-weight: var(--font-weight-normal);
+    margin: .3rem 0;
+  }
+}
--- a/src/scss/common/_lightmode.scss
+++ b/src/scss/common/_lightmode.scss
@ -280,6 +280,9 @@
  // --inline-link-color-border: 1px solid transparent;
  // --inline-link-color-border-hover: 1px solid currentColor;

+  // --widget-link-color: inherit;
+  --widget-link-color-hover: var(--fg-300);
+
  // === COLORS - BOOKMARKS ====================================================

  --bookmark-color-alpha: #9ca3b0; // BG-500
--- a/src/scss/common/_properties.scss
+++ b/src/scss/common/_properties.scss
@ -13,7 +13,6 @@
  // === CONFIGURATION =========================================================

  --site-width: #{$full-width}px; // Overridden by theme customizer
-  --sidebar-width: 256px;
  --lightness-offset: 0; // Overridden by theme customizer
  --darken: (1 + var(--lightness-offset));
  --saturation-offset: 0; // Overridden by theme customizer
@ -34,6 +33,11 @@
    --navigation-height: 40px;
  }

+  // === SIDEBAR ===============================================================
+
+  --sidebar-width: 256px; // Overridden by theme customizer
+  --sidebar-gap: 3rem; // Overridden by theme customizer
+
  // === FONT FAMILIES =========================================================

  --ff-system: '-apple-system', 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
@ -244,6 +248,7 @@
  --layout-hr-dots-color: var(--bg-200);
  --layout-hr-border: 2px solid var(--hr-border-color, var(--layout-lineart-color));
  --layout-hr-border-dashed: 2px dashed var(--hr-border-color, var(--layout-lineart-color));
+  --layout-widget-spacing: 2rem;

  // === MINIMAL ===============================================================

--- a/src/scss/editor.scss
+++ b/src/scss/editor.scss
@ -581,9 +581,17 @@ body {
    }
  }

-  // ==============================================================================
+  // =============================================================================
+  // CALENDAR
+  // =============================================================================
+
+  .wp-block-calendar:where(:not(.no-theme-style)) {
+    float: none !important;
+  }
+
+  // =============================================================================
  // LATEST POSTS
-  // ==============================================================================
+  // =============================================================================

  .wp-block-latest-posts:where(:not(.no-theme-style)) {
    --this-row-gap: 32px;
@ -699,6 +707,63 @@ body {
    }
  }

+  // =============================================================================
+  // LATEST COMMENTS
+  // =============================================================================
+
+  .wp-block-latest-comments:where(:not(.no-theme-style)) {
+    list-style: none;
+    padding-left: 0 !important;
+
+    article {
+      display: inline;
+    }
+
+    &.has-avatars .wp-block-latest-comments__comment {
+      min-height: 40px;
+    }
+
+    .wp-block-latest-comments__comment {
+      position: relative;
+      margin-bottom: 0;
+
+      &:where(:not(:last-child)) {
+        margin-bottom: 16px;
+      }
+    }
+
+    .wp-block-latest-comments__comment-avatar {
+      float: left;
+      margin: 3px 8px 4px 0;
+      border-radius: 2px;
+      height: 32px;
+      width: 32px;
+    }
+
+    .wp-block-latest-comments__comment-meta {
+      font-size: 13.5px;
+      line-height: 1.3;
+      margin-left: 0 !important;
+    }
+
+    .wp-block-latest-comments__comment-excerpt {
+      margin-top: 6px;
+      margin-left: 0 !important;
+
+      p {
+        font-size: 13.5px;
+        line-height: 1.45;
+        margin: 0;
+      }
+    }
+
+    .wp-block-latest-comments__comment-date {
+      display: block;
+      font-size: 13px;
+      margin: 6px 0;
+    }
+  }
+
  // =============================================================================
  // LITRPG BOX
  // =============================================================================
--- a/style.css
+++ b/style.css
@ -11,12 +11,12 @@ License URI: http://www.gnu.org/licenses/gpl.html
 Requires at least: 6.1.0
 Tested up to: 6.6.1
 Requires PHP: 7.4
-Version: 5.22.0-beta2
+Version: 5.22.0-beta3
 Text Domain: fictioneer

 Description: Standalone solution for publishing and reading web fictions.

-Tags: one-column, flexible-header, custom-background, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, theme-options, threaded-comments, blog, translation-ready
+Tags: one-column, two-column, flexible-header, custom-background, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, theme-options, threaded-comments, blog, translation-ready

 Fictioneer WordPress Theme, (C) 2023 Tetrakern
 Fictioneer is distributed under the terms of the GNU GPL.