From 9702a2b51690c48cc6db927339151cf47ae5f095 Mon Sep 17 00:00:00 2001
From: Tom J Nowell <contact@tomjn.com>
Date: Sun, 20 Sep 2026 18:05:17 +0100
Subject: [PATCH] Show the filtered breakpoint in the label visibility control

The option read 'Hide below 782px' whatever hm_button_icon_mobile_breakpoint returned, so a site filtering it to 600 told editors the wrong width.
---
 README.md      |  5 +++--
 inc/assets.php |  7 ++++---
 src/index.js   | 11 ++++++++---
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 6d85eba..010ecf4 100644
--- a/README.md
+++ b/README.md
@@ -111,8 +111,9 @@ size offered.
 ### `hm_button_icon_mobile_breakpoint`
 
 The viewport width below which a button's label set to **Hide below 782px**
-clips. Defaults to `782`, the width core treats as the top of mobile. Has no
-effect on a label set to **Always hide**, which carries no breakpoint.
+clips. Defaults to `782`, the width core treats as the top of mobile. The
+option's name in the editor follows the filtered value. Has no effect on a
+label set to **Always hide**, which carries no breakpoint.
 
 ```php
 add_filter( 'hm_button_icon_mobile_breakpoint', fn (): int => 600 );
diff --git a/inc/assets.php b/inc/assets.php
index 9a3c891..60ab2e4 100644
--- a/inc/assets.php
+++ b/inc/assets.php
@@ -194,9 +194,10 @@ function enqueue_editor_assets(): void {
 		EDITOR_HANDLE,
 		'window.hmButtonIcon = ' . wp_json_encode(
 			[
-				'attributes'  => Attributes\definitions(),
-				'collections' => Attributes\collections(),
-				'sizes'       => Attributes\sizes(),
+				'attributes'       => Attributes\definitions(),
+				'collections'      => Attributes\collections(),
+				'sizes'            => Attributes\sizes(),
+				'mobileBreakpoint' => mobile_breakpoint(),
 			]
 		) . ';',
 		'before'
diff --git a/src/index.js b/src/index.js
index 1c757eb..c1492cb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -56,6 +56,7 @@ const SETTINGS = window.hmButtonIcon ?? {};
 const ATTRIBUTES = SETTINGS.attributes ?? {};
 const COLLECTIONS = SETTINGS.collections ?? [];
 const SIZES = SETTINGS.sizes?.length ? SETTINGS.sizes : [ 16, 24, 32 ];
+const MOBILE_BREAKPOINT = SETTINGS.mobileBreakpoint ?? 782;
 
 /** Attribute values that clear whichever source is not in use. */
 const NO_ICON = {
@@ -480,9 +481,13 @@ const withIconControls = createHigherOrderComponent(
 											value: 'visible',
 										},
 										{
-											label: __(
-												'Hide below 782px',
-												'button-block-icon'
+											label: sprintf(
+												/* translators: %d: viewport width in pixels. */
+												__(
+													'Hide below %dpx',
+													'button-block-icon'
+												),
+												MOBILE_BREAKPOINT
 											),
 											value: 'mobile',
 										},