← All changes | classes/Controllers/Frontend/Blocks.php +60 -44 trunk → 2.6.1 View file →

		@@ -204,9 +204,9 @@
204	204	] );
205	205
206	206	foreach ( $hide_on as $device => $hidden ) {
207	207	if ( $hidden ) {
208		- $classes[] = 'cc-hide-on-' . sanitize_html_class( $device );
	208	+ $classes[] = 'cc-hide-on-' . esc_attr( $device );
209	209	}
210	210	}
211	211	}
212	212
		@@ -219,11 +219,8 @@
219	219	*
220	220	* @return string[]
221	221	*/
222	222	$classes = apply_filters( 'content_control/get_block_control_classes', $classes, $controls, $block );
223		- $classes = array_filter( $classes, 'is_string' );
224		- $classes = array_map( 'sanitize_html_class', $classes );
225		- $classes = array_filter( $classes );
226	223
227	224	return array_unique( $classes );
228	225	}
229	226
		@@ -260,9 +257,9 @@
260	257
261	258	// Enqueue the styles.
262	259	// wp_enqueue_style( 'content-control-block-styles' );.
263	260
264		- $class_name = esc_attr( implode( ' ', $classes ) );
	261	+ $class_name = implode( ' ', $classes );
265	262
266	263	/** Mimicing WP Cores usage in https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/block-supports/elements.php#L32 */
267	264	$html_element_matches = [];
268	265	preg_match( '/<[^>]+>/', $block_content, $html_element_matches, PREG_OFFSET_CAPTURE );
		@@ -295,63 +292,82 @@
