Block theme: Update preview toggles on pattern preview

This also fixes an issue with the full-size previewer breaking out of the frame of the site. Fixes #645
WordPress · Mar 26, 2024 · 9f5dd2a · 9f5dd2a
1 parent 6c63864
commit 9f5dd2a
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 62 deletions.
diff --git a/...ontent/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/render.php b/...ontent/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/render.php
@@ -28,40 +28,26 @@
 	<?php echo get_block_wrapper_attributes(); // phpcs:ignore ?>
 	data-wp-interactive="wporg/patterns/preview"
 	data-wp-context="<?php echo esc_attr( $encoded_state ); ?>"
-	data-wp-init="actions.handleOnResize"
-	data-wp-on-window--resize="actions.handleOnResize"
+	data-wp-class--is-mobile-view="state.isWidthNarrow"
 >
-	<?php echo $content; ?>
-
 	<section class="wporg-pattern-view-control__controls wp-block-buttons" aria-label="<?php esc_attr_e( 'Preview width', 'wporg-patterns' ); ?>">
 		<div class="wp-block-button is-style-toggle is-small">
 			<button
 				class="wp-block-button__link wp-element-button"
-				data-wp-bind--aria-pressed="state.isWidth1200"
+				data-wp-bind--aria-pressed="state.isWidthWide"
 				data-wp-on--click="actions.onWidthChange"
 				data-width="1200"
-			>
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="-100 -1060 1160 1160" width="36" height="36" aria-hidden="true" focusable="false"><path d="M320-120v-80h80v-80H160q-33 0-56.5-23.5T80-360v-400q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v400q0 33-23.5 56.5T800-280H560v80h80v80H320ZM160-360h640v-400H160v400Zm0 0v-400 400Z"/></svg>
-				<span><?php _e( 'Full', 'wporg-patterns' ); ?></span>
-			</button>
-		</div>
-		<div class="wp-block-button is-style-toggle is-small">
-			<button
-				class="wp-block-button__link wp-element-button"
-				data-wp-bind--aria-pressed="state.isWidth960"
-				data-wp-on--click="actions.onWidthChange"
-				data-width="960"
 			>
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="36" height="36" aria-hidden="true" focusable="false"><path d="M20.5 16h-.7V8c0-1.1-.9-2-2-2H6.2c-1.1 0-2 .9-2 2v8h-.7c-.8 0-1.5.7-1.5 1.5h20c0-.8-.7-1.5-1.5-1.5zM5.7 8c0-.3.2-.5.5-.5h11.6c.3 0 .5.2.5.5v7.6H5.7V8z"></path></svg>
-				<span><?php _e( 'Default', 'wporg-patterns' ); ?></span>
+				<span><?php _e( 'Wide', 'wporg-patterns' ); ?></span>
 			</button>
 		</div>
 		<div class="wp-block-button is-style-toggle is-small">
 			<button
 				class="wp-block-button__link wp-element-button"
-				data-wp-bind--aria-pressed="state.isWidth600"
+				data-wp-bind--aria-pressed="state.isWidthMedium"
 				data-wp-on--click="actions.onWidthChange"
-				data-width="600"
+				data-width="800"
 			>
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="36" height="36" aria-hidden="true" focusable="false"><path d="M17 4H7c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm.5 14c0 .3-.2.5-.5.5H7c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5h10c.3 0 .5.2.5.5v12zm-7.5-.5h4V16h-4v1.5z"></path></svg>
 				<span><?php _e( 'Medium', 'wporg-patterns' ); ?></span>
@@ -70,13 +56,15 @@ class="wp-block-button__link wp-element-button"
 		<div class="wp-block-button is-style-toggle is-small">
 			<button
 				class="wp-block-button__link wp-element-button"
-				data-wp-bind--aria-pressed="state.isWidth480"
+				data-wp-bind--aria-pressed="state.isWidthNarrow"
 				data-wp-on--click="actions.onWidthChange"
-				data-width="480"
+				data-width="400"
 			>
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="36" height="36" aria-hidden="true" focusable="false"><path d="M15 4H9c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm.5 14c0 .3-.2.5-.5.5H9c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5h6c.3 0 .5.2.5.5v12zm-4.5-.5h2V16h-2v1.5z"></path></svg>
 				<span><?php _e( 'Narrow', 'wporg-patterns' ); ?></span>
 			</button>
 		</div>
 	</section>
+
+	<?php echo $content; ?>
 </div>
diff --git a/...ontent/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/style.scss b/...ontent/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/style.scss
@@ -3,38 +3,54 @@
 	width: 100%;
 	--wp--custom--wporg-pattern-preview--border--width: clamp(4px, calc(1.33vw - 1.33px), 20px);
 	--wp--custom--wporg-pattern-preview--border--radius: clamp(4px, calc(1.33vw - 1.33px), 20px);
