class-page-additional-css.php — Superb Addons: Blocks, Patterns, Pre-built Pages, Sliders, Popups, Free Forms, Animations & More 3.5.6

superb-blocks / src / admin / pages / class-page-additional-css.php

superb-blocks / src / admin / pages Last commit date

wizard 1 year ago class-page-additional-css.php 1 year ago class-page-dashboard.php 1 year ago class-page-settings.php 1 year ago class-page-support.php 1 year ago

class-page-additional-css.php

318 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\Admin\Utils\AdminLinkUtil;
12	use SuperbAddons\Components\Admin\FeatureRequestBox;
13	use SuperbAddons\Components\Admin\InputCheckbox;
14	use SuperbAddons\Components\Admin\Modal;
15	use SuperbAddons\Components\Admin\PremiumBox;
16	use SuperbAddons\Components\Admin\SupportBox;
17	use SuperbAddons\Components\Slots\CssBlocksBaseSlot;
18	use SuperbAddons\Components\Slots\CssBlocksExportSelectedSlot;
19	use SuperbAddons\Components\Slots\CssBlocksExportSingleSlot;
20	use SuperbAddons\Components\Slots\CssBlocksTargetSlot;
21	use SuperbAddons\Data\Controllers\CSSController;
22
23	class AdditionalCSSPage
24	{
25	private $Blocks = [];
26	private $CurrentCssBlock = false;
27	private $IsCreating = false;
28
29	public function __construct()
30	{
31	$this->Blocks = CSSController::GetBlocks();
32	// Determine which type of page to display
33	// phpcs:ignore WordPress.Security.NonceVerification.Recommended
34	$view_type = isset($_GET['css-edit']) ? 'edit' : (isset($_GET['css-create']) ? 'create' : 'default');
35	if ($view_type !== 'default') {
36	if ($view_type === 'edit') {
37	// No need for nonce verification here, as the user is not submitting any data
38	// phpcs:ignore WordPress.Security.NonceVerification.Recommended
39	$css_block_id = sanitize_text_field(wp_unslash($_GET['css-edit']));
40	$this->CurrentCssBlock = isset($this->Blocks[$css_block_id]) ? $this->Blocks[$css_block_id] : false;
41	if (!$this->CurrentCssBlock) {
42	$this->RenderMainPage();
43	return;
44	}
45	$this->CurrentCssBlock->id = $css_block_id;
46	} else {
47	$this->IsCreating = true;
48	}
49
50	add_action("admin_footer", array($this, 'RenderLivePreview'));
51
52	$this->RenderEditPage();
53	} else {
54	$this->RenderMainPage();
55	}
56	}
57
58	private function RenderEditPage()
59	{
60	$edit_or_create = $this->IsCreating ? __("Create CSS Block", "superb-blocks") : __("Edit CSS Block", "superb-blocks");
61	?>
62	<div class="superbaddons-admindashboard-content-box-large superbaddons-admindashboard-css-blocks">
63	<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>
64	<hr class="superbaddons-element-mb1" />
65
66	<div class="superbaddons-css-block-input-options superbaddons-element-mt1 superbaddons-element-mb2">
67	<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>
68	<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); ?>" />
69
70	<div class="superbaddons-css-block-target-inputs-wrapper superbaddons-element-mt1">
71	<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>
72	<?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); ?>
73	<div class="superbaddons-element-specific-select-wrapper superbaddons-css-block-specific-target-inputs superbaddons-element-mb1" style="display: none;">
74	<?php new InputCheckbox("superbaddons-css-block-target-input-frontpage", "front", __("Front page", "superb-blocks"), __("Applies CSS block to the front page.", "superb-blocks")); ?>
75	<?php new CssBlocksTargetSlot(); ?>
76	</div>
77	</div>
78	</div>
79	<div class="superbaddons-css-block-css-input-wrapper-outer">
80	<div class="superbaddons-css-block-css-input-wrapper superbaddons-element-mt1">
81	<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>
82	<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>
83	<div class="superbaddons-css-block-allow-unsafe-css-wrapper" style="display:none;">
84	<?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'); ?>
85	</div>
86	</div>
87	</div>
88
89	<hr class="superbaddons-element-mb1" />
90	<div class="superbaddons-css-block-errors-wrapper superbaddons-element-text-xs spbaddons-admin-text-danger superbaddons-element-mt1 superbaddons-element-mb1" style="display:none;">
91	<?php echo esc_html__("Your CSS Block cannot be saved while errors are present in your CSS.", "superb-blocks"); ?>
92	</div>
93	<div class="superbaddons-css-block-save-options">
94	<button type="button" class="superbaddons-css-block-save-btn superbaddons-element-button superbaddons-element-m0">
95	<img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/floppy-disk-duotone.svg'); ?>" />
96	<?php echo esc_html__("Save", "superb-blocks"); ?>
97	</button>
98	<span class="superbaddons-vertical-separator"></span>
99	<button type="button" class="superbaddons-css-block-preview-btn superbaddons-element-button superbaddons-element-m0">
100	<img width="20" class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/preview.svg'); ?>" />
101	<?php echo esc_html__("Preview", "superb-blocks"); ?>
102	</button>
103	<div class="superbaddons-element-mla superbaddons-element-flex-center">
104	<span class="superbaddons-vertical-separator"></span>
105	<div class="superbaddons-created-css-block-options" <?php echo $this->IsCreating ? 'style="display:none;"' : '' ?>>
106	<?php if ($this->CurrentCssBlock && !$this->CurrentCssBlock->active) : ?>
107	<!-- Activate Selected -->
108	<button class="superbaddons-activate-blocks-btn superbaddons-toggle-activate-blocks-btn superbaddons-element-button superbaddons-element-m0" disabled>
109	<img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/check-circle.svg'); ?>" />
110	<?php echo esc_html__("Activate", "superb-blocks"); ?>
111	</button>
112	<?php else : ?>
113	<!-- Deactivate Selected -->
114	<button class="superbaddons-deactivate-blocks-btn superbaddons-toggle-activate-blocks-btn superbaddons-element-button superbaddons-element-m0" disabled>
115	<img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/x-circle.svg'); ?>" />
116	<?php echo esc_html__("Deactivate", "superb-blocks"); ?>
117	</button>
118	<?php endif; ?>
119	<span class="superbaddons-vertical-separator"></span>
120	<?php new CssBlocksExportSingleSlot(); ?>
121	<span class="superbaddons-vertical-separator"></span>
122	<button class="superbaddons-css-block-delete-btn superbaddons-element-button spbaddons-admin-btn-danger superbaddons-element-m0">
123	<img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/trash-light.svg'); ?>" />
124	<?php echo esc_html__("Delete", "superb-blocks"); ?>
125	</button>
126	<span class="superbaddons-vertical-separator"></span>
127	</div>
128	<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">
129	<img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/backspace.svg'); ?>" />
130	<?php echo esc_html__("Cancel", "superb-blocks"); ?>
131	</a>
132	</div>
133
134	</div>
135	</div>
136	<?php new Modal(); ?>
137	<?php if ($this->CurrentCssBlock) : ?>
138	<script>
139	const superbaddons_init_css_block_selectors = <?php echo wp_json_encode($this->CurrentCssBlock->selectors); ?>;
140	const superbaddons_init_css_block_id = <?php echo wp_json_encode($this->CurrentCssBlock->id); ?>;
141	</script>
142	<?php endif; ?>
143	<?php
144	}
145
146	public function RenderLivePreview()
147	{
148	?>
149	<div id="superbaddons-css-block-live-preview" style="display:none;">
150	<div class="superbaddons-css-block-live-preview-container">
151	<div class="superbaddons-css-live-preview-menu">
152	<span class="superbaddons-element-text-sm superbaddons-element-text-800"><?php echo esc_html__("LIVE PREVIEW", "superb-blocks"); ?></span>
153	<button id="superbaddons-preview-reload-button" type="button" class="superbaddons-element-button superbaddons-element-button-small superbaddons-element-m0">
154	<img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/arrow-clockwise-duotone.svg'); ?>" />
155	<?php echo esc_html__("Reload Preview", "superb-blocks"); ?>
156	</button>
157	<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>
158	</div>
159	<div class="superbaddons-spinner-wrapper">
160	<img class="spbaddons-spinner" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . "/img/blocks-spinner.svg"); ?>" />
161	</div>
162	<div class="superbaddons-css-block-live-preview-content">
163	<div class="superbaddons-css-block-preview-input">
164	<div style="padding: 0 20px;">
165	<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>
166	<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>
167	<?php if (!$this->IsCreating) : ?>
168	<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>
169	<?php endif; ?>
170	</div>
171	</div>
172	<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>
173	</div>
174	</div>
175	</div>
176	<?php
177	}
178
179	private function RenderMainPage()
180	{
181	?>
182	<div class="superbaddons-admindashboard-sidebarlayout">
183	<div class="superbaddons-admindashboard-sidebarlayout-left">
184	<div class="superbaddons-additional-content-wrapper superbaddons-admindashboard-css-blocks">
185	<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>
186	<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>
187	<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>
188	<div class="superbaddons-css-block-base-options">
189	<a href="<?php echo esc_url(admin_url("admin.php?page=" . DashboardController::ADDITIONAL_CSS . '&css-create')); ?>" class="superbaddons-element-button superbaddons-element-mt1">
190	<img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/purple-files.svg'); ?>" />
191	<?php echo esc_html__("Create New CSS Block", "superb-blocks"); ?>
192	</a>
193	<span class="superbaddons-vertical-separator"></span>
194	<button class="superbaddons-import-blocks-btn superbaddons-element-button superbaddons-element-mt1">
195	<img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/upload-simple-duotone.svg'); ?>" />
196	<?php echo esc_html__("Import CSS Blocks", "superb-blocks"); ?>
197	</button>
198	<input type="file" id="superbaddons-import-blocks-file" style="display:none;" accept=".superbaddons" multiple />
199	<?php new CssBlocksBaseSlot(); ?>
200	</div>
201
202	<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>
203
204	<hr class="superbaddons-element-mb1" />
205
206	<div class="superbaddons-css-blocks-list">
207	<?php if (empty($this->Blocks)) : ?>
208	<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>
209	<?php endif; ?>
210	<?php foreach ($this->Blocks as $block_id => $block) : ?>
211	<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"; ?>">
212	<?php new InputCheckbox("superbaddons-css-block-select-" . sanitize_title($block->name), "select-single", false, false, false); ?>
213	<div class="superbaddons-css-block-item-information">
214	<div class="superbaddons-css-block-title-wrapper">
215	<img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . ($block->active ? '/img/purple-file.svg' : '/img/x.svg')); ?>" />
216	<span><?php echo esc_html($block->name); ?></span>
217	<span class="superbaddons-element-ml1 superbaddons-element-text-gray"><?php echo $block->active ? "" : esc_html__("Deactivated", "superb-blocks"); ?></span>
218	</div>
219	<span class="superbaddons-element-text-gray"><?php echo esc_html($this->GetTargetLabels($block)); ?></span>
220	</div>
221
222	</a>
223	<?php endforeach; ?>
224	</div>
225
226	<?php if (!empty($this->Blocks)) : ?>
227	<div class="superbaddons-css-blocks-list-options superbaddons-element-flex-center">
228
229	<img class="superbaddons-element-button-icon superbaddons-element-mr1" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/arrow-elbow-left-up.svg'); ?>" />
230	<?php new InputCheckbox("superbaddons-css-block-select-all", "select-all", __("Select All", "superb-blocks"), false, false); ?>
231	<span class="superbaddons-vertical-separator"></span>
232	<!-- Activate Selected -->
233	<button class="superbaddons-activate-blocks-btn superbaddons-element-button superbaddons-element-m0" disabled>
234	<img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/check-circle.svg'); ?>" />
235	<?php echo esc_html__("Activate", "superb-blocks"); ?>
236	</button>
237	<span class="superbaddons-vertical-separator"></span>
238	<!-- Deactivate Selected -->
239	<button class="superbaddons-deactivate-blocks-btn superbaddons-element-button superbaddons-element-m0" disabled>
240	<img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/x-circle.svg'); ?>" />
241	<?php echo esc_html__("Deactivate", "superb-blocks"); ?>
242	</button>
243	<span class="superbaddons-vertical-separator"></span>
244	<!-- Export Selected -->
245	<?php new CssBlocksExportSelectedSlot(); ?>
246	<span class="superbaddons-vertical-separator"></span>
247	<!-- Delete Selected -->
248	<button class="superbaddons-delete-blocks-btn superbaddons-element-button spbaddons-admin-btn-danger superbaddons-element-m0" disabled>
249	<img class="superbaddons-element-button-icon" src="<?php echo esc_url(SUPERBADDONS_ASSETS_PATH . '/img/trash-light.svg'); ?>" />
250	<?php echo esc_html__("Delete", "superb-blocks"); ?>
251	</button>
252
253	</div>
254	<div class="superbaddons-css-blocks-list-options superbaddons-element-flex-center">
255
256	</div>
257	<?php endif; ?>
258
259	</div>
260	<!-- Link Boxes -->
261	<div class="superbaddons-admindashboard-linkbox-wrapper">
262	<?php
263	new LinkBox(
264	array(
265	"icon" => "question.svg",
266	"title" => __("Help & Tutorials", "superb-blocks"),
267	"description" => __("We have put together detailed documentation that walks you through every step of the process, from installation to customization.", "superb-blocks"),
268	"cta" => __("View tutorials", "superb-blocks"),
269	"link" => admin_url('admin.php?page=' . DashboardController::SUPPORT),
270	"same_window" => true,
271	)
272	);
273	new FeatureRequestBox();
274	?>
275	</div>
276	</div>
277	<div class="superbaddons-admindashboard-sidebarlayout-right">
278	<?php
279	new PremiumBox(AdminLinkSource::CSS);
280	new ReviewBox();
281	new SupportBox();
282	?>
283	</div>
284	</div>
285	<?php new Modal(); ?>
286	<?php
287	}
288
289	private function GetTargetLabels($block)
290	{
291	$valid_labels = apply_filters(
292	'superbaddons_css_block_target_valid_labels',
293	array(
294	"front" => __("Front Page", "superb-blocks"),
295	"full" => __("Entire Website", "superb-blocks")
296	)
297	);
298
299	$labels = [];
300	foreach ($block->selectors as $target) {
301	if (!isset($valid_labels[$target->type]) \|\| !$valid_labels[$target->type])
302	continue;
303
304	$labels[] = !empty($target->value) ? sprintf(
305	/* translators: %s: Target post type (page, post, template etc.) */
306	__("Specific %s", "superb-blocks"),
307	$valid_labels[$target->type]
308	) : $valid_labels[$target->type];
309	}
310
311	if (empty($labels)) {
312	return __("Not Applied", "superb-blocks");
313	}
314
315	return rtrim(join(", ", $labels), ", ");
316	}
317	}
318