Merge pull request #4361 from Codeinwp/prf/feat/blog

feat: blog archive improvements

Author: abaicus

assets/apps/components/src/HOC/Responsive.js

@@ -8,12 +8,16 @@ const ResponsiveControl = (props) => {
 	const { onChange, excluded, controlLabel, hideResponsive, children } =
 		props;
 
+	const handleDeviceChange = (device) => {
+		onChange(checkExcludedTablet(device));
+	};
+
 	useEffect(() => {
-		window.wp.customize.bind('ready', () => {
-			window.wp.customize.previewedDevice.bind((newDevice) => {
-				onChange(checkExcludedTablet(newDevice));
-			});
-		});
+		wp.customize.state('previewedDevice').bind(handleDeviceChange);
+
+		return () => {
+			wp.customize.state('previewedDevice').unbind(handleDeviceChange);
+		};
 	}, []);
 
 	const checkExcludedTablet = (device) => {

assets/apps/components/src/Style/_radio-image.scss

@@ -32,6 +32,8 @@
 	border: none;
 	padding: 0;
 	background: 0;
+	max-width: 70%;
+	margin: 0 auto;
 
 	&.active {
 	  outline: 2px solid $wp-blue;

assets/apps/components/src/Style/_sizing.scss

@@ -52,7 +52,7 @@
     }
   }
 
-  label {
+  label.label {
     text-transform: uppercase;
     font-size: 9px;
     text-align: center;

assets/apps/customizer-controls/src/common.js

@@ -0,0 +1,39 @@
+const VisibilityIcon = ({ size }) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		strokeWidth="2"
+		strokeLinecap="round"
+		strokeLinejoin="round"
+		className="lucide lucide-eye w-4 h-4 text-gray-500"
+	>
+		<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
+		<circle cx="12" cy="12" r="3"></circle>
+	</svg>
+);
+
+const HiddenIcon = ({ size }) => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width={size}
+		height={size}
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		strokeWidth="2"
+		strokeLinecap="round"
+		strokeLinejoin="round"
+		className="lucide lucide-eye-off"
+	>
+		<path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" />
+		<path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
+		<path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" />
+		<path d="m2 2 20 20" />
+	</svg>
+);
+
+export { VisibilityIcon, HiddenIcon };