From 3eca7a79d99503fe6c733d087a8c3fe8cba324bc Mon Sep 17 00:00:00 2001 From: Utkarsh Patel Date: Tue, 18 Aug 2026 10:29:57 +0530 Subject: [PATCH] Fix control styles on the gallery settings page The Layout control and the other custom controls on the gallery settings page showed the default browser button style. The controls did not get their styles. The styles are in gallery.scss. Only the block editor imported this file. The settings page app did not import it, and the enqueued styles did not include it. To correct this: - Import gallery.scss in the settings page app. - Enqueue the built css/gallery.css on the settings page. Commit 0b0b5207 removed the gallery.scss import from the settings page app. --- css/gallery-rtl.css | 1 + css/gallery.css | 1 + js/gallery-rtl.css | 1 + js/gallery.asset.php | 2 +- js/gallery.css | 1 + php/media/class-gallery.php | 11 +++++++++++ src/js/components/settings-gallery.js | 1 + 7 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 css/gallery-rtl.css create mode 100644 css/gallery.css create mode 100644 js/gallery-rtl.css create mode 100644 js/gallery.css diff --git a/css/gallery-rtl.css b/css/gallery-rtl.css new file mode 100644 index 000000000..c621ca7be --- /dev/null +++ b/css/gallery-rtl.css @@ -0,0 +1 @@ +.radio-select{align-items:center;background:none;border:none;cursor:pointer;display:flex;margin:12px 0}.radio-select:focus{color:#007cba;outline:none}.radio-select--active{color:#007cba}.radio-select--active g{fill:#007cba!important}.radio-select__label{font-size:14px;margin-left:7px}.loading-spinner-container{align-items:center;background-color:hsla(0,0%,100%,.8);display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.components-placeholder__fieldset{justify-content:start}.colorpalette-color-label{align-items:center;display:flex;margin:8px 0}.wp-block-cloudinary-gallery .block-editor-media-placeholder .components-placeholder__label .dashicon{margin-right:8px}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender .components-placeholder__label{display:none}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender{margin-bottom:11px;margin-top:11px;min-height:auto;padding:11px}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender .components-button{margin-bottom:0} \ No newline at end of file diff --git a/css/gallery.css b/css/gallery.css new file mode 100644 index 000000000..c621ca7be --- /dev/null +++ b/css/gallery.css @@ -0,0 +1 @@ +.radio-select{align-items:center;background:none;border:none;cursor:pointer;display:flex;margin:12px 0}.radio-select:focus{color:#007cba;outline:none}.radio-select--active{color:#007cba}.radio-select--active g{fill:#007cba!important}.radio-select__label{font-size:14px;margin-left:7px}.loading-spinner-container{align-items:center;background-color:hsla(0,0%,100%,.8);display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.components-placeholder__fieldset{justify-content:start}.colorpalette-color-label{align-items:center;display:flex;margin:8px 0}.wp-block-cloudinary-gallery .block-editor-media-placeholder .components-placeholder__label .dashicon{margin-right:8px}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender .components-placeholder__label{display:none}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender{margin-bottom:11px;margin-top:11px;min-height:auto;padding:11px}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender .components-button{margin-bottom:0} \ No newline at end of file diff --git a/js/gallery-rtl.css b/js/gallery-rtl.css new file mode 100644 index 000000000..17a5f61ac --- /dev/null +++ b/js/gallery-rtl.css @@ -0,0 +1 @@ +.radio-select{align-items:center;background:none;border:none;cursor:pointer;display:flex;margin:12px 0}.radio-select:focus{color:#007cba;outline:none}.radio-select--active{color:#007cba}.radio-select--active g{fill:#007cba!important}.radio-select__label{font-size:14px;margin-right:7px}.loading-spinner-container{align-items:center;background-color:hsla(0,0%,100%,.8);display:flex;height:100%;justify-content:center;position:absolute;right:0;top:0;width:100%}.components-placeholder__fieldset{justify-content:start}.colorpalette-color-label{align-items:center;display:flex;margin:8px 0}.wp-block-cloudinary-gallery .block-editor-media-placeholder .components-placeholder__label .dashicon{margin-left:8px}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender .components-placeholder__label{display:none}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender{margin-bottom:11px;margin-top:11px;min-height:auto;padding:11px}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender .components-button{margin-bottom:0} \ No newline at end of file diff --git a/js/gallery.asset.php b/js/gallery.asset.php index 7a344f4b1..75e92a8bb 100644 --- a/js/gallery.asset.php +++ b/js/gallery.asset.php @@ -1 +1 @@ - array('wp-block-editor', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '92c1913a2ab581c0270f'); + array('wp-block-editor', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'e09fae43ef7020fbad7b'); diff --git a/js/gallery.css b/js/gallery.css new file mode 100644 index 000000000..c621ca7be --- /dev/null +++ b/js/gallery.css @@ -0,0 +1 @@ +.radio-select{align-items:center;background:none;border:none;cursor:pointer;display:flex;margin:12px 0}.radio-select:focus{color:#007cba;outline:none}.radio-select--active{color:#007cba}.radio-select--active g{fill:#007cba!important}.radio-select__label{font-size:14px;margin-left:7px}.loading-spinner-container{align-items:center;background-color:hsla(0,0%,100%,.8);display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.components-placeholder__fieldset{justify-content:start}.colorpalette-color-label{align-items:center;display:flex;margin:8px 0}.wp-block-cloudinary-gallery .block-editor-media-placeholder .components-placeholder__label .dashicon{margin-right:8px}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender .components-placeholder__label{display:none}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender{margin-bottom:11px;margin-top:11px;min-height:auto;padding:11px}.wp-block-cloudinary-gallery .block-editor-media-placeholder.is-appender .components-button{margin-bottom:0} \ No newline at end of file diff --git a/php/media/class-gallery.php b/php/media/class-gallery.php index f16d9a024..a706b2b1d 100644 --- a/php/media/class-gallery.php +++ b/php/media/class-gallery.php @@ -220,6 +220,17 @@ public function enqueue_admin_scripts() { $this->plugin->version ); + // Styles for the shared gallery controls (e.g. the Layout radio group) + // used by the settings page preview app. These live in `gallery.scss`, + // which is bundled with the `gallery` (settings) entry but is not + // auto-enqueued, so load it explicitly here. + wp_enqueue_style( + 'cloudinary-gallery-controls-css', + $this->plugin->dir_url . 'css/gallery.css', + array(), + $this->plugin->version + ); + $script = array( 'slug' => 'gallery_config', 'src' => $this->plugin->dir_url . 'js/gallery.js', diff --git a/src/js/components/settings-gallery.js b/src/js/components/settings-gallery.js index e6cb35fe1..ee889878e 100644 --- a/src/js/components/settings-gallery.js +++ b/src/js/components/settings-gallery.js @@ -13,6 +13,7 @@ import { createRoot, render, useEffect, useState } from '@wordpress/element'; /** * Internal dependencies */ +import '../../css/gallery.scss'; import GalleryControls from '../gallery-block/controls'; import { convertColors,