Use css aspect-ratio instead of JS.

WordPress · Jan 23, 2023 · c7068fa · c7068fa
1 parent 71840c3
commit c7068fa
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 15 deletions.
diff --git a/packages/edit-site/src/components/start-template-options/index.js b/packages/edit-site/src/components/start-template-options/index.js
@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
 import { useState, useEffect, useMemo } from '@wordpress/element';
 import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { useAsyncList, useResizeObserver } from '@wordpress/compose';
+import { useAsyncList } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { parse } from '@wordpress/blocks';
 
@@ -36,8 +36,6 @@ function useFallbackTemplateContent( slug, isCustom = false ) {
 const START_BLANK_TITLE = __( 'Start blank' );
 
 function PatternSelection( { fallbackContent, onChoosePattern, postType } ) {
- const [ resizeObserver, sizes ] = useResizeObserver();
- const [ gridHeight, setGridHeight ] = useState( '320px' );
  const [ , , onChange ] = useEntityBlockEditor( 'postType', postType );
  const blockPatterns = useMemo(
  () => [
@@ -57,24 +55,14 @@ function PatternSelection( { fallbackContent, onChoosePattern, postType } ) {
  [ fallbackContent ]
  );
  const shownBlockPatterns = useAsyncList( blockPatterns );
- // When the width changes update the height so we keep the 3x4 proporsions.
- useEffect( () => {
- const elementOffSetWidth = window?.document?.querySelector(
- '.edit-site-start-template-options__pattern-container .block-editor-block-patterns-list__list-item'
- )?.offsetWidth;
- if ( elementOffSetWidth ) {
- setGridHeight( `${ ( elementOffSetWidth * 4 ) / 3 }px` );
- }
- }, [ shownBlockPatterns, sizes.width ] );
+
  return (
  <div
  className="edit-site-start-template-options__pattern-container"
  style={ {
  '--wp-edit-site-start-template-options-start-blank': `"${ START_BLANK_TITLE }"`,
- '--wp-edit-site-start-template-options-grid-height': gridHeight,
  } }
  >
- { resizeObserver }
  <BlockPatternsList
  blockPatterns={ blockPatterns }
  shownPatterns={ shownBlockPatterns }

diff --git a/packages/edit-site/src/components/start-template-options/style.scss b/packages/edit-site/src/components/start-template-options/style.scss
@@ -19,11 +19,11 @@
  margin-top: $grid-unit-05;
  gap: $grid-unit-30;
  grid-template-columns: repeat(auto-fit, minmax(min(100%/2, max(240px, 100%/10)), 1fr));
- grid-auto-rows: var(--wp-edit-site-start-template-options-grid-height);
  .block-editor-block-patterns-list__list-item {
  break-inside: avoid-column;
  margin-bottom: 0;
  width: 100%;
+ aspect-ratio: 3/4;
 
  .block-editor-block-preview__container {
  height: 100%;