geoffreycrofte · geoffreycrofte · Feb 12, 2025 · Feb 12, 2025
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 - Requires at least: 5.0
 - Tested up to: 6.7
 - Requires PHP: 7.4
-- Stable tag: 1.4.1
+- Stable tag: 1.4.2
 - License: GPLv2 or later
 - License URI: https://www.gnu.org/licenses/gpl-2.0.html
 - Official WordPress link: https://wordpress.org/plugins/social-integration-for-bluesky/
@@ -118,6 +118,14 @@ No it is not, but it is under evaluation of BlueSky's Team to take part of the d
 
 ## Changelog
 
+### 1.4.2
+* **Improvements**
+ * Design decision: some styles are applied by default when the container of the widget/block is really small (image, padding size reduction mostly)
+ * Banner on the profile card is now always 3:1 ratio.
+* **Bug fix**
+ * Widget wouldn't display styles. They are now displaying them inline as a degraded solution.
+ * On the Widget in layer 2 of the feed, SVG button wouldn't display properly. It's fixed.
+
 ### 1.4.1
 * **Bug fix**
  * Custom font-size works on Layout 2 display name.

diff --git a/assets/css/bluesky-social-posts.css b/assets/css/bluesky-social-posts.css
@@ -10,7 +10,7 @@
     --bluesky-card-avatar-size: 90px;
 
     line-height: var(--bluesky-posts-custom-global-line-height, 1.25)!important;
-
+    container-type: inline-size;
 }
 
 .bluesky-social-integration-embedded-record,
@@ -276,6 +276,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    flex-shrink: 0;
     width: 42px;
     height: 42px;
     border-radius: 8px;
@@ -325,4 +326,31 @@
     --bluesky-card-txt-alt: rgb(66, 87, 108);
     --bluesky-card-border: 1px solid rgb(212, 219, 226);
     --bluesky-primary-color: #1083fe;
+}
+
+/* If the container is below 340px wide */
+@container (max-width: 340px) {
+    /* On the default layout */
+    .bluesky-social-integration-last-post.display-default .bluesky-social-integration-last-post-header .avatar {
+        width: 32px!important;
+        height: 32px!important;
+    }
+
+    /* On the layout 2 */
+    .bluesky-social-integration-last-post.display-layout_2 .bluesky-social-integration-profile-button {
+        width: 32px;
+        height: 32px;
+    }
+    .bluesky-social-integration-last-post.display-layout_2 .bluesky-social-integration-profile-button svg {
+        transform: scale(0.8);
+    }
+
+    .bluesky-social-integration-last-post.display-layout_2 .bluesky-social-integration-image {
+        padding-inline: 12px;
+    }
+
+    .bluesky-social-integration-last-post.display-layout_2 .bluesky-social-integration-image,
+    .bluesky-social-integration-last-post.display-layout_2 li {
+        padding-inline: 12px;
+    }
 }
diff --git a/assets/css/bluesky-social-profile.css b/assets/css/bluesky-social-profile.css
@@ -15,6 +15,7 @@
     border-radius: var(--bluesky-card-br);
     font-size: var(--bluesky-profile-custom-global-fs, 16px)!important;
     line-height: var(--bluesky-profile-custom-global-lh, 1.5)!important;
+    container-type: inline-size;
 }
 
 .no-banner.bluesky-social-integration-profile-card {
@@ -25,7 +26,7 @@
 
 .bluesky-social-integration-image {
     position: relative;
-    min-height: 187px; /* Banner has 3:1 ratio */
+    aspect-ratio: 3/1;
     background-image: var(--bluesky-social-integration-banner);
     background-size: cover;
 }
@@ -161,3 +162,12 @@
     --bluesky-primary-color: #1083fe;
 }
 
