Skip to content

Commit

Permalink
Block theme: Add drag handles to resize pattern preview
Browse files Browse the repository at this point in the history
  • Loading branch information
@ryelle
ryelle committed Apr 10, 2024
1 parent fa15e76 commit e2f58d2
Show file tree
Hide file tree
Showing 3 changed files with 138 additions and 25 deletions.
35 changes: 34 additions & 1 deletion ...ontent/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/render.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,16 @@
$p->remove_attribute( 'data-wp-context' );
$content = $p->get_updated_html();

$html_id = wp_unique_id( 'pattern-preview-help-' );

?>
<div
<?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-class--is-mobile-view="state.isWidthNarrow"
data-wp-on-window--mousemove="actions.onDrag"
data-wp-on-window--mouseup="actions.onDragEnd"
>
<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">
Expand Down Expand Up @@ -66,5 +70,34 @@ class="wp-block-button__link wp-element-button"
</div>
</section>

<?php echo $content; ?>
<div class="wporg-pattern-preview__drag-container">
<div class="wporg-pattern-preview__drag-handle">
<button
class="wporg-pattern-view-control__drag-handle is-left"
aria-label="<?php esc_attr( 'Drag to resize', 'wporg-patterns' ); ?>"
aria-describedby="<?php echo esc_attr( $html_id ); ?>-left"
data-direction="left"
data-wp-on--keydown="actions.onLeftKeyDown"
data-wp-on--mousedown="actions.onDragStart"
></button>
</div>
<?php echo $content; ?>
<div class="wporg-pattern-preview__drag-handle">
<button
class="wporg-pattern-view-control__drag-handle is-right"
aria-label="<?php esc_attr( 'Drag to resize', 'wporg-patterns' ); ?>"
aria-describedby="<?php echo esc_attr( $html_id ); ?>-right"
data-direction="right"
data-wp-on--keydown="actions.onRightKeyDown"
data-wp-on--mousedown="actions.onDragStart"
></button>
</div>
</div>

<span id="<?php echo esc_attr( $html_id ); ?>-left" class="screen-reader-text">
<?php _e( 'Drag or use arrow keys to resize the pattern preview. Left to make larger, right to make smaller.', 'wporg-patterns' ); ?>
</span>
<span id="<?php echo esc_attr( $html_id ); ?>-right" class="screen-reader-text">
<?php _e( 'Drag or use arrow keys to resize the pattern preview. Right to make larger, left to make smaller.', 'wporg-patterns' ); ?>
</span>
</div>
47 changes: 42 additions & 5 deletions ...ontent/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use "sass:math";

.wp-block-wporg-pattern-view-control {
position: relative;
width: 100%;
Expand All @@ -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;
Expand All @@ -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 {
Expand All @@ -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;
}
}
81 changes: 62 additions & 19 deletions ...p-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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();

Expand All @@ -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();
Expand Down

0 comments on commit e2f58d2

Please sign in to comment.