PluginProbe
aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder / trunk
aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder vtrunk
2.12.0 2.11.1 2.11.0 2.10.0 2.9.0 2.7.4 2.7.5 2.7.6 2.7.7 2.8.0 2.8.1 2.9.1 trunk 1.0 1.0-beta1 1.0-beta2 1.0-beta3 1.0.1 1.0.2 1.0.3 1.1.0 1.1.1 1.1.2 1.2.0 1.2.1 All 78 releases
ablocks / includes / performance / touch-targets.php

touch-targets.php in aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder trunk, at includes/performance/touch-targets.php

55 lines 1.7 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 namespace ABlocks\Performance;
3
4 if ( ! defined( 'ABSPATH' ) ) {
5 exit;
6 }
7
8 use ABlocks\Helper;
9
10 /**
11 * Performance Suite — mobile touch-target sizing.
12 *
13 * PageSpeed / accessibility flags interactive elements that are smaller than
14 * ~48px or too close together on mobile ("Touch targets do not have sufficient
15 * size or spacing"). This prints a small, mobile-only stylesheet that gives
16 * aBlocks buttons and linked icons a minimum tap size.
17 *
18 * Opt-in via `perf_touch_targets` (default off — it nudges visual sizing, so
19 * it's promoted only after the site owner confirms it fits their design). The
20 * target size is filterable.
21 */
22 class TouchTargets {
23
24 public static function init() {
25 if ( is_admin() ) {
26 return;
27 }
28 $enabled = (bool) apply_filters(
29 'ablocks/perf/perf_touch_targets',
30 (bool) Helper::get_settings( 'perf_touch_targets', false )
31 );
32 if ( ! $enabled ) {
33 return;
34 }
35 add_action( 'wp_head', [ new self(), 'print_css' ], 8 );
36 }
37
38 public function print_css() {
39 $min = (int) apply_filters( 'ablocks/perf/touch_target_min_px', 44 );
40 $min = max( 24, min( 96, $min ) );
41 $max_view = (int) apply_filters( 'ablocks/perf/touch_target_breakpoint_px', 600 );
42
43 $css = sprintf(
44 '@media (max-width:%1$dpx){' .
45 '.ablocks-button{min-height:%2$dpx;display:inline-flex;align-items:center;justify-content:center;}' .
46 'a:has(>.ablocks-icon-wrap),a:has(>.ablocks-image-icon){min-width:%2$dpx;min-height:%2$dpx;display:inline-flex;align-items:center;justify-content:center;}' .
47 '}',
48 $max_view,
49 $min
50 );
51
52 echo '<style id="ablocks-touch-targets">' . $css . '</style>' . "\n"; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
53 }
54 }
55