+
+	.wp-block-wporg-pattern-preview {
+		box-sizing: content-box;
+		border: none;
+		width: calc(100% - var(--wp--custom--wporg-pattern-preview--border--width) * 2);
+		padding: var(--wp--custom--wporg-pattern-preview--border--width);
+		display: flex;
+		justify-content: center;
+	}
+
+	.wp-block-wporg-pattern-preview__container {
+		max-width: 100%;
+		border-radius: var(--wp--custom--wporg-pattern-preview--border--radius);
+		outline-color: var(--wp--custom--wporg-pattern-preview--border--color);
+		outline-style: solid;
+		outline-width: var(--wp--custom--wporg-pattern-preview--border--width);
+
+		> iframe {
+			margin: 0;
+			display: block;
+			border-radius: var(--wp--custom--wporg-pattern-preview--border--radius);
+			pointer-events: none;
+		}
+	}
+
+	&.is-mobile-view .wp-block-wporg-pattern-preview__container > iframe {
+		pointer-events: auto;
+	}
 }
 
 .wporg-pattern-view-control__controls {
-	margin-top: calc(var(--wp--preset--spacing--20) + var(--wp--custom--wporg-pattern-preview--border--width));
+	margin-bottom: var(--wp--preset--spacing--20);
 	display: flex;
 	justify-content: center;
-	gap: var(--wp--preset--spacing--10);
+	gap: 0;
 
 	.wp-element-button {
+		--wp--custom--button--spacing--padding--top: 1px !important;
+		--wp--custom--button--spacing--padding--bottom: 1px !important;
+		--wp--custom--button--spacing--padding--left: 8px !important;
+
 		display: flex !important;
-		flex-direction: column;
+		gap: 4px;
 		align-items: center;
+		border-color: transparent !important;
 
 		svg {
 			fill: currentColor !important;
 		}
 	}
 }
-
-.wp-block-wporg-pattern-view-control .wp-block-wporg-pattern-preview {
-	// The height is calculated based on the child iframe, `content-box` means
-	// this does not need to include the padding.
-	box-sizing: content-box;
-	border: none;
-	padding: var(--wp--custom--wporg-pattern-preview--border--width);
-
-	> iframe {
-		margin: 0 auto;
-		display: block;
-		border-radius: var(--wp--custom--wporg-pattern-preview--border--radius);
-		outline-color: var(--wp--custom--wporg-pattern-preview--border--color);
-		outline-style: solid;
-		outline-width: var(--wp--custom--wporg-pattern-preview--border--width);
-	}
-}
diff --git a/...p-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js b/...p-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js
@@ -22,17 +22,14 @@ const { actions, state } = store( 'wporg/patterns/preview', {
 		get transformCSS() {
 			return `scale(${ state.scale })`;
 		},
-		get isWidth1200() {
+		get isWidthWide() {
 			return 1200 === getContext().previewWidth;
 		},
-		get isWidth960() {
-			return 960 === getContext().previewWidth;
+		get isWidthMedium() {
+			return 800 === getContext().previewWidth;
 		},
-		get isWidth600() {
-			return 600 === getContext().previewWidth;
-		},
-		get isWidth480() {
-			return 480 === getContext().previewWidth;
+		get isWidthNarrow() {
+			return 400 === getContext().previewWidth;
 		},
 	},
 	actions: {
@@ -55,6 +52,12 @@ const { actions, state } = store( 'wporg/patterns/preview', {
 			const context = getContext();
 			const { ref } = getElement();
 
+			// If this is the "narrow" (mobile) view, it should use a fixed height.
+			if ( state.isWidthNarrow ) {
+				context.previewHeight = 600;
+				return;
+			}
+
 			// Need to "use" previewWidth so that `data-wp-watch` will re-run this action when it changes.
 			context.previewWidth; // eslint-disable-line no-unused-expressions
 
@@ -67,7 +70,8 @@ const { actions, state } = store( 'wporg/patterns/preview', {
 		handleOnResize() {
 			const context = getContext();
 			const { ref } = getElement();
-			context.pageWidth = ref.clientWidth;
+			console.log( ref.querySelector( 'div' )?.clientWidth );
+			context.pageWidth = ref.querySelector( 'div' )?.clientWidth;
 		},
 	},
 } );
diff --git a/...p-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/frame/render.php b/...p-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/frame/render.php
@@ -31,15 +31,17 @@
 	data-wp-on-window--resize="actions.handleOnResize"
 	tabIndex="-1"
 >
-	<iframe
-		title="<?php _e( 'Pattern Preview', 'wporg-patterns' ); ?>"
-		tabIndex="-1"
-		src="<?php echo esc_url( $view_url ); ?>"
-		data-wp-style--width="state.iframeWidthCSS"
-		data-wp-style--height="state.iframeHeightCSS"
-		data-wp-style--transform="state.transformCSS"
-		data-wp-init="actions.onLoad"
-		data-wp-watch="actions.updatePreviewHeight"
-		style="transform-origin: <?php echo is_rtl() ? 'top right' : 'top left'; ?>;"
-	></iframe>
+	<div class="wp-block-wporg-pattern-preview__container">
+		<iframe
+			title="<?php _e( 'Pattern Preview', 'wporg-patterns' ); ?>"
+			tabIndex="-1"
+			src="<?php echo esc_url( $view_url ); ?>"
+			data-wp-style--width="state.iframeWidthCSS"
+			data-wp-style--height="state.iframeHeightCSS"
+			data-wp-style--transform="state.transformCSS"
+			data-wp-init="actions.onLoad"
+			data-wp-watch="actions.updatePreviewHeight"
+			style="transform-origin: <?php echo is_rtl() ? 'top right' : 'top left'; ?>;"
+		></iframe>
+	</div>
 </div>
diff --git a/...p-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/frame/style.scss b/...p-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/frame/style.scss
@@ -7,6 +7,5 @@
 	iframe {
 		border: none;
 		max-width: none;
-		pointer-events: none;
 	}
 }