PluginProbe ʕ •ᴥ•ʔ
Superb Addons: Blocks, Patterns, Pre-built Pages, Sliders, Popups, Free Forms, Animations & More / 3.7.0
Superb Addons: Blocks, Patterns, Pre-built Pages, Sliders, Popups, Free Forms, Animations & More v3.7.0
4.0.6 4.0.5 4.0.4 4.0.3 4.0.2 4.0.1 4.0.0 trunk 1.0.0 2.0.0 2.0.1 2.0.2 2.0.3 3.0 3.0.1 3.0.2 3.0.5 3.0.6 3.0.7 3.0.8 3.0.9 3.1.0 3.1.2 3.1.3 3.2.0 3.2.1 3.2.2 3.2.4 3.2.5 3.2.7 3.2.8 3.2.9 3.3.0 3.3.1 3.3.2 3.4.0 3.4.1 3.4.2 3.4.5 3.4.6 3.5.0 3.5.1 3.5.2 3.5.3 3.5.4 3.5.6 3.5.7 3.5.8 3.5.9 3.6.0 3.6.1 3.6.2 3.7.0 3.7.1
superb-blocks / src / admin / pages / class-page-additional-css.php
superb-blocks / src / admin / pages Last commit date
wizard 5 months ago class-page-additional-css.php 5 months ago class-page-dashboard.php 5 months ago class-page-settings.php 5 months ago class-page-support.php 5 months ago
class-page-additional-css.php
317 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 = [];
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 RenderEditPage()
58 {
59 $edit_or_create = $this->IsCreating ? __("Create CSS Block", "superb-blocks") : __("Edit CSS Block", "superb-blocks");
60 ?>
61 <div class="superbaddons-admindashboard-content-box-large superbaddons-admindashboard-css-blocks">
62 <h3 class="superbaddons-element-text-md superbaddons-element-text-800 superbaddons-element-m0 superbaddons-element-mb1 superbaddons-element-text-dark"><?php echo esc_html($edit_or_create); ?><small class="superbaddons-element-ml1 superbaddons-element-text-xs superbaddons-element-text-gray"><?php echo esc_html(($this->IsCreating || ($this->CurrentCssBlock && $this->CurrentCssBlock->active) ? "" : __("This CSS block is currently deactivated.", "superb-blocks"))); ?></small></h3>
63 <hr class="superbaddons-element-mb1" />
64
65 <div class="superbaddons-css-block-input-options superbaddons-element-mt1 superbaddons-element-mb2">
66 <label for="superbaddons-css-block-name-input" class="superbaddons-element-text-xs superbaddons-element-text-800 superbaddons-element-m0 superbaddons-element-mb1 superbaddons-element-flex-center"><img width="15" class="superbaddons-element-ml1 superbaddons-element-mr1" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/purple-file.svg'); ?>" /><?php echo esc_html__("CSS Block Name", "superb-blocks"); ?></label>
67 <input type="text" id="superbaddons-css-block-name-input" class="superbaddons-element-input superbaddons-element-mb2" 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); ?>" />
68
69 <div class="superbaddons-css-block-target-inputs-wrapper superbaddons-element-mt1">
70 <label class="superbaddons-element-text-xs superbaddons-element-text-800 superbaddons-element-m0 superbaddons-element-mb1 superbaddons-element-flex-center"><img width="25" class="superbaddons-element-mr1" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/target-duotone.svg'); ?>" /><?php echo esc_html__("Target", "superb-blocks"); ?></label>
71 <?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); ?>
72 <div class="superbaddons-element-specific-select-wrapper superbaddons-css-block-specific-target-inputs superbaddons-element-mb1" style="display: none;">
73 <?php new InputCheckbox("superbaddons-css-block-target-input-frontpage", "front", __("Front page", "superb-blocks"), __("Applies CSS block to the front page.", "superb-blocks")); ?>
74 <?php new CssBlocksTargetSlot(); ?>
75 </div>
76 </div>
77 </div>
78 <div class="superbaddons-css-block-css-input-wrapper-outer">
79 <div class="superbaddons-css-block-css-input-wrapper superbaddons-element-mt1">
80 <label for="superbaddons-css-block-css-input" class="superbaddons-element-text-xs superbaddons-element-text-800 superbaddons-element-m0 superbaddons-element-mb1 superbaddons-element-flex-center"><img width="25" class="superbaddons-element-mr1" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/purple-paint-brush.svg'); ?>" /><?php echo esc_html__("CSS", "superb-blocks"); ?></label>
81 <textarea id="superbaddons-css-block-css-input" class="superbaddons-element-textarea superbaddons-element-mb1" rows="10"><?php echo $this->CurrentCssBlock ? esc_html($this->CurrentCssBlock->css) : ""; ?></textarea>
82 <div class="superbaddons-css-block-allow-unsafe-css-wrapper" style="display:none;">
83 <?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'); ?>
84 </div>
85 </div>
86 </div>
87
88 <hr class="superbaddons-element-mb1" />
89 <div class="superbaddons-css-block-errors-wrapper superbaddons-element-text-xs spbaddons-admin-text-danger superbaddons-element-mt1 superbaddons-element-mb1" style="display:none;">
90 <?php echo esc_html__("Your CSS Block cannot be saved while errors are present in your CSS.", "superb-blocks"); ?>
91 </div>
92 <div class="superbaddons-css-block-save-options">
93 <button type="button" class="superbaddons-css-block-save-btn superbaddons-element-button superbaddons-element-m0">
94 <img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/floppy-disk-duotone.svg'); ?>" />
95 <?php echo esc_html__("Save", "superb-blocks"); ?>
96 </button>
97 <span class="superbaddons-vertical-separator"></span>
98 <button type="button" class="superbaddons-css-block-preview-btn superbaddons-element-button superbaddons-element-m0">
99 <img width="20" class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/preview.svg'); ?>" />
100 <?php echo esc_html__("Preview", "superb-blocks"); ?>
101 </button>
102 <div class="superbaddons-element-mla superbaddons-element-flex-center">
103 <span class="superbaddons-vertical-separator"></span>
104 <div class="superbaddons-created-css-block-options" <?php echo $this->IsCreating ? 'style="display:none;"' : '' ?>>
105 <?php if ($this->CurrentCssBlock && !$this->CurrentCssBlock->active) : ?>
106 <!-- Activate Selected -->
107 <button class="superbaddons-activate-blocks-btn superbaddons-toggle-activate-blocks-btn superbaddons-element-button superbaddons-element-m0" disabled>
108 <img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/check-circle.svg'); ?>" />
109 <?php echo esc_html__("Activate", "superb-blocks"); ?>
110 </button>
111 <?php else : ?>
112 <!-- Deactivate Selected -->
113 <button class="superbaddons-deactivate-blocks-btn superbaddons-toggle-activate-blocks-btn superbaddons-element-button superbaddons-element-m0" disabled>
114 <img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/x-circle.svg'); ?>" />
115 <?php echo esc_html__("Deactivate", "superb-blocks"); ?>
116 </button>
117 <?php endif; ?>
118 <span class="superbaddons-vertical-separator"></span>
119 <?php new CssBlocksExportSingleSlot(); ?>
120 <span class="superbaddons-vertical-separator"></span>
121 <button class="superbaddons-css-block-delete-btn superbaddons-element-button spbaddons-admin-btn-danger superbaddons-element-m0">
122 <img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/trash-light.svg'); ?>" />
123 <?php echo esc_html__("Delete", "superb-blocks"); ?>
124 </button>
125 <span class="superbaddons-vertical-separator"></span>
126 </div>
127 <a href="<?php echo esc_url(admin_url("admin.php?page=" . DashboardController::ADDITIONAL_CSS)); ?>" class="superbaddons-css-block-cancel-btn superbaddons-element-button superbaddons-element-m0">
128 <img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/backspace.svg'); ?>" />
129 <?php echo esc_html__("Cancel", "superb-blocks"); ?>
130 </a>
131 </div>
132
133 </div>
134 </div>
135 <?php new Modal(); ?>
136 <?php if ($this->CurrentCssBlock) : ?>
137 <script>
138 const superbaddons_init_css_block_selectors = <?php echo wp_json_encode($this->CurrentCssBlock->selectors); ?>;
139 const superbaddons_init_css_block_id = <?php echo wp_json_encode($this->CurrentCssBlock->id); ?>;
140 </script>
141 <?php endif; ?>
142 <?php
143 }
144
145 public function RenderLivePreview()
146 {
147 ?>
148 <div id="superbaddons-css-block-live-preview" style="display:none;">
149 <div class="superbaddons-css-block-live-preview-container">
150 <div class="superbaddons-css-live-preview-menu">
151 <span class="superbaddons-element-text-sm superbaddons-element-text-800"><?php echo esc_html__("LIVE PREVIEW", "superb-blocks"); ?></span>
152 <button id="superbaddons-preview-reload-button" type="button" class="superbaddons-element-button superbaddons-element-button-small superbaddons-element-m0">
153 <img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/arrow-clockwise-duotone.svg'); ?>" />
154 <?php echo esc_html__("Reload Preview", "superb-blocks"); ?>
155 </button>
156 <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>
157 </div>
158 <div class="superbaddons-spinner-wrapper">
159 <img class="spbaddons-spinner" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . "/img/blocks-spinner.svg"); ?>" />
160 </div>
161 <div class="superbaddons-css-block-live-preview-content">
162 <div class="superbaddons-css-block-preview-input">
163 <div style="padding: 0 20px;">
164 <p class="superbaddons-element-text-xxs superbaddons-element-text-gray"><?php echo esc_html__("While editing, your CSS changes are only visible inside this live preview.", "superb-blocks"); ?></p>
165 <p class="superbaddons-element-text-xxs superbaddons-element-text-gray"><?php echo esc_html__("Your selected CSS Block targets are not active inside the live preview and your CSS will be previewed on every page and post.", "superb-blocks"); ?></p>
166 <?php if (!$this->IsCreating) : ?>
167 <p class="superbaddons-element-text-gray" style="font-style:italic;font-size:12px;"><?php echo esc_html__("Do note that the currently saved CSS from this block will be applied during preview, even if the CSS is changed or removed in the preview editor.", "superb-blocks"); ?></p>
168 <?php endif; ?>
169 </div>
170 </div>
171 <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>
172 </div>
173 </div>
174 </div>
175 <?php
176 }
177
178 private function RenderMainPage()
179 {
180 ?>
181 <div class="superbaddons-admindashboard-sidebarlayout">
182 <div class="superbaddons-admindashboard-sidebarlayout-left">
183 <div class="superbaddons-additional-content-wrapper superbaddons-admindashboard-css-blocks">
184 <h3 class="superbaddons-element-text-md superbaddons-element-text-800 superbaddons-element-m0 superbaddons-element-mb1 superbaddons-element-text-dark"><?php echo esc_html__("Custom CSS Blocks", "superb-blocks"); ?></h3>
185 <p class="superbaddons-element-text-gray superbaddons-element-text-400 superbaddons-element-m0 superbaddons-element-mb1"><?php echo esc_html__("Optimize your design and website with CSS blocks by deciding exactly when and where on your website you wish the CSS to be loaded. CSS files will automatically be generated, optimized and loaded to match your settings.", "superb-blocks"); ?></p>
186 <p class="superbaddons-element-text-gray superbaddons-element-text-400 superbaddons-element-m0 superbaddons-element-mb1"><?php echo esc_html__("Create a new CSS block, import, export or select one you wish to edit.", "superb-blocks"); ?></p>
187 <div class="superbaddons-css-block-base-options">
188 <a href="<?php echo esc_url(admin_url("admin.php?page=" . DashboardController::ADDITIONAL_CSS . '&css-create')); ?>" class="superbaddons-element-button superbaddons-element-mt1">
189 <img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/purple-files.svg'); ?>" />
190 <?php echo esc_html__("Create New CSS Block", "superb-blocks"); ?>
191 </a>
192 <span class="superbaddons-vertical-separator"></span>
193 <button class="superbaddons-import-blocks-btn superbaddons-element-button superbaddons-element-mt1">
194 <img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/upload-simple-duotone.svg'); ?>" />
195 <?php echo esc_html__("Import CSS Blocks", "superb-blocks"); ?>
196 </button>
197 <input type="file" id="superbaddons-import-blocks-file" style="display:none;" accept=".superbaddons" multiple />
198 <?php new CssBlocksBaseSlot(); ?>
199 </div>
200
201 <h4 class="superbaddons-element-text-sm superbaddons-element-text-800 superbaddons-element-m0 superbaddons-element-mt1 superbaddons-element-text-dark"><?php echo esc_html__("CSS Blocks", "superb-blocks"); ?></h4>
202
203 <hr class="superbaddons-element-mb1" />
204
205 <div class="superbaddons-css-blocks-list">
206 <?php if (empty($this->Blocks)) : ?>
207 <p class="superbaddons-element-text-gray superbaddons-element-text-400 superbaddons-element-m0 superbaddons-element-mb1"><?php echo esc_html__("You do not have any CSS Blocks yet. Import or create a new CSS Block to get started.", "superb-blocks"); ?></p>
208 <?php endif; ?>
209 <?php foreach ($this->Blocks as $block_id => $block) : ?>
210 <a href="<?php echo esc_url(admin_url("admin.php?page=" . DashboardController::ADDITIONAL_CSS . '&css-edit=' . $block_id)); ?>" data-id="<?php echo esc_attr($block_id); ?>" class="superbaddons-element-button superbaddons-element-m0 superbaddons-element-mb1 superbaddons-css-block-item <?php echo $block->active ? "" : "superbaddons-css-block-item-deactivated"; ?>">
211 <?php new InputCheckbox("superbaddons-css-block-select-" . sanitize_title($block->name), "select-single", false, false, false); ?>
212 <div class="superbaddons-css-block-item-information">
213 <div class="superbaddons-css-block-title-wrapper">
214 <img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . ($block->active ? '/img/purple-file.svg' : '/img/x.svg')); ?>" />
215 <span><?php echo esc_html($block->name); ?></span>
216 <span class="superbaddons-element-ml1 superbaddons-element-text-gray"><?php echo $block->active ? "" : esc_html__("Deactivated", "superb-blocks"); ?></span>
217 </div>
218 <span class="superbaddons-element-text-gray"><?php echo esc_html($this->GetTargetLabels($block)); ?></span>
219 </div>
220
221 </a>
222 <?php endforeach; ?>
223 </div>
224
225 <?php if (!empty($this->Blocks)) : ?>
226 <div class="superbaddons-css-blocks-list-options superbaddons-element-flex-center">
227
228 <img class="superbaddons-element-button-icon superbaddons-element-mr1" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/arrow-elbow-left-up.svg'); ?>" />
229 <?php new InputCheckbox("superbaddons-css-block-select-all", "select-all", __("Select All", "superb-blocks"), false, false); ?>
230 <span class="superbaddons-vertical-separator"></span>
231 <!-- Activate Selected -->
232 <button class="superbaddons-activate-blocks-btn superbaddons-element-button superbaddons-element-m0" disabled>
233 <img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/check-circle.svg'); ?>" />
234 <?php echo esc_html__("Activate", "superb-blocks"); ?>
235 </button>
236 <span class="superbaddons-vertical-separator"></span>
237 <!-- Deactivate Selected -->
238 <button class="superbaddons-deactivate-blocks-btn superbaddons-element-button superbaddons-element-m0" disabled>
239 <img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/x-circle.svg'); ?>" />
240 <?php echo esc_html__("Deactivate", "superb-blocks"); ?>
241 </button>
242 <span class="superbaddons-vertical-separator"></span>
243 <!-- Export Selected -->
244 <?php new CssBlocksExportSelectedSlot(); ?>
245 <span class="superbaddons-vertical-separator"></span>
246 <!-- Delete Selected -->
247 <button class="superbaddons-delete-blocks-btn superbaddons-element-button spbaddons-admin-btn-danger superbaddons-element-m0" disabled>
248 <img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/trash-light.svg'); ?>" />
249 <?php echo esc_html__("Delete", "superb-blocks"); ?>
250 </button>
251
252 </div>
253 <div class="superbaddons-css-blocks-list-options superbaddons-element-flex-center">
254
255 </div>
256 <?php endif; ?>
257
258 </div>
259 <!-- Link Boxes -->
260 <div class="superbaddons-admindashboard-linkbox-wrapper">
261 <?php
262 new LinkBox(
263 array(
264 "icon" => "question.svg",
265 "title" => __("Help & Tutorials", "superb-blocks"),
266 "description" => __("We have put together detailed documentation that walks you through every step of the process, from installation to customization.", "superb-blocks"),
267 "cta" => __("View tutorials", "superb-blocks"),
268 "link" => admin_url('admin.php?page=' . DashboardController::SUPPORT),
269 "same_window" => true,
270 )
271 );
272 new FeatureRequestBox();
273 ?>
274 </div>
275 </div>
276 <div class="superbaddons-admindashboard-sidebarlayout-right">
277 <?php
278 new PremiumBox(AdminLinkSource::CSS);
279 new ReviewBox();
280 new SupportBox();
281 ?>
282 </div>
283 </div>
284 <?php new Modal(); ?>
285 <?php
286 }
287
288 private function GetTargetLabels($block)
289 {
290 $valid_labels = apply_filters(
291 'superbaddons_css_block_target_valid_labels',
292 array(
293 "front" => __("Front Page", "superb-blocks"),
294 "full" => __("Entire Website", "superb-blocks")
295 )
296 );
297
298 $labels = [];
299 foreach ($block->selectors as $target) {
300 if (!isset($valid_labels[$target->type]) || !$valid_labels[$target->type])
301 continue;
302
303 $labels[] = !empty($target->value) ? sprintf(
304 /* translators: %s: Target post type (page, post, template etc.) */
305 __("Specific %s", "superb-blocks"),
306 $valid_labels[$target->type]
307 ) : $valid_labels[$target->type];
308 }
309
310 if (empty($labels)) {
311 return __("Not Applied", "superb-blocks");
312 }
313
314 return rtrim(join(", ", $labels), ", ");
315 }
316 }
317