wizard
2 months ago
class-page-additional-css.php
2 months ago
class-page-dashboard.php
2 months ago
class-page-form.php
2 months ago
class-page-settings.php
2 months ago
class-page-support.php
2 months ago
class-page-additional-css.php
500 lines
| 1 | <?php |
| 2 | |
| 3 | namespace SuperbAddons\Admin\Pages; |
| 4 | |
| 5 | defined('ABSPATH') || exit(); |
| 6 | |
| 7 | use SuperbAddons\Components\Admin\LinkBox; |
| 8 | use SuperbAddons\Components\Admin\ReviewBox; |
| 9 | use SuperbAddons\Admin\Controllers\DashboardController; |
| 10 | use SuperbAddons\Admin\Utils\AdminLinkSource; |
| 11 | use SuperbAddons\Components\Admin\FeatureRequestBox; |
| 12 | use SuperbAddons\Components\Admin\InputCheckbox; |
| 13 | use SuperbAddons\Components\Admin\Modal; |
| 14 | use SuperbAddons\Components\Admin\PremiumBox; |
| 15 | use SuperbAddons\Components\Admin\SupportBox; |
| 16 | use SuperbAddons\Components\Slots\CssBlocksBaseSlot; |
| 17 | use SuperbAddons\Components\Slots\CssBlocksExportSelectedSlot; |
| 18 | use SuperbAddons\Components\Slots\CssBlocksExportSingleSlot; |
| 19 | use SuperbAddons\Components\Slots\CssBlocksTargetSlot; |
| 20 | use SuperbAddons\Data\Controllers\CSSController; |
| 21 | |
| 22 | class AdditionalCSSPage |
| 23 | { |
| 24 | private $Blocks = array(); |
| 25 | private $CurrentCssBlock = false; |
| 26 | private $IsCreating = false; |
| 27 | |
| 28 | public function __construct() |
| 29 | { |
| 30 | $this->Blocks = CSSController::GetBlocks(); |
| 31 | // Determine which type of page to display |
| 32 | // phpcs:ignore WordPress.Security.NonceVerification.Recommended |
| 33 | $view_type = isset($_GET['css-edit']) ? 'edit' : (isset($_GET['css-create']) ? 'create' : 'default'); |
| 34 | if ($view_type !== 'default') { |
| 35 | if ($view_type === 'edit') { |
| 36 | // No need for nonce verification here, as the user is not submitting any data |
| 37 | // phpcs:ignore WordPress.Security.NonceVerification.Recommended |
| 38 | $css_block_id = sanitize_text_field(wp_unslash($_GET['css-edit'])); |
| 39 | $this->CurrentCssBlock = isset($this->Blocks[$css_block_id]) ? $this->Blocks[$css_block_id] : false; |
| 40 | if (!$this->CurrentCssBlock) { |
| 41 | $this->RenderMainPage(); |
| 42 | return; |
| 43 | } |
| 44 | $this->CurrentCssBlock->id = $css_block_id; |
| 45 | } else { |
| 46 | $this->IsCreating = true; |
| 47 | } |
| 48 | |
| 49 | add_action("admin_footer", array($this, 'RenderLivePreview')); |
| 50 | |
| 51 | $this->RenderEditPage(); |
| 52 | } else { |
| 53 | $this->RenderMainPage(); |
| 54 | } |
| 55 | } |
| 56 | |
| 57 | private function GetBlockStats() |
| 58 | { |
| 59 | $total = count($this->Blocks); |
| 60 | $active = 0; |
| 61 | $targets = array(); |
| 62 | foreach ($this->Blocks as $block) { |
| 63 | if (isset($block->active) && $block->active) { |
| 64 | $active++; |
| 65 | } |
| 66 | if (isset($block->selectors)) { |
| 67 | foreach ($block->selectors as $selector) { |
| 68 | if (isset($selector->type)) { |
| 69 | $targets[$selector->type] = true; |
| 70 | } |
| 71 | } |
| 72 | } |
| 73 | } |
| 74 | $has_optimized = get_option('superb_addons_optimized_css', false); |
| 75 | return array( |
| 76 | 'total' => $total, |
| 77 | 'active' => $active, |
| 78 | 'target_count' => count($targets), |
| 79 | 'is_optimized' => !empty($has_optimized), |
| 80 | ); |
| 81 | } |
| 82 | |
| 83 | private function RenderEditPage() |
| 84 | { |
| 85 | $edit_or_create = $this->IsCreating ? __("Create CSS Block", "superb-blocks") : __("Edit CSS Block", "superb-blocks"); |
| 86 | $main_page_url = admin_url("admin.php?page=" . DashboardController::ADDITIONAL_CSS); |
| 87 | $is_active = $this->IsCreating || ($this->CurrentCssBlock && $this->CurrentCssBlock->active); |
| 88 | ?> |
| 89 | <div class="superbaddons-admindashboard-content-box-large superbaddons-admindashboard-css-blocks"> |
| 90 | <!-- Editor Header --> |
| 91 | <div class="superbaddons-css-editor-header"> |
| 92 | <div class="superbaddons-css-editor-header-left"> |
| 93 | <a href="<?php echo esc_url($main_page_url); ?>" class="superbaddons-css-editor-back" aria-label="<?php echo esc_attr__("Back to CSS Blocks", "superb-blocks"); ?>"> |
| 94 | <img src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/purple-arrow-left.svg'); ?>" alt="" /> |
| 95 | </a> |
| 96 | <h3 class="superbaddons-element-text-md superbaddons-element-text-800 superbaddons-element-m0 superbaddons-element-text-dark"><?php echo esc_html($edit_or_create); ?></h3> |
| 97 | <?php if (!$this->IsCreating) : ?> |
| 98 | <?php if ($is_active) : ?> |
| 99 | <span class="superbaddons-integration-card-badge superbaddons-integration-card-badge--connected"><?php echo esc_html__("Active", "superb-blocks"); ?></span> |
| 100 | <?php else : ?> |
| 101 | <span class="superbaddons-integration-card-badge"><?php echo esc_html__("Deactivated", "superb-blocks"); ?></span> |
| 102 | <?php endif; ?> |
| 103 | <?php endif; ?> |
| 104 | </div> |
| 105 | <div class="superbaddons-css-editor-header-right"> |
| 106 | <button type="button" class="superbaddons-css-block-preview-btn superbaddons-element-button superbaddons-element-m0"> |
| 107 | <img width="20" class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/preview.svg'); ?>" /> |
| 108 | <?php echo esc_html__("Preview", "superb-blocks"); ?> |
| 109 | </button> |
| 110 | <button type="button" class="superbaddons-css-block-save-btn superbaddons-element-button spbaddons-admin-btn-success superbaddons-element-m0"> |
| 111 | <svg class="superbaddons-element-button-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"> |
| 112 | <path d="M216,91.31V208a8,8,0,0,1-8,8H176V152a8,8,0,0,0-8-8H88a8,8,0,0,0-8,8v64H48a8,8,0,0,1-8-8V48a8,8,0,0,1,8-8H164.69a8,8,0,0,1,5.65,2.34l43.32,43.31A8,8,0,0,1,216,91.31Z" opacity="0.2"></path> |
| 113 | <path d="M219.31,80,176,36.69A15.86,15.86,0,0,0,164.69,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V91.31A15.86,15.86,0,0,0,219.31,80ZM168,208H88V152h80Zm40,0H184V152a16,16,0,0,0-16-16H88a16,16,0,0,0-16,16v56H48V48H164.69L208,91.31ZM160,72a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h56A8,8,0,0,1,160,72Z"></path> |
| 114 | </svg> |
| 115 | <?php echo esc_html__("Save", "superb-blocks"); ?> |
| 116 | </button> |
| 117 | </div> |
| 118 | </div> |
| 119 | |
| 120 | <!-- Two-Panel Layout --> |
| 121 | <div class="superbaddons-css-editor-panels"> |
| 122 | <!-- Left Panel: Settings --> |
| 123 | <div class="superbaddons-css-editor-settings-panel"> |
| 124 | <!-- Block Name --> |
| 125 | <div class="superbaddons-css-editor-section"> |
| 126 | <label for="superbaddons-css-block-name-input" class="superbaddons-css-editor-section-label"> |
| 127 | <img src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/purple-file.svg'); ?>" alt="" /> |
| 128 | <?php echo esc_html__("CSS Block Name", "superb-blocks"); ?> |
| 129 | </label> |
| 130 | <input type="text" id="superbaddons-css-block-name-input" class="superbaddons-element-input" placeholder="<?php echo esc_attr__("My CSS Block", "superb-blocks"); ?>" value="<?php echo $this->CurrentCssBlock ? esc_attr($this->CurrentCssBlock->name) : ""; ?>" maxlength="<?php echo esc_attr(CSSController::BLOCK_NAME_MAX_LENGTH); ?>" /> |
| 131 | </div> |
| 132 | |
| 133 | <!-- Target --> |
| 134 | <div class="superbaddons-css-editor-section superbaddons-css-block-input-options"> |
| 135 | <label class="superbaddons-css-editor-section-label"> |
| 136 | <img src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/target-duotone.svg'); ?>" alt="" /> |
| 137 | <?php echo esc_html__("Target", "superb-blocks"); ?> |
| 138 | </label> |
| 139 | <p class="superbaddons-element-text-xxs superbaddons-element-text-gray superbaddons-element-m0 superbaddons-element-mb1"><?php echo esc_html__("Choose where this CSS will be applied. Separate CSS files are automatically generated and loaded only where needed.", "superb-blocks"); ?></p> |
| 140 | <div class="superbaddons-css-target-option superbaddons-css-target-option--active"> |
| 141 | <?php new InputCheckbox("superbaddons-css-block-target-input-website", "full", __("Entire website", "superb-blocks"), __("When enabled, your CSS block will be applied to the entire frontend of your website.", "superb-blocks"), true); ?> |
| 142 | </div> |
| 143 | <div class="superbaddons-element-specific-select-wrapper superbaddons-css-block-specific-target-inputs" style="display: none;"> |
| 144 | <div class="superbaddons-css-target-option"> |
| 145 | <?php new InputCheckbox("superbaddons-css-block-target-input-frontpage", "front", __("Front page", "superb-blocks"), __("Applies CSS block to the front page.", "superb-blocks")); ?> |
| 146 | </div> |
| 147 | <?php new CssBlocksTargetSlot(); ?> |
| 148 | </div> |
| 149 | </div> |
| 150 | |
| 151 | <!-- Block Actions (existing blocks only) --> |
| 152 | <div class="superbaddons-css-editor-section superbaddons-css-editor-danger-section superbaddons-created-css-block-options" <?php echo $this->IsCreating ? 'style="display:none;"' : ''; ?>> |
| 153 | <h5 class="superbaddons-danger-zone-title"> |
| 154 | <img src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/color-warning-octagon.svg'); ?>" width="16" alt="" /> |
| 155 | <?php echo esc_html__("Block Actions", "superb-blocks"); ?> |
| 156 | </h5> |
| 157 | <div class="superbaddons-danger-zone-item"> |
| 158 | <div class="superbaddons-danger-zone-item-info"> |
| 159 | <strong><?php echo $is_active ? esc_html__("Deactivate", "superb-blocks") : esc_html__("Activate", "superb-blocks"); ?></strong> |
| 160 | <p><?php echo esc_html__("Toggle this CSS block on or off.", "superb-blocks"); ?></p> |
| 161 | </div> |
| 162 | <?php if ($this->CurrentCssBlock && !$this->CurrentCssBlock->active) : ?> |
| 163 | <button class="superbaddons-activate-blocks-btn superbaddons-toggle-activate-blocks-btn superbaddons-element-button superbaddons-element-button-sm superbaddons-element-m0" disabled> |
| 164 | <img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/check-circle.svg'); ?>" /> |
| 165 | <?php echo esc_html__("Activate", "superb-blocks"); ?> |
| 166 | </button> |
| 167 | <?php else : ?> |
| 168 | <button class="superbaddons-deactivate-blocks-btn superbaddons-toggle-activate-blocks-btn superbaddons-element-button superbaddons-element-button-sm superbaddons-element-m0" disabled> |
| 169 | <img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/x-circle.svg'); ?>" /> |
| 170 | <?php echo esc_html__("Deactivate", "superb-blocks"); ?> |
| 171 | </button> |
| 172 | <?php endif; ?> |
| 173 | </div> |
| 174 | <div class="superbaddons-danger-zone-item"> |
| 175 | <div class="superbaddons-danger-zone-item-info"> |
| 176 | <strong><?php echo esc_html__("Export", "superb-blocks"); ?></strong> |
| 177 | <p><?php echo esc_html__("Download this CSS block.", "superb-blocks"); ?></p> |
| 178 | </div> |
| 179 | <?php new CssBlocksExportSingleSlot(); ?> |
| 180 | </div> |
| 181 | <div class="superbaddons-danger-zone-item"> |
| 182 | <div class="superbaddons-danger-zone-item-info"> |
| 183 | <strong><?php echo esc_html__("Delete", "superb-blocks"); ?></strong> |
| 184 | <p><?php echo esc_html__("Permanently delete this CSS block.", "superb-blocks"); ?></p> |
| 185 | </div> |
| 186 | <button class="superbaddons-css-block-delete-btn superbaddons-element-button spbaddons-admin-btn-danger superbaddons-element-button-sm superbaddons-element-m0"> |
| 187 | <img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/trash-light.svg'); ?>" /> |
| 188 | <?php echo esc_html__("Delete", "superb-blocks"); ?> |
| 189 | </button> |
| 190 | </div> |
| 191 | </div> |
| 192 | </div> |
| 193 | |
| 194 | <!-- Right Panel: Code Editor --> |
| 195 | <div class="superbaddons-css-editor-code-panel"> |
| 196 | <label for="superbaddons-css-block-css-input" class="superbaddons-css-editor-code-label"> |
| 197 | <img src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/purple-paint-brush.svg'); ?>" alt="" /> |
| 198 | <?php echo esc_html__("CSS", "superb-blocks"); ?> |
| 199 | </label> |
| 200 | <div class="superbaddons-css-block-errors-wrapper superbaddons-element-text-xs spbaddons-admin-text-danger" style="display:none;"> |
| 201 | <?php echo esc_html__("Your CSS Block cannot be saved while errors are present in your CSS.", "superb-blocks"); ?> |
| 202 | </div> |
| 203 | <div class="superbaddons-css-block-allow-unsafe-css-wrapper" style="display:none;"> |
| 204 | <?php new InputCheckbox("superbaddons-css-block-allow-unsafe-css", "allow-unsafe-css-action", __("Allow Unsafe CSS", "superb-blocks"), __("Your CSS contains unsafe CSS rules. Please double check that the links and URLs used in imports etc. are trusted. In order to save your CSS block containing unsafe CSS, this setting must be enabled. ", "superb-blocks"), false, '/img/color-warning-octagon.svg'); ?> |
| 205 | </div> |
| 206 | <div class="superbaddons-css-block-css-input-wrapper-outer"> |
| 207 | <div class="superbaddons-css-block-css-input-wrapper"> |
| 208 | <textarea id="superbaddons-css-block-css-input" class="superbaddons-element-textarea" rows="10"><?php echo $this->CurrentCssBlock ? esc_html($this->CurrentCssBlock->css) : ""; ?></textarea> |
| 209 | </div> |
| 210 | </div> |
| 211 | </div> |
| 212 | </div> |
| 213 | |
| 214 | <!-- Hidden cancel link for JS reference --> |
| 215 | <a href="<?php echo esc_url($main_page_url); ?>" class="superbaddons-css-block-cancel-btn" style="display:none;"></a> |
| 216 | </div> |
| 217 | <?php new Modal(); ?> |
| 218 | <?php if ($this->CurrentCssBlock) : ?> |
| 219 | <script> |
| 220 | const superbaddons_init_css_block_selectors = <?php echo wp_json_encode($this->CurrentCssBlock->selectors, JSON_HEX_TAG); ?>; |
| 221 | const superbaddons_init_css_block_id = <?php echo wp_json_encode($this->CurrentCssBlock->id, JSON_HEX_TAG); ?>; |
| 222 | </script> |
| 223 | <?php endif; ?> |
| 224 | <?php |
| 225 | } |
| 226 | |
| 227 | public function RenderLivePreview() |
| 228 | { |
| 229 | ?> |
| 230 | <div id="superbaddons-css-block-live-preview" style="display:none;"> |
| 231 | <div class="superbaddons-css-block-live-preview-container"> |
| 232 | <div class="superbaddons-css-live-preview-menu"> |
| 233 | <div class="superbaddons-css-live-preview-menu-left"> |
| 234 | <span class="superbaddons-element-text-sm superbaddons-element-text-800"><?php echo esc_html__("LIVE PREVIEW", "superb-blocks"); ?></span> |
| 235 | </div> |
| 236 | <div class="superbaddons-css-live-preview-menu-center"> |
| 237 | <button type="button" class="superbaddons-preview-device-btn superbaddons-preview-device-btn--active" data-device="desktop" aria-label="<?php echo esc_attr__("Desktop preview", "superb-blocks"); ?>"> |
| 238 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 239 | <rect x="2" y="3" width="20" height="14" rx="2" stroke="#546E7A" stroke-width="2" /> |
| 240 | <path d="M8 21h8M12 17v4" stroke="#546E7A" stroke-width="2" stroke-linecap="round" /> |
| 241 | </svg> |
| 242 | </button> |
| 243 | <button type="button" class="superbaddons-preview-device-btn" data-device="tablet" aria-label="<?php echo esc_attr__("Tablet preview", "superb-blocks"); ?>"> |
| 244 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 245 | <rect x="4" y="2" width="16" height="20" rx="2" stroke="#546E7A" stroke-width="2" /> |
| 246 | <circle cx="12" cy="18" r="1" fill="#546E7A" /> |
| 247 | </svg> |
| 248 | </button> |
| 249 | <button type="button" class="superbaddons-preview-device-btn" data-device="mobile" aria-label="<?php echo esc_attr__("Mobile preview", "superb-blocks"); ?>"> |
| 250 | <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 251 | <rect x="6" y="2" width="12" height="20" rx="2" stroke="#546E7A" stroke-width="2" /> |
| 252 | <circle cx="12" cy="18" r="1" fill="#546E7A" /> |
| 253 | </svg> |
| 254 | </button> |
| 255 | </div> |
| 256 | <div class="superbaddons-css-live-preview-menu-right"> |
| 257 | <button id="superbaddons-preview-reload-button" type="button" class="superbaddons-element-button superbaddons-element-button-small superbaddons-element-m0"> |
| 258 | <img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/arrow-clockwise-duotone.svg'); ?>" /> |
| 259 | <?php echo esc_html__("Reload", "superb-blocks"); ?> |
| 260 | </button> |
| 261 | <div class="superbaddons-live-preview-close-btn"><img src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . "/img/x.svg"); ?>" alt="<?php echo esc_attr__("Close", "superb-blocks"); ?>" /></div> |
| 262 | </div> |
| 263 | </div> |
| 264 | <p class="superbaddons-css-live-preview-tip superbaddons-element-text-xxs superbaddons-element-text-gray"><strong><?php echo esc_html__("Tip:", "superb-blocks"); ?></strong> <?php echo esc_html__("CSS changes are only visible inside this preview. Target settings are not active in preview mode.", "superb-blocks"); ?></p> |
| 265 | <p class="superbaddons-css-live-preview-tip superbaddons-element-text-xxs superbaddons-element-text-gray"><strong><?php echo esc_html__("Note:", "superb-blocks"); ?></strong> <?php echo esc_html__("Previously saved CSS is already applied to the page via a generated stylesheet. The preview adds your current editor changes on top. To see the effect of removing CSS, save the block first and then reload the preview.", "superb-blocks"); ?></p> |
| 266 | <div class="superbaddons-spinner-wrapper"> |
| 267 | <img class="spbaddons-spinner" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . "/img/blocks-spinner.svg"); ?>" /> |
| 268 | </div> |
| 269 | <div class="superbaddons-css-block-live-preview-content"> |
| 270 | <div class="superbaddons-css-block-preview-input"> |
| 271 | </div> |
| 272 | <div class="superbaddons-css-live-preview-frame-wrapper"> |
| 273 | <iframe frameborder="0" src="" data-src="<?php echo esc_url(wp_customize_url()); ?>" sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts"></iframe> |
| 274 | </div> |
| 275 | </div> |
| 276 | </div> |
| 277 | </div> |
| 278 | <?php |
| 279 | } |
| 280 | |
| 281 | private function RenderMainPage() |
| 282 | { |
| 283 | $stats = $this->GetBlockStats(); |
| 284 | $active_dot = 'superbaddons-status-dot--gray'; |
| 285 | if ($stats['active'] > 0 && $stats['active'] >= $stats['total']) { |
| 286 | $active_dot = 'superbaddons-status-dot--green'; |
| 287 | } elseif ($stats['active'] > 0) { |
| 288 | $active_dot = 'superbaddons-status-dot--yellow'; |
| 289 | } |
| 290 | $optimized_dot = $stats['is_optimized'] ? 'superbaddons-status-dot--green' : 'superbaddons-status-dot--gray'; |
| 291 | ?> |
| 292 | <!-- Status Strip --> |
| 293 | <div class="superbaddons-dashboard-welcome-strip"> |
| 294 | <span class="superbaddons-dashboard-welcome-title"><?php echo esc_html__("Custom CSS", "superb-blocks"); ?></span> |
| 295 | <div class="superbaddons-dashboard-stat-items"> |
| 296 | <span class="superbaddons-dashboard-stat-item"> |
| 297 | <span class="superbaddons-status-dot <?php echo esc_attr($active_dot); ?>"></span> |
| 298 | <?php echo esc_html(sprintf( |
| 299 | /* translators: %1$d: active count, %2$d: total count */ |
| 300 | __('%1$d/%2$d Active', 'superb-blocks'), |
| 301 | $stats['active'], |
| 302 | $stats['total'] |
| 303 | )); ?> |
| 304 | </span> |
| 305 | <span class="superbaddons-dashboard-stat-item"> |
| 306 | <span class="superbaddons-status-dot superbaddons-status-dot--purple"></span> |
| 307 | <?php echo esc_html(sprintf( |
| 308 | /* translators: %d: number of unique target types */ |
| 309 | _n('%d Target', '%d Targets', $stats['target_count'], 'superb-blocks'), |
| 310 | $stats['target_count'] |
| 311 | )); ?> |
| 312 | </span> |
| 313 | <span class="superbaddons-dashboard-stat-item"> |
| 314 | <span class="superbaddons-status-dot <?php echo esc_attr($optimized_dot); ?>"></span> |
| 315 | <?php echo esc_html__("Auto-Optimized", "superb-blocks"); ?> |
| 316 | </span> |
| 317 | </div> |
| 318 | </div> |
| 319 | |
| 320 | <div class="superbaddons-admindashboard-sidebarlayout"> |
| 321 | <div class="superbaddons-admindashboard-sidebarlayout-left"> |
| 322 | |
| 323 | <div class="superbaddons-additional-content-wrapper superbaddons-admindashboard-css-blocks"> |
| 324 | <!-- Section Header --> |
| 325 | <div class="superbaddons-css-section-header"> |
| 326 | <div class="superbaddons-dashboard-section-header"> |
| 327 | <h4 class="superbaddons-element-text-sm superbaddons-element-text-dark superbaddons-element-text-800 superbaddons-element-m0"><?php echo esc_html__("CSS Blocks", "superb-blocks"); ?></h4> |
| 328 | <?php if ($stats['total'] > 0) : ?> |
| 329 | <span class="superbaddons-dashboard-count-badge"><?php echo esc_html(sprintf( |
| 330 | /* translators: %1$d: active, %2$d: total */ |
| 331 | __('%1$d/%2$d Active', 'superb-blocks'), |
| 332 | $stats['active'], |
| 333 | $stats['total'] |
| 334 | )); ?></span> |
| 335 | <?php endif; ?> |
| 336 | </div> |
| 337 | <div class="superbaddons-css-section-actions"> |
| 338 | <a href="<?php echo esc_url(admin_url("admin.php?page=" . DashboardController::ADDITIONAL_CSS . '&css-create')); ?>" class="superbaddons-element-button superbaddons-element-m0"> |
| 339 | <img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/plus-circle.svg'); ?>" /> |
| 340 | <?php echo esc_html__("Create New", "superb-blocks"); ?> |
| 341 | </a> |
| 342 | <span class="superbaddons-vertical-separator"></span> |
| 343 | <button class="superbaddons-import-blocks-btn superbaddons-element-button superbaddons-element-m0 superbaddons-element-mr1"> |
| 344 | <img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/upload-simple-duotone.svg'); ?>" /> |
| 345 | <?php echo esc_html__("Import", "superb-blocks"); ?> |
| 346 | </button> |
| 347 | <input type="file" id="superbaddons-import-blocks-file" style="display:none;" accept=".superbaddons" multiple /> |
| 348 | <?php new CssBlocksBaseSlot(); ?> |
| 349 | </div> |
| 350 | </div> |
| 351 | |
| 352 | <?php if (empty($this->Blocks)) : ?> |
| 353 | <!-- Empty State --> |
| 354 | <div class="superbaddons-css-empty-state"> |
| 355 | <img src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/dashboard-custom-css.svg'); ?>" aria-hidden="true" /> |
| 356 | <h4 class="superbaddons-element-text-sm superbaddons-element-text-dark superbaddons-element-text-800 superbaddons-element-m0"><?php echo esc_html__("No CSS Blocks Yet", "superb-blocks"); ?></h4> |
| 357 | <p class="superbaddons-element-text-xxs superbaddons-element-text-gray superbaddons-element-m0"><?php echo esc_html__("Create your first CSS block to start customizing your website with targeted, performance-optimized CSS.", "superb-blocks"); ?></p> |
| 358 | <div class="superbaddons-css-empty-state-actions"> |
| 359 | <a href="<?php echo esc_url(admin_url("admin.php?page=" . DashboardController::ADDITIONAL_CSS . '&css-create')); ?>" class="superbaddons-element-button"> |
| 360 | <img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/plus-circle.svg'); ?>" /> |
| 361 | <?php echo esc_html__("Create Your First CSS Block", "superb-blocks"); ?> |
| 362 | </a> |
| 363 | <span class="superbaddons-vertical-separator"></span> |
| 364 | <button class="superbaddons-import-blocks-btn superbaddons-element-button"> |
| 365 | <img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/upload-simple-duotone.svg'); ?>" /> |
| 366 | <?php echo esc_html__("Import CSS Blocks", "superb-blocks"); ?> |
| 367 | </button> |
| 368 | </div> |
| 369 | <!-- Feature Highlights --> |
| 370 | <div class="superbaddons-css-feature-highlights"> |
| 371 | <div class="superbaddons-css-feature-highlight-card"> |
| 372 | <img src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/target-duotone.svg'); ?>" aria-hidden="true" /> |
| 373 | <h5 class="superbaddons-element-text-xs superbaddons-element-text-dark superbaddons-element-text-800 superbaddons-element-m0"><?php echo esc_html__("Smart Targeting", "superb-blocks"); ?></h5> |
| 374 | <p class="superbaddons-element-text-xxs superbaddons-element-text-gray superbaddons-element-m0"><?php echo esc_html__("Load CSS only where it's needed. Target specific pages, posts, templates, or the entire site.", "superb-blocks"); ?></p> |
| 375 | </div> |
| 376 | <div class="superbaddons-css-feature-highlight-card"> |
| 377 | <img src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/purple-gauge.svg'); ?>" aria-hidden="true" /> |
| 378 | <h5 class="superbaddons-element-text-xs superbaddons-element-text-dark superbaddons-element-text-800 superbaddons-element-m0"><?php echo esc_html__("Auto-Optimized", "superb-blocks"); ?></h5> |
| 379 | <p class="superbaddons-element-text-xxs superbaddons-element-text-gray superbaddons-element-m0"><?php echo esc_html__("CSS is automatically minified and compiled into separate files per target for maximum performance.", "superb-blocks"); ?></p> |
| 380 | </div> |
| 381 | <div class="superbaddons-css-feature-highlight-card"> |
| 382 | <img src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/purple-eye.svg'); ?>" aria-hidden="true" /> |
| 383 | <h5 class="superbaddons-element-text-xs superbaddons-element-text-dark superbaddons-element-text-800 superbaddons-element-m0"><?php echo esc_html__("Live Preview", "superb-blocks"); ?></h5> |
| 384 | <p class="superbaddons-element-text-xxs superbaddons-element-text-gray superbaddons-element-m0"><?php echo esc_html__("See your CSS changes in real-time with the built-in live previewer before publishing.", "superb-blocks"); ?></p> |
| 385 | </div> |
| 386 | </div> |
| 387 | </div> |
| 388 | <?php else : ?> |
| 389 | <!-- Block Card Grid --> |
| 390 | <div class="superbaddons-css-block-grid"> |
| 391 | <?php foreach ($this->Blocks as $block_id => $block) : ?> |
| 392 | <div class="superbaddons-css-block-card <?php echo $block->active ? 'superbaddons-css-block-card--active' : 'superbaddons-css-block-card--deactivated'; ?>" data-id="<?php echo esc_attr($block_id); ?>"> |
| 393 | <div class="superbaddons-css-block-card-checkbox"> |
| 394 | <?php new InputCheckbox("superbaddons-css-block-select-" . sanitize_title($block->name), "select-single", false, false, false); ?> |
| 395 | </div> |
| 396 | <a href="<?php echo esc_url(admin_url("admin.php?page=" . DashboardController::ADDITIONAL_CSS . '&css-edit=' . $block_id)); ?>" class="superbaddons-css-block-card-body"> |
| 397 | <img class="superbaddons-css-block-card-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/purple-file.svg'); ?>" aria-hidden="true" /> |
| 398 | <div class="superbaddons-css-block-card-info"> |
| 399 | <strong class="superbaddons-element-text-xxs superbaddons-element-text-dark"><?php echo esc_html($block->name); ?></strong> |
| 400 | <div class="superbaddons-css-block-card-targets"> |
| 401 | <img src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/target-duotone.svg'); ?>" aria-hidden="true" /> |
| 402 | <span class="superbaddons-element-text-xxs superbaddons-element-text-gray"><?php echo esc_html($this->GetTargetLabels($block)); ?></span> |
| 403 | </div> |
| 404 | </div> |
| 405 | <?php if ($block->active) : ?> |
| 406 | <span class="superbaddons-integration-card-badge superbaddons-integration-card-badge--connected"><?php echo esc_html__("Active", "superb-blocks"); ?></span> |
| 407 | <?php else : ?> |
| 408 | <span class="superbaddons-integration-card-badge"><?php echo esc_html__("Deactivated", "superb-blocks"); ?></span> |
| 409 | <?php endif; ?> |
| 410 | </a> |
| 411 | </div> |
| 412 | <?php endforeach; ?> |
| 413 | </div> |
| 414 | |
| 415 | <!-- Bulk Actions Bar --> |
| 416 | <div class="superbaddons-css-bulk-actions" style="display:none;"> |
| 417 | <div class="superbaddons-css-bulk-actions-inner"> |
| 418 | <img class="superbaddons-css-bulk-actions-arrow" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/arrow-elbow-left-up.svg'); ?>" aria-hidden="true" /> |
| 419 | <?php new InputCheckbox("superbaddons-css-block-select-all", "select-all", __("Select All", "superb-blocks"), false, false); ?> |
| 420 | <span class="superbaddons-vertical-separator"></span> |
| 421 | <button class="superbaddons-activate-blocks-btn superbaddons-element-button superbaddons-element-m0" disabled> |
| 422 | <img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/check-circle.svg'); ?>" /> |
| 423 | <?php echo esc_html__("Activate", "superb-blocks"); ?> |
| 424 | </button> |
| 425 | <span class="superbaddons-vertical-separator"></span> |
| 426 | <button class="superbaddons-deactivate-blocks-btn superbaddons-element-button superbaddons-element-m0" disabled> |
| 427 | <img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/x-circle.svg'); ?>" /> |
| 428 | <?php echo esc_html__("Deactivate", "superb-blocks"); ?> |
| 429 | </button> |
| 430 | <span class="superbaddons-vertical-separator"></span> |
| 431 | <?php new CssBlocksExportSelectedSlot(); ?> |
| 432 | <span class="superbaddons-vertical-separator"></span> |
| 433 | <button class="superbaddons-delete-blocks-btn superbaddons-element-button spbaddons-admin-btn-danger superbaddons-element-m0" disabled> |
| 434 | <img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/trash-light.svg'); ?>" /> |
| 435 | <?php echo esc_html__("Delete", "superb-blocks"); ?> |
| 436 | </button> |
| 437 | </div> |
| 438 | </div> |
| 439 | <?php endif; ?> |
| 440 | </div> |
| 441 | |
| 442 | <!-- Link Boxes --> |
| 443 | <div class="superbaddons-admindashboard-linkbox-wrapper"> |
| 444 | <?php |
| 445 | new LinkBox( |
| 446 | array( |
| 447 | "icon" => "question.svg", |
| 448 | "title" => __("Help & Tutorials", "superb-blocks"), |
| 449 | "description" => __("We have put together detailed documentation that walks you through every step of the process, from installation to customization.", "superb-blocks"), |
| 450 | "cta" => __("View tutorials", "superb-blocks"), |
| 451 | "link" => admin_url('admin.php?page=' . DashboardController::SUPPORT), |
| 452 | "same_window" => true, |
| 453 | ) |
| 454 | ); |
| 455 | new FeatureRequestBox(); |
| 456 | ?> |
| 457 | </div> |
| 458 | </div> |
| 459 | <div class="superbaddons-admindashboard-sidebarlayout-right"> |
| 460 | <?php |
| 461 | new PremiumBox(AdminLinkSource::CSS); |
| 462 | new SupportBox(); |
| 463 | new ReviewBox(); |
| 464 | ?> |
| 465 | </div> |
| 466 | </div> |
| 467 | <?php new Modal(); ?> |
| 468 | <?php |
| 469 | } |
| 470 | |
| 471 | private function GetTargetLabels($block) |
| 472 | { |
| 473 | $valid_labels = apply_filters( |
| 474 | 'superbaddons_css_block_target_valid_labels', |
| 475 | array( |
| 476 | "front" => __("Front Page", "superb-blocks"), |
| 477 | "full" => __("Entire Website", "superb-blocks") |
| 478 | ) |
| 479 | ); |
| 480 | |
| 481 | $labels = array(); |
| 482 | foreach ($block->selectors as $target) { |
| 483 | if (!isset($valid_labels[$target->type]) || !$valid_labels[$target->type]) |
| 484 | continue; |
| 485 | |
| 486 | $labels[] = !empty($target->value) ? sprintf( |
| 487 | /* translators: %s: Target post type (page, post, template etc.) */ |
| 488 | __("Specific %s", "superb-blocks"), |
| 489 | $valid_labels[$target->type] |
| 490 | ) : $valid_labels[$target->type]; |
| 491 | } |
| 492 | |
| 493 | if (empty($labels)) { |
| 494 | return __("Not Applied", "superb-blocks"); |
| 495 | } |
| 496 | |
| 497 | return rtrim(join(", ", $labels), ", "); |
| 498 | } |
| 499 | } |
| 500 |