← All changes | templates/minify/css-settings-tab.php +76 -64 4.5.3 → 4.7.0 View file →

		@@ -31,12 +31,19 @@
31	31	type="checkbox"
32	32	id="enable_unused_css"
33	33	value="1"
34	34	<?php checked($wpo_minify_options['enable_unused_css']); ?>
	35	+ <?php disabled($show_unused_css_advertise || !$is_page_cache_enabled); ?>
35	36	>
36	37	<?php esc_html_e('Enable removal of unused rules from CSS files (Experimental)', 'wp-optimize'); ?>
	38	+ <em class="<?php if ($is_page_cache_enabled || $show_unused_css_advertise) echo esc_attr('wpo_hidden'); ?>"><?php esc_html_e('This option is available only when page cache is enabled.', 'wp-optimize'); ?></em>
37	39	</label>
38		- <span tabindex="0" data-tooltip="<?php esc_attr_e('If some of the design is breaking on the frontend, disabling removal of unused CSS rules might fix the issues.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
	40	+ <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('If some of the design is breaking on the frontend, disabling removal of unused CSS rules might fix the issues.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
	41	+ <?php if ($show_unused_css_advertise) : ?>
	42	+ <div class="wpo-inline-advertise">
	43	+ <a class="" href="https://teamupdraft.com/wp-optimize/pricing/?utm_source=wpo-plugin&utm_medium=referral&utm_campaign=paac&utm_creative_format=overlay&utm_content=remove-unused-css" target="_blank"><?php esc_html_e('Upgrade to WP-Optimize Premium to unlock this feature.', 'wp-optimize'); ?></a>
	44	+ </div>
	45	+ <?php endif; ?>
39	46	</div>
40	47	<div class="wpo-fieldgroup__subgroup">
41	48	<label for="enable_merging_of_css">
42	49	<input
		@@ -47,9 +54,9 @@
47	54	<?php echo checked($wpo_minify_options['enable_merging_of_css']); ?>
48	55	>
49	56	<?php esc_html_e('Enable merging of CSS files', 'wp-optimize'); ?>
50	57	</label>
51		- <span tabindex="0" data-tooltip="<?php echo esc_attr($tooltip); ?>"><span class="dashicons dashicons-editor-help"></span> </span>
	58	+ <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php echo esc_attr($tooltip); ?>"><span class="dashicons dashicons-editor-help"></span> </span>
52	59	</div>
53	60	<div class="wpo-fieldgroup__subgroup">
54	61	<label for="inline_css" class="label-with-tooltip">
55	62	<input
		@@ -60,9 +67,9 @@
60	67	<?php echo checked($wpo_minify_options['inline_css']); ?>
61	68	>
62	69	<?php esc_html_e('Inline CSS', 'wp-optimize'); ?> - <?php esc_html_e('Recommended if the CSS files are small enough.', 'wp-optimize'); ?>
63	70	</label>
64		- <span tabindex="0" data-tooltip="<?php esc_attr_e('When enabled, small CSS files will be inlined.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
	71	+ <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('When enabled, small CSS files will be inlined.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
65	72	</div>
66	73	<div class="wpo-fieldgroup__subgroup">
67	74	<label for="remove_print_mediatypes" class="label-with-tooltip">
68	75	<input
		@@ -73,9 +80,9 @@
73	80	<?php echo checked($wpo_minify_options['remove_print_mediatypes']); ?>
74	81	>
75	82	<?php esc_html_e('Strip the "print" related stylesheets', 'wp-optimize'); ?>
76	83	</label>
77		- <span tabindex="0" data-tooltip='<?php esc_attr_e('When selected, any CSS files with the media type "print" will be removed.', 'wp-optimize');?> <?php esc_html_e('Enable if your site does not need specific print styles.', 'wp-optimize');?>'><span class="dashicons dashicons-editor-help"></span> </span>
	84	+ <span tabindex="0" class="wpo-tooltip" data-tooltip='<?php esc_attr_e('When selected, any CSS files with the media type "print" will be removed.', 'wp-optimize');?> <?php esc_html_e('Enable if your site does not need specific print styles.', 'wp-optimize');?>'><span class="dashicons dashicons-editor-help"></span> </span>
78	85	</div>
79	86	<?php if (WP_OPTIMIZE_SHOW_MINIFY_ADVANCED) : ?>
80	87	<div class="wpo-fieldgroup__subgroup">
81	88	<label for="remove_css">
		@@ -87,9 +94,9 @@
87	94	<?php echo checked($wpo_minify_options['remove_css']); ?>
88	95	>
89	96	<?php esc_html_e('Dequeue all CSS files', 'wp-optimize'); ?>
90	97	</label>
91		- <span tabindex="0" data-tooltip="<?php esc_attr_e('This is useful if you want to test your critical path CSS', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
	98	+ <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('This is useful if you want to test your critical path CSS', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
92	99	</div>
93	100	<?php endif; ?>
94	101	</fieldset>
95	102	</div>
		@@ -96,22 +103,24 @@
96	103
97	104	<h3><?php esc_html_e('Exclude the following CSS files from processing', 'wp-optimize'); ?></h3>
98	105	<div class="wpo-fieldgroup">
99	106	<fieldset>
100		- <label class="wpo-label__bold" for="exclude_css">
101		- <?php esc_html_e('Any CSS files that match the paths below will be completely ignored.', 'wp-optimize'); ?>
102		- <br><?php esc_html_e('Use this if you are having issues with a specific CSS file', 'wp-optimize'); ?>
103		- <span tabindex="0" data-tooltip="<?php esc_attr_e('Any file present here will be loaded normally by WordPress', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
104		- </label>
105		- <textarea
106		- name="exclude_css"
107		- rows="7" cols="50"
108		- id="exclude_css"
109		- class="large-text code"
110		- placeholder="<?php esc_attr_e('e.g.: /bootstrap.css', 'wp-optimize'); ?>"
111		- ><?php echo esc_textarea($wpo_minify_options['exclude_css']);?></textarea>
112		- <br>
113		- <?php esc_html_e('Some files known for causing issues when combined / minified are excluded by default.', 'wp-optimize'); ?> <?php esc_html_e('You can see / edit them in the Advanced tab.', 'wp-optimize'); ?>
	107	+ <div class="wpo-fieldgroup__subgroup">
	108	+ <label class="wpo-label__bold" for="exclude_css">
	109	+ <?php esc_html_e('Any CSS files that match the paths below will be completely ignored.', 'wp-optimize'); ?>
	110	+ <br><?php esc_html_e('Use this if you are having issues with a specific CSS file', 'wp-optimize'); ?>
	111	+ </label>
	112	+ <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('Any file present here will be loaded normally by WordPress', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
	113	+ <textarea
	114	+ name="exclude_css"
	115	+ rows="7" cols="50"
	116	+ id="exclude_css"
	117	+ class="large-text code"
	118	+ placeholder="<?php esc_attr_e('e.g.: /bootstrap.css', 'wp-optimize'); ?>"
	119	+ ><?php echo esc_textarea($wpo_minify_options['exclude_css']);?></textarea>
	120	+ <br>
	121	+ <?php esc_html_e('Some files known for causing issues when combined / minified are excluded by default.', 'wp-optimize'); ?> <?php esc_html_e('You can see / edit them in the Advanced tab.', 'wp-optimize'); ?>
	122	+ </div>
114	123	</fieldset>
115	124	</div>
116	125
117	126	<h3><?php esc_html_e('Load the following CSS files asynchronously', 'wp-optimize'); ?></h3>
		@@ -116,22 +125,24 @@
116	125
117	126	<h3><?php esc_html_e('Load the following CSS files asynchronously', 'wp-optimize'); ?></h3>
118	127	<div class="wpo-fieldgroup">
119	128	<fieldset>
120		- <label class="wpo-label__bold" for="async_css">
121		- <?php esc_html_e('Any CSS files that match the paths below will be loaded asynchronously.', 'wp-optimize'); ?><br>
122		- <?php esc_html_e('Use this if you have a completely independent stylesheet', 'wp-optimize'); ?>
123		- <span tabindex="0" data-tooltip="<?php esc_attr_e("e.g. You may want to exclude 'fontawesome' or other libraries from the initial load", 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
124		- </label>
125		- <textarea
126		- name="async_css"
127		- rows="7"
128		- cols="50"
129		- id="async_css"
130		- class="large-text code"
131		- placeholder="<?php esc_attr_e('e.g.: /wp-content/themes/my-theme/css/custom-font.css', 'wp-optimize'); ?>"
132		- ><?php echo esc_textarea($wpo_minify_options['async_css']); ?></textarea>
133	129	<div class="wpo-fieldgroup__subgroup">
	130	+ <label class="wpo-label__bold" for="async_css">
	131	+ <?php esc_html_e('Any CSS files that match the paths below will be loaded asynchronously.', 'wp-optimize'); ?><br>
	132	+ <?php esc_html_e('Use this if you have a completely independent stylesheet', 'wp-optimize'); ?>
	133	+ </label>
	134	+ <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e("e.g. You may want to exclude 'fontawesome' or other libraries from the initial load", 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
	135	+ <textarea
	136	+ name="async_css"
	137	+ rows="7"
	138	+ cols="50"
	139	+ id="async_css"
	140	+ class="large-text code"
	141	+ placeholder="<?php esc_attr_e('e.g.: /wp-content/themes/my-theme/css/custom-font.css', 'wp-optimize'); ?>"
	142	+ ><?php echo esc_textarea($wpo_minify_options['async_css']); ?></textarea>
	143	+ </div>
	144	+ <div class="wpo-fieldgroup__subgroup">
134	145	<label for="exclude_css_from_page_speed_tools">
135	146	<input
136	147	name="exclude_css_from_page_speed_tools"
137	148	type="checkbox"
		@@ -140,9 +151,9 @@
140	151	<?php echo checked($wpo_minify_options['exclude_css_from_page_speed_tools']); ?>
141	152	>
142	153	<?php esc_html_e('Exclude stylesheets from page speed tests (PageSpeed Insights, GTMetrix...)', 'wp-optimize'); ?>
143	154	</label>
144		- <span tabindex="0" data-tooltip="<?php esc_attr_e('Use this only for testing purpose to find out which stylesheets are slowing down your site.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
	155	+ <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('Use this only for testing purpose to find out which stylesheets are slowing down your site.', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
145	156	</div>
146	157	</fieldset>
147	158	</div>
148	159
		@@ -149,22 +160,24 @@
149	160	<?php if (WP_OPTIMIZE_SHOW_MINIFY_ADVANCED) : ?>
150	161	<h3><?php esc_html_e('Enable asynchronous CSS', 'wp-optimize'); ?></h3>
151	162	<div class="wpo-fieldgroup">
152	163	<fieldset>
153		- <label for="loadcss">
154		- <input
155		- name="loadcss"
156		- type="checkbox"
157		- id="loadcss"
158		- value="1"
159		- <?php echo checked($wpo_minify_options['loadcss']); ?>
160		- >
161		- <?php esc_html_e('Load all CSS files asynchronously', 'wp-optimize'); ?>
162		- <span tabindex="0" data-tooltip="<?php esc_attr_e('Note that inline CSS won\'t work if this is active', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
163		- </label>
164		- <p>
165		- <?php esc_html_e('If you have multiple css files per media type, they may load out of order and break your design when loaded asynchronously.', 'wp-optimize'); ?>
166		- </p>
	164	+ <div class="wpo-fieldgroup__subgroup">
	165	+ <label for="loadcss">
	166	+ <input
	167	+ name="loadcss"
	168	+ type="checkbox"
	169	+ id="loadcss"
	170	+ value="1"
	171	+ <?php echo checked($wpo_minify_options['loadcss']); ?>
	172	+ >
	173	+ <?php esc_html_e('Load all CSS files asynchronously', 'wp-optimize'); ?>
	174	+ </label>
	175	+ <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('Note that inline CSS won\'t work if this is active', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span> </span>
	176	+ <p>
	177	+ <?php esc_html_e('If you have multiple css files per media type, they may load out of order and break your design when loaded asynchronously.', 'wp-optimize'); ?>
	178	+ </p>
	179	+ </div>
167	180	</fieldset>
168	181	</div>
169	182	<?php endif; ?>
170	183
		@@ -184,28 +197,27 @@
184	197	><?php echo esc_textarea($wpo_minify_options['critical_path_css']); ?></textarea>
185	198	</fieldset>
186	199
187	200	<fieldset>
188		- <label class="wpo-label__bold" for="critical_path_css_is_front_page"><?php esc_html_e('is_front_page (conditional)', 'wp-optimize'); ?> <span tabindex="0" data-tooltip="<?php esc_attr_e('This will be inlined after the above if your page matches the WP conditional is_front_page()', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span></label>
189		- <textarea
190		- name="critical_path_css_is_front_page"
191		- rows="7"
192		- cols="50"
193		- id="critical_path_css_is_front_page"
194		- class="large-text code"
195		- placeholder=".css-code { display: block; }"
196		- ><?php echo esc_textarea($wpo_minify_options['critical_path_css_is_front_page']); ?></textarea>
	201	+ <div class="wpo-fieldgroup__subgroup">
	202	+ <label class="wpo-label__bold" for="critical_path_css_is_front_page"><?php esc_html_e('is_front_page (conditional)', 'wp-optimize'); ?></label>
	203	+ <span tabindex="0" class="wpo-tooltip" data-tooltip="<?php esc_attr_e('This will be inlined after the above if your page matches the WP conditional is_front_page()', 'wp-optimize');?>"><span class="dashicons dashicons-editor-help"></span></span>
	204	+ <textarea
	205	+ name="critical_path_css_is_front_page"
	206	+ rows="7"
	207	+ cols="50"
	208	+ id="critical_path_css_is_front_page"
	209	+ class="large-text code"
	210	+ placeholder=".css-code { display: block; }"
	211	+ ><?php echo esc_textarea($wpo_minify_options['critical_path_css_is_front_page']); ?></textarea>
	212	+ </div>
197	213	</fieldset>
198	214	</div>
199	215	<?php endif; ?>
200		-
201		- <p class="submit">
202		- <input
203		- class="wp-optimize-save-minify-settings button button-primary"
204		- type="submit"
205		- value="<?php esc_attr_e('Save settings', 'wp-optimize'); ?>"
206		- >
	216	+
	217	+ <div class="wpo-save-btn-container">
	218	+ <input class="wp-optimize-save-minify-settings button button-primary" type="submit" value="<?php esc_attr_e('Save settings', 'wp-optimize'); ?>">
207	219	<img class="wpo_spinner" src="<?php echo esc_url(admin_url('images/spinner-2x.gif')); // phpcs:ignore PluginCheck.CodeAnalysis.ImageFunctions.NonEnqueuedImage -- N/A ?>" alt="...">
208	220	<span class="save-done dashicons dashicons-yes display-none"></span>
209		- </p>
	221	+ </div>
210	222	</form>
211	223	</div>