From 727dabe8b5591bb40df6a9742188bd243c651886 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Mon, 1 Apr 2024 15:47:43 -0400 Subject: [PATCH 1/9] Block theme: Add drag handles to resize pattern preview --- .../pattern-preview/controls/render.php | 41 +++++++++- .../pattern-preview/controls/style.scss | 47 +++++++++-- .../blocks/pattern-preview/controls/view.js | 81 ++++++++++++++----- 3 files changed, 141 insertions(+), 28 deletions(-) diff --git a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/render.php b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/render.php index f147a6fd..b8a3acb3 100644 --- a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/render.php +++ b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/render.php @@ -23,12 +23,16 @@ $p->remove_attribute( 'data-wp-context' ); $content = $p->get_updated_html(); +$html_id = wp_unique_id( 'pattern-preview-help-' ); + ?>
data-wp-interactive="wporg/patterns/preview" data-wp-context="" data-wp-class--is-mobile-view="state.isWidthNarrow" + data-wp-on-window--mousemove="actions.onDrag" + data-wp-on-window--mouseup="actions.onDragEnd" >
@@ -66,8 +70,37 @@ class="wp-block-button__link wp-element-button"
- +
+
+ +
+ +
+ +
+
+ + + + + + +
diff --git a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/style.scss b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/style.scss index ce1583dd..a63d8c0e 100644 --- a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/style.scss +++ b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/style.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + .wp-block-wporg-pattern-view-control { position: relative; width: 100%; @@ -7,7 +9,7 @@ .wp-block-wporg-pattern-preview { box-sizing: content-box; border: none; - width: calc(100% - var(--wp--custom--wporg-pattern-preview--border--width) * 2); + width: auto; padding: var(--wp--custom--wporg-pattern-preview--border--width); display: flex; justify-content: center; @@ -24,13 +26,10 @@ margin: 0; display: block; border-radius: var(--wp--custom--wporg-pattern-preview--border--radius); + // @todo This breaks scrolling. pointer-events: none; } } - - &.is-mobile-view .wp-block-wporg-pattern-preview__container > iframe { - pointer-events: auto; - } } .wporg-pattern-view-control__controls { @@ -54,3 +53,41 @@ } } } + +.wporg-pattern-preview__drag-container { + display: flex; + align-items: center; + justify-content: center; + gap: 4px; +} + +.wporg-pattern-view-control__drag-handle { + $height: 52px; + $width: 8px; + height: $height; + width: $width; + padding: 0; + border-radius: math.div($width, 2); + z-index: 2; + border: none; + background: var(--wp--preset--color--charcoal-5); + + &:hover { + background: var(--wp--preset--color--charcoal-4); + } + + &:focus { + border-radius: math.div($width, 2); + box-shadow: none; + background: var(--wp--preset--color--charcoal-4); + } + + &:focus-visible { + box-shadow: 0 0 0 1.5px var(--wp--custom--link--color--text); + } + + &.is-right { + left: auto; + right: -20px; + } +} diff --git a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js index a39f06f9..10c6b822 100644 --- a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js +++ b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js @@ -3,6 +3,11 @@ */ import { getContext, getElement, store } from '@wordpress/interactivity'; +/** + * Module constants + */ +const THROTTLE_DELAY = 10; + const { actions, state } = store( 'wporg/patterns/preview', { state: { get scale() { @@ -23,21 +28,74 @@ const { actions, state } = store( 'wporg/patterns/preview', { return `scale(${ state.scale })`; }, get isWidthWide() { - return 1200 === getContext().previewWidth; + return getContext().previewWidth >= 1200; }, get isWidthMedium() { - return 800 === getContext().previewWidth; + return getContext().previewWidth >= 800 && getContext().previewWidth < 1200; }, get isWidthNarrow() { - return 400 === getContext().previewWidth; + return getContext().previewWidth < 800; }, + isDrag: false, + throttleTimeout: 0, + prevX: 0, + direction: '', }, actions: { + updatePreviewWidth( newWidth ) { + const context = getContext(); + if ( newWidth > 320 && newWidth < 2400 ) { + context.previewWidth = newWidth; + } + }, onWidthChange() { const { ref } = getElement(); const context = getContext(); context.previewWidth = parseInt( ref.dataset.width, 10 ); }, + onLeftKeyDown( event ) { + const context = getContext(); + if ( 'ArrowLeft' === event.code ) { + actions.updatePreviewWidth( context.previewWidth + 20 ); + } else if ( 'ArrowRight' === event.code ) { + actions.updatePreviewWidth( context.previewWidth - 20 ); + } + }, + onRightKeyDown( event ) { + const context = getContext(); + if ( 'ArrowRight' === event.code ) { + actions.updatePreviewWidth( context.previewWidth + 20 ); + } else if ( 'ArrowLeft' === event.code ) { + actions.updatePreviewWidth( context.previewWidth - 20 ); + } + }, + onDragStart( event ) { + const { ref } = getElement(); + state.isDrag = true; + state.prevX = event.x; + state.direction = ref.dataset.direction; + }, + onDrag( event ) { + if ( ! state.isDrag || state.throttleTimeout > Date.now() ) { + return; + } + + const context = getContext(); + const delta = event.x - state.prevX; + if ( ( delta < 0 && 'left' === state.direction ) || ( delta > 0 && 'right' === state.direction ) ) { + actions.updatePreviewWidth( context.previewWidth + 2 * Math.abs( delta ) ); + } else { + actions.updatePreviewWidth( context.previewWidth - 2 * Math.abs( delta ) ); + } + + state.prevX = event.x; + state.throttleTimeout = Date.now() + THROTTLE_DELAY; + }, + onDragEnd() { + state.throttleTimeout = 0; + state.isDrag = false; + state.direction = ''; + }, *onLoad() { const { ref } = getElement(); @@ -50,22 +108,7 @@ const { actions, state } = store( 'wporg/patterns/preview', { }, updatePreviewHeight() { 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 - - const iframeDoc = ref.contentDocument; - const height = iframeDoc.querySelector( '.entry-content' )?.clientHeight; - if ( height ) { - context.previewHeight = height * state.scale; - } + context.previewHeight = 600; }, handleOnResize() { const context = getContext(); From f4366180199d78b7b9af4cad553658e472d5de28 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Wed, 10 Apr 2024 14:42:19 -0400 Subject: [PATCH 2/9] Remove throttle and use separate `dragPos` variable This helps prevent the cursor from coming out of sync with the drag handle --- .../src/blocks/pattern-preview/controls/view.js | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js index 10c6b822..ee9051a0 100644 --- a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js +++ b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js @@ -3,11 +3,6 @@ */ import { getContext, getElement, store } from '@wordpress/interactivity'; -/** - * Module constants - */ -const THROTTLE_DELAY = 10; - const { actions, state } = store( 'wporg/patterns/preview', { state: { get scale() { @@ -36,6 +31,7 @@ const { actions, state } = store( 'wporg/patterns/preview', { get isWidthNarrow() { return getContext().previewWidth < 800; }, + dragPos: 0, isDrag: false, throttleTimeout: 0, prevX: 0, @@ -74,22 +70,23 @@ const { actions, state } = store( 'wporg/patterns/preview', { state.isDrag = true; state.prevX = event.x; state.direction = ref.dataset.direction; + state.dragPos = getContext().previewWidth; }, onDrag( event ) { - if ( ! state.isDrag || state.throttleTimeout > Date.now() ) { + if ( ! state.isDrag ) { return; } - const context = getContext(); const delta = event.x - state.prevX; if ( ( delta < 0 && 'left' === state.direction ) || ( delta > 0 && 'right' === state.direction ) ) { - actions.updatePreviewWidth( context.previewWidth + 2 * Math.abs( delta ) ); + state.dragPos += 2 * Math.abs( delta ); + actions.updatePreviewWidth( state.dragPos ); } else { - actions.updatePreviewWidth( context.previewWidth - 2 * Math.abs( delta ) ); + state.dragPos -= 2 * Math.abs( delta ); + actions.updatePreviewWidth( state.dragPos ); } state.prevX = event.x; - state.throttleTimeout = Date.now() + THROTTLE_DELAY; }, onDragEnd() { state.throttleTimeout = 0; From 8834113441dfd02a3c5752df2ce2beafea83976d Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Wed, 10 Apr 2024 14:42:49 -0400 Subject: [PATCH 3/9] Reduce max scaling width to 1400 Still larger than the 1200 preview width, but more realistic than 2400 --- .../src/blocks/pattern-preview/controls/view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js index ee9051a0..42f47e75 100644 --- a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js +++ b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js @@ -40,7 +40,7 @@ const { actions, state } = store( 'wporg/patterns/preview', { actions: { updatePreviewWidth( newWidth ) { const context = getContext(); - if ( newWidth > 320 && newWidth < 2400 ) { + if ( newWidth > 320 && newWidth < 1400 ) { context.previewWidth = newWidth; } }, From 39b4bc45e9690a3c6a919723a2c56af335669e13 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Wed, 10 Apr 2024 14:43:21 -0400 Subject: [PATCH 4/9] Run the resize handler when the drag change happens --- .../src/blocks/pattern-preview/controls/view.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js index 42f47e75..6440616e 100644 --- a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js +++ b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js @@ -85,6 +85,7 @@ const { actions, state } = store( 'wporg/patterns/preview', { state.dragPos -= 2 * Math.abs( delta ); actions.updatePreviewWidth( state.dragPos ); } + actions.handleOnResize(); state.prevX = event.x; }, @@ -110,7 +111,7 @@ const { actions, state } = store( 'wporg/patterns/preview', { handleOnResize() { const context = getContext(); const { ref } = getElement(); - context.pageWidth = ref.querySelector( 'div' )?.clientWidth; + context.pageWidth = ref.querySelector( '.wp-block-wporg-pattern-preview__container' )?.clientWidth; }, }, } ); From 782bdd0d0b160a948d3d6f46432190e817d02acb Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Wed, 10 Apr 2024 17:36:50 -0400 Subject: [PATCH 5/9] Add a class while dragging, only block pointer events then --- .../src/blocks/pattern-preview/controls/render.php | 1 + .../src/blocks/pattern-preview/controls/style.scss | 6 ++++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/render.php b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/render.php index b8a3acb3..1858c06e 100644 --- a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/render.php +++ b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/render.php @@ -31,6 +31,7 @@ data-wp-interactive="wporg/patterns/preview" data-wp-context="" data-wp-class--is-mobile-view="state.isWidthNarrow" + data-wp-class--is-dragging="state.isDrag" data-wp-on-window--mousemove="actions.onDrag" data-wp-on-window--mouseup="actions.onDragEnd" > diff --git a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/style.scss b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/style.scss index a63d8c0e..dbc59d23 100644 --- a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/style.scss +++ b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/style.scss @@ -26,10 +26,12 @@ margin: 0; display: block; border-radius: var(--wp--custom--wporg-pattern-preview--border--radius); - // @todo This breaks scrolling. - pointer-events: none; } } + + &.is-dragging .wp-block-wporg-pattern-preview__container > iframe { + pointer-events: none; + } } .wporg-pattern-view-control__controls { From 869eb74b5cbf98f1e164d4a74f4634256442785c Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Wed, 10 Apr 2024 17:57:12 -0400 Subject: [PATCH 6/9] Ensure the resize happens on toggles --- .../src/blocks/pattern-preview/controls/view.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js index 6440616e..93839579 100644 --- a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js +++ b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { getContext, getElement, store } from '@wordpress/interactivity'; +import { getContext, getElement, store, withScope } from '@wordpress/interactivity'; const { actions, state } = store( 'wporg/patterns/preview', { state: { @@ -48,6 +48,10 @@ const { actions, state } = store( 'wporg/patterns/preview', { const { ref } = getElement(); const context = getContext(); context.previewWidth = parseInt( ref.dataset.width, 10 ); + setTimeout( + withScope( () => actions.handleOnResize() ), + 0 + ); }, onLeftKeyDown( event ) { const context = getContext(); @@ -111,7 +115,14 @@ const { actions, state } = store( 'wporg/patterns/preview', { handleOnResize() { const context = getContext(); const { ref } = getElement(); - context.pageWidth = ref.querySelector( '.wp-block-wporg-pattern-preview__container' )?.clientWidth; + + // Back up to the block container, so that this works regardless + // of which element interaction triggered it. + const container = ref.closest( '.wp-block-wporg-pattern-view-control' ); + if ( container ) { + const preview = container.querySelector( '.wp-block-wporg-pattern-preview__container' ); + context.pageWidth = preview?.clientWidth; + } }, }, } ); From da77dd21c33b18aca76a63dc90259997944053fc Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Wed, 10 Apr 2024 18:11:21 -0400 Subject: [PATCH 7/9] Update styles --- .../pattern-preview/controls/style.scss | 34 +++++++++++++------ 1 file changed, 24 insertions(+), 10 deletions(-) diff --git a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/style.scss b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/style.scss index dbc59d23..d48f1b65 100644 --- a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/style.scss +++ b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/style.scss @@ -60,36 +60,50 @@ display: flex; align-items: center; justify-content: center; - gap: 4px; } .wporg-pattern-view-control__drag-handle { $height: 52px; - $width: 8px; + $width: 4px; height: $height; width: $width; + box-sizing: content-box; padding: 0; - border-radius: math.div($width, 2); z-index: 2; border: none; - background: var(--wp--preset--color--charcoal-5); + background-color: transparent; + cursor: col-resize; - &:hover { + &::before { + content: ""; + display: block; + height: $height; + width: $width; + border-radius: math.div($width, 2); + background: var(--wp--preset--color--charcoal-5); + } + + &:hover::before { background: var(--wp--preset--color--charcoal-4); } &:focus { - border-radius: math.div($width, 2); box-shadow: none; - background: var(--wp--preset--color--charcoal-4); + + &::before { + background: var(--wp--preset--color--charcoal-4); + } } - &:focus-visible { + &:focus-visible::before { box-shadow: 0 0 0 1.5px var(--wp--custom--link--color--text); } &.is-right { - left: auto; - right: -20px; + padding-left: 10px; + } + + &.is-left { + padding-right: 10px; } } From d7b89f4891e09e7cc6474f34a7f1f6fbbbec3d09 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 11 Apr 2024 10:46:32 -0400 Subject: [PATCH 8/9] Hide text so it's only read when on the relevant button --- .../src/blocks/pattern-preview/controls/render.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/render.php b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/render.php index 1858c06e..f7130693 100644 --- a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/render.php +++ b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/render.php @@ -98,10 +98,10 @@ class="wporg-pattern-view-control__drag-handle is-right" - + - + From 86fff3305c556e0e3cd67a4aa1aa54f8a1afa41e Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 11 Apr 2024 10:46:57 -0400 Subject: [PATCH 9/9] Hide drag buttons on small tablet/phone sizes --- .../src/blocks/pattern-preview/controls/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/style.scss b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/style.scss index d48f1b65..e92e2f85 100644 --- a/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/style.scss +++ b/public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/style.scss @@ -106,4 +106,8 @@ &.is-left { padding-right: 10px; } + + @media (max-width: 782px) { + display: none; + } }