+/* If the container is below 340px wide */
+@container (max-width: 340px) {
+    /* On the default layout */
+    .bluesky-social-integration-profile-card {
+        --bluesky-card-avatar-size: 60px;
+        --bluesky-card-spacing: 12px;
+    }
+}
+
diff --git a/classes/BlueSky_Render_Front.php b/classes/BlueSky_Render_Front.php
@@ -34,6 +34,68 @@ private function init_hooks() {
         // Shortcodes
         add_shortcode('bluesky_profile', [$this, 'bluesky_profile_card_shortcode']);
         add_shortcode('bluesky_last_posts', [$this, 'bluesky_last_posts_shortcode']);
+
+        // Some extensions for wp_kses
+        add_filter('wp_kses_allowed_html', [$this, 'allow_svg_tags'], 10, 2);
+    }
+
+    /**
+     * Adds SVG into the post wp_kses_allowed_html in the 'post' context.
+     *
+     * @param mixed $allowed_tags
+     * @param mixed $context
+     * 
+     * @return array The initial array of the array updated.
+     */
+    function allow_svg_tags( $allowed_tags, $context ) {
+        if ( $context === 'post' ) {
+            // Add SVG support to the default allowed tags
+            $svg_elements = [
+                'svg'   => [
+                    'xmlns'      => true,
+                    'viewBox'    => true,
+                    'width'      => true,
+                    'height'     => true,
+                    'fill'       => true,
+                    'stroke'     => true,
+                    'stroke-width' => true,
+                    'class'      => true,
+                    'aria-hidden' => true,
+                    'role'       => true,
+                ],
+                'g'     => [],
+                'path'  => [
+                    'd'         => true,
+                    'fill'      => true,
+                    'stroke'    => true,
+                    'stroke-width' => true,
+                ],
+                'circle' => [
+                    'cx'        => true,
+                    'cy'        => true,
+                    'r'         => true,
+                    'fill'      => true,
+                    'stroke'    => true,
+                ],
+                'rect'   => [
+                    'x'         => true,
+                    'y'         => true,
+                    'width'     => true,
+                    'height'    => true,
+                    'fill'      => true,
+                    'stroke'    => true,
+                ],
+                'polygon' => [
+                    'points'    => true,
+                    'fill'      => true,
+                    'stroke'    => true,
+                ],
+            ];
+
+            return array_merge( $allowed_tags, $svg_elements );
+        }
+
+        return $allowed_tags;
     }
 
     /**
@@ -265,7 +327,7 @@ public function render_bluesky_posts_list( $attributes = [] ) {
             do_action('bluesky_before_post_list_empty_markup', $posts );
         ?>
 
-            <div class="bluesky-social-integration-last-post <?php echo esc_attr( $theme_class ); ?> has-no-posts">
+            <div class="bluesky-social-integration-last-post<?php echo esc_attr( $classes ); ?> has-no-posts">
                 <svg fill="none" width="64" viewBox="0 0 24 24" height="64">
                     <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M3 4a1 1 0 0 1 1-1h1a8.003 8.003 0 0 1 7.75 6.006A7.985 7.985 0 0 1 19 6h1a1 1 0 0 1 1 1v1a8 8 0 0 1-8 8v4a1 1 0 1 1-2 0v-7a8 8 0 0 1-8-8V4Zm2 1a6 6 0 0 1 6 6 6 6 0 0 1-6-6Zm8 9a6 6 0 0 1 6-6 6 6 0 0 1-6 6Z"></path>
                 </svg>
@@ -485,7 +547,7 @@ public function get_inline_custom_styles($type = 'all') {
     /**
      * Simply print the output of get_inline_custom_styles() method.
      * 
-     * @return void
+     * @return string|void
      */
     public function render_inline_custom_styles() {
         echo $this -> get_inline_custom_styles();
@@ -494,7 +556,7 @@ public function render_inline_custom_styles() {
     /**
      * Print the output of get_inline_custom_styles() only for posts
      * 
-     * @return void
+     * @return string|void
      */
     public function render_inline_custom_styles_posts() {
         echo $this -> get_inline_custom_styles('posts');
@@ -503,7 +565,7 @@ public function render_inline_custom_styles_posts() {
     /**
      * Print the output of get_inline_custom_styles() only for profile
      * 
-     * @return void
+     * @return string|void
      */
     public function render_inline_custom_styles_profile() {
         echo $this -> get_inline_custom_styles('profile');

diff --git a/classes/widgets/BlueSky_Posts_Widget.php b/classes/widgets/BlueSky_Posts_Widget.php
@@ -17,12 +17,14 @@ public function widget( $args, $instance ) {
         $api_handler = new BlueSky_API_Handler( get_option( BLUESKY_PLUGIN_OPTIONS ) );
         $bluesky = new BlueSky_Render_Front( $api_handler );
         $posts = $bluesky -> render_bluesky_posts_list();
+        $styles = $bluesky -> get_inline_custom_styles('posts');
+
 
         $output = $args['before_widget'];
         $output .= $args['before_title'] . __( 'BlueSky Latest Posts', 'social-integration-for-bluesky' ) . $args['after_title'];
         $output .= $posts;
         $output .= $args['after_widget'];
 
-        echo wp_kses( $output, wp_kses_allowed_html('post') );
+        echo wp_kses( $output, wp_kses_allowed_html('post') )  . "\n" . $styles;
     }
 }
diff --git a/classes/widgets/BlueSky_Profile_Widget.php b/classes/widgets/BlueSky_Profile_Widget.php
@@ -17,12 +17,13 @@ public function widget($args, $instance) {
         $api_handler = new BlueSky_API_Handler( get_option( BLUESKY_PLUGIN_OPTIONS ) );
         $bluesky = new BlueSky_Render_Front( $api_handler );
         $profile_card = $bluesky -> render_bluesky_profile_card();
+        $styles = $bluesky -> get_inline_custom_styles('posts');
 
         $output = $args['before_widget'];
         $output .= $args['before_title'] . __( 'BlueSky Profile', 'social-integration-for-bluesky' ) . $args['after_title'];
         $output .= $profile_card;
         $output .= $args['after_widget'];
 
-        echo wp_kses( $output, wp_kses_allowed_html('post') );
+        echo wp_kses( $output, wp_kses_allowed_html('post') ) . "\n" . $styles;
     }
 }
diff --git a/readme.txt b/readme.txt
@@ -5,7 +5,7 @@ Tags: BlueSky, Syndicate, Profile, Feed
 Requires at least: 5.0
 Tested up to: 6.7
 Requires PHP: 7.4
-Stable tag: 1.4.1
+Stable tag: 1.4.2
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 
@@ -116,6 +116,14 @@ No it is not, but it is under evaluation of BlueSky's Team to take part of the d
 
 == Changelog ==
 
+= 1.4.2 =
+* **Improvements**
+ * Design decision: some styles are applied by default when the container of the widget/block is really small (image, padding size reduction mostly)
+ * Banner on the profile card is now always 3:1 ratio.
+* **Bug fix**
+ * Widget wouldn't display styles. They are now displaying them inline as a degraded solution.
+ * On the Widget in layer 2 of the feed, SVG button wouldn't display properly. It's fixed.
+
 = 1.4.1 =
 * **Bug fix**
  * Custom font-size works on Layout 2 display name.

diff --git a/social-integration-for-bluesky.php b/social-integration-for-bluesky.php
@@ -2,7 +2,7 @@
 /*
 Plugin Name: Social Integration for BlueSky
 Description: Integrates BlueSky social features into WordPress including: Post New Articles on BlueSky for you, Shortcode for Profile Card, and Widget to display your last posts. You can also use shortcodes <code>[bluesky_profile]</code> and <code>[bluesky_last_posts]</code>.
-Version: 1.4.1
+Version: 1.4.2
 Requires at least: 5.0
 Requires PHP: 7.4
 Author: Geoffrey Crofte
@@ -18,7 +18,7 @@
     exit;
 }
 
-define( 'BLUESKY_PLUGIN_VERSION', '1.4.1' );
+define( 'BLUESKY_PLUGIN_VERSION', '1.4.2' );
 define( 'BLUESKY_PLUGIN_FILE',  __FILE__ );
 define( 'BLUESKY_PLUGIN_BASENAME', plugin_basename( __FILE__ ) );
 define( 'BLUESKY_PLUGIN_FOLDER', plugin_dir_url( __FILE__ ) );