295	292	public function print_block_styles() {
296	293	$media_queries = $this->container->get_option( 'mediaQueries' );
297	294
298	295	if ( ! $media_queries ) {
299		- $styles = "@media (max-width: 480px) {\n\t.cc-hide-on-mobile {\n\t\tdisplay: none !important;\n\t}\n}\n";
300		- $styles .= "@media (min-width: 481px) and (max-width: 991px) {\n\t.cc-hide-on-tablet {\n\t\tdisplay: none !important;\n\t}\n}\n";
301		- $styles .= "@media (min-width: 992px) {\n\t.cc-hide-on-desktop {\n\t\tdisplay: none !important;\n\t}\n}";
302		- $this->enqueue_block_styles( $styles );
	296	+ ?>
	297	+ <style id="content-control-block-styles">
	298	+ @media (max-width: 480px) {
	299	+ .cc-hide-on-mobile {
	300	+ display: none !important;
	301	+ }
	302	+ }
	303	+ @media (min-width: 481px) and (max-width: 991px) {
	304	+ .cc-hide-on-tablet {
	305	+ display: none !important;
	306	+ }
	307	+ }
	308	+ @media (min-width: 992px) {
	309	+ .cc-hide-on-desktop {
	310	+ display: none !important;
	311	+ }
	312	+ }
	313	+ </style>
	314	+ <?php
303	315	return;
304	316	}
305	317
306		- $mobile_breakpoint = isset( $media_queries['mobile']['breakpoint'] ) ? absint( $media_queries['mobile']['breakpoint'] ) : 640;
307		- $tablet_breakpoint = isset( $media_queries['tablet']['breakpoint'] ) ? absint( $media_queries['tablet']['breakpoint'] ) : 920;
308		- $desktop_breakpoint = isset( $media_queries['desktop']['breakpoint'] ) ? absint( $media_queries['desktop']['breakpoint'] ) : 1440;
	318	+ $mobile_breakpoint = isset( $media_queries['mobile'] ) ? $media_queries['mobile']['breakpoint'] : 640;
	319	+ $tablet_breakpoint = isset( $media_queries['tablet'] ) ? $media_queries['tablet']['breakpoint'] : 920;
	320	+ $desktop_breakpoint = isset( $media_queries['desktop'] ) ? $media_queries['desktop']['breakpoint'] : 1440;
309	321
310	322	$tablet_start = $mobile_breakpoint + 1;
311	323	$desktop_start = $tablet_breakpoint + 1;
312	324
313		- $styles = [];
314		- $styles[] = sprintf( "@media (max-width: %dpx) {\n\t.cc-hide-on-mobile {\n\t\tdisplay: none !important;\n\t}\n}", $mobile_breakpoint );
315		- $styles[] = sprintf( "@media (min-width: %dpx) and (max-width: %dpx) {\n\t.cc-hide-on-tablet {\n\t\tdisplay: none !important;\n\t}\n}", $tablet_start, $tablet_breakpoint );
316		- $styles[] = sprintf( "@media (min-width: %dpx) and (max-width: %dpx) {\n\t.cc-hide-on-desktop {\n\t\tdisplay: none !important;\n\t}\n}", $desktop_start, $desktop_breakpoint );
	325	+ $styles[] = <<<CSS
	326	+@media (max-width: {$mobile_breakpoint}px) {
	327	+ .cc-hide-on-mobile {
	328	+ display: none !important;
	329	+ }
	330	+}
	331	+CSS;
317	332
	333	+ $styles[] = <<<CSS
	334	+@media (min-width: {$tablet_start}px) and (max-width: {$tablet_breakpoint}px) {
	335	+ .cc-hide-on-tablet {
	336	+ display: none !important;
	337	+ }
	338	+}
	339	+CSS;
	340	+
	341	+ $styles[] = <<<CSS
	342	+@media (min-width: {$desktop_start}px) and (max-width: {$desktop_breakpoint}px) {
	343	+ .cc-hide-on-desktop {
	344	+ display: none !important;
	345	+ }
	346	+}
	347	+CSS;
	348	+
318	349	unset( $media_queries['mobile'], $media_queries['tablet'], $media_queries['desktop'] );
319	350
320	351	foreach ( $media_queries as $media_query => $media_query_settings ) {
321		- if ( ! is_array( $media_query_settings ) || ! isset( $media_query_settings['breakpoint'] ) ) {
322		- continue;
323		- }
	352	+ $breakpoint = $media_query_settings['breakpoint'];
324	353
325		- $breakpoint = absint( $media_query_settings['breakpoint'] );
326		- $media_query_class = sanitize_html_class( $media_query );
	354	+ $style = <<<CSS
	355	+@media (min-width: {$breakpoint}px) {
	356	+ .cc-hide-on-{$media_query} {
	357	+ display: none !important;
	358	+ }
	359	+}
	360	+CSS;
327	361
328		- if ( empty( $media_query_class ) ) {
329		- continue;
330		- }
331		-
332		- $style = sprintf( "@media (min-width: %dpx) {\n\t.cc-hide-on-%s {\n\t\tdisplay: none !important;\n\t}\n}", $breakpoint, $media_query_class );
333		-
334	362	$styles[] = apply_filters( 'content_control/block_styles', $style, $media_query, $breakpoint );
335	363	}
336	364
337	365	$styles = implode( "\n", $styles );
338	366
339		- $this->enqueue_block_styles( $styles );
340		- }
341		-
342		- /**
343		- * Enqueue generated block-control styles.
344		- *
345		- * @param string $styles CSS styles.
346		- *
347		- * @return void
348		- */
349		- protected function enqueue_block_styles( $styles ) {
350		- $handle = 'content-control-block-styles';
351		-
352		- wp_register_style( $handle, false, [], $this->container->get( 'version' ) );
353		- wp_enqueue_style( $handle );
354		- // Preserve valid HTML-like CSS syntax; wp_add_inline_style() handles style-tag safety.
355		- wp_add_inline_style( $handle, $styles );
	367	+ ?>
	368	+ <style id="content-control-block-styles">
	369	+ <?php echo $styles; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
	370	+ </style>
	371	+ <?php
356	372	}
357	373	}