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..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 @@ -23,12 +23,17 @@ $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-class--is-dragging="state.isDrag" + data-wp-on-window--mousemove="actions.onDrag" + data-wp-on-window--mouseup="actions.onDragEnd" >
@@ -66,8 +71,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..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 @@ -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,12 +26,11 @@ 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; + &.is-dragging .wp-block-wporg-pattern-preview__container > iframe { + pointer-events: none; } } @@ -54,3 +55,59 @@ } } } + +.wporg-pattern-preview__drag-container { + display: flex; + align-items: center; + justify-content: center; +} + +.wporg-pattern-view-control__drag-handle { + $height: 52px; + $width: 4px; + height: $height; + width: $width; + box-sizing: content-box; + padding: 0; + z-index: 2; + border: none; + background-color: transparent; + cursor: col-resize; + + &::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 { + box-shadow: none; + + &::before { + background: var(--wp--preset--color--charcoal-4); + } + } + + &:focus-visible::before { + box-shadow: 0 0 0 1.5px var(--wp--custom--link--color--text); + } + + &.is-right { + padding-left: 10px; + } + + &.is-left { + padding-right: 10px; + } + + @media (max-width: 782px) { + display: none; + } +} 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..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: { @@ -23,20 +23,80 @@ 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; }, + dragPos: 0, + isDrag: false, + throttleTimeout: 0, + prevX: 0, + direction: '', }, actions: { + updatePreviewWidth( newWidth ) { + const context = getContext(); + if ( newWidth > 320 && newWidth < 1400 ) { + context.previewWidth = newWidth; + } + }, onWidthChange() { const { ref } = getElement(); const context = getContext(); context.previewWidth = parseInt( ref.dataset.width, 10 ); + setTimeout( + withScope( () => actions.handleOnResize() ), + 0 + ); + }, + 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; + state.dragPos = getContext().previewWidth; + }, + onDrag( event ) { + if ( ! state.isDrag ) { + return; + } + + const delta = event.x - state.prevX; + if ( ( delta < 0 && 'left' === state.direction ) || ( delta > 0 && 'right' === state.direction ) ) { + state.dragPos += 2 * Math.abs( delta ); + actions.updatePreviewWidth( state.dragPos ); + } else { + state.dragPos -= 2 * Math.abs( delta ); + actions.updatePreviewWidth( state.dragPos ); + } + actions.handleOnResize(); + + state.prevX = event.x; + }, + onDragEnd() { + state.throttleTimeout = 0; + state.isDrag = false; + state.direction = ''; }, *onLoad() { const { ref } = getElement(); @@ -50,27 +110,19 @@ 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(); const { ref } = getElement(); - context.pageWidth = ref.querySelector( 'div' )?.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; + } }, }, } );