Merge pull request #1236 from tomusborne/release/1.9.1

Release: 1.9.1

dist/blocks.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-api-fetch', 'wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-date', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-notices', 'wp-primitives', 'wp-rich-text'), 'version' => 'fe910a872d1480c0fbc9');
+<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-api-fetch', 'wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-date', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-notices', 'wp-primitives', 'wp-rich-text'), 'version' => '8eefe8b6380072d833c4');

dist/pattern-library.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-primitives', 'wp-url'), 'version' => '714757ab18b461bf9f2b');
+<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-primitives', 'wp-url'), 'version' => 'e4be361b6b75918d153c');

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "generateblocks",
-	"version": "1.9.0",
+	"version": "1.9.1",
 	"private": true,
 	"description": "A small collection of lightweight WordPress blocks that can accomplish nearly anything.",
 	"author": "Tom Usborne",

plugin.php

@@ -5,7 +5,7 @@
  * Description: A small collection of lightweight WordPress blocks that can accomplish nearly anything.
  * Author: Tom Usborne
  * Author URI: https://tomusborne.com
- * Version: 1.9.0
+ * Version: 1.9.1
  * Requires at least: 5.9
  * Requires PHP: 7.2
  * License: GPL2+
@@ -19,7 +19,7 @@
 	exit; // Exit if accessed directly.
 }
 
-define( 'GENERATEBLOCKS_VERSION', '1.9.0' );
+define( 'GENERATEBLOCKS_VERSION', '1.9.1' );
 define( 'GENERATEBLOCKS_DIR', plugin_dir_path( __FILE__ ) );
 define( 'GENERATEBLOCKS_DIR_URL', plugin_dir_url( __FILE__ ) );
 

readme.txt

@@ -5,7 +5,7 @@ Tags: blocks, gutenberg, editor, page builder, posts
 Requires at least: 5.9
 Tested up to: 6.5
 Requires PHP: 7.2
-Stable tag: 1.9.0
+Stable tag: 1.9.1
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
@@ -83,6 +83,13 @@ GenerateBlocks was built to work hand-in-hand with [GeneratePress](https://gener
 
 == Changelog ==
 
+= 1.9.1 =
+* Fix: Patterns not loading properly in Chrome
+* Fix: Pattern search mixing up active libraries
+* Fix: Broken pattern preview in bulk select mode
+* Fix: Headline editor margin when set to div
+* Tweak: Improve pattern preview loading performance
+
 = 1.9.0 =
 * Security: Disallow scripts in custom field values
 * Feature: New Pattern Library

src/blocks/headline/editor.scss

@@ -9,6 +9,11 @@
 			display: inline-block;
 		}
 	}
+
+	:where(div.gb-headline) {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
 }
 
 .gb-image-replace-url {

src/pattern-library/components/library-layout.js

@@ -62,16 +62,19 @@ export default function LibraryLayout( { closeModal } ) {
 
 	function maybeGetCachedSearchResult( value ) {
 		const category = activeCategory === '' ? 'all' : activeCategory;
+		const library = activeLibrary?.id || '';
 
-		if ( ! searchCache[ category ] ) {
-			searchCache[ category ] = {};
+		if ( ! searchCache[ library ] || ! searchCache[ library ][ category ] ) {
+			searchCache[ library ] = searchCache[ library ] || {};
+			searchCache[ library ][ category ] = searchCache[ library ][ category ] || {};
 		}
 
-		if ( ! searchCache[ category ][ value ] ) {
+		// Check if the value exists in the cache
+		if ( ! searchCache[ library ][ category ][ value ] ) {
 			return false;
 		}
 
-		return searchCache[ category ][ value ];
+		return searchCache[ library ][ category ][ value ];
 	}
 
 	const contentStyles = {};
@@ -147,6 +150,7 @@ export default function LibraryLayout( { closeModal } ) {
 						setSearch( value );
 
 						const category = activeCategory === '' ? 'all' : activeCategory;
+
 						// Check if result has been cached already
 						const cachedResult = maybeGetCachedSearchResult( value );
 
@@ -157,7 +161,11 @@ export default function LibraryLayout( { closeModal } ) {
 
 						const newPatternList = filterPatterns( value );
 
-						searchCache[ category ][ value ] = newPatternList;
+						const library = activeLibrary?.id;
+
+						if ( library ) {
+							searchCache[ library ][ category ][ value ] = newPatternList;
+						}
 
 						setFilteredPatterns( newPatternList );
 					} } />
@@ -179,6 +187,7 @@ export default function LibraryLayout( { closeModal } ) {
 							closeModal={ closeModal }
 							globalStyleData={ globalStyleData }
 							setBulkInsertEnabled={ setBulkInsertEnabled }
+							filteredPatterns={ filteredPatterns }
 						/>
 					) }
 				</>

src/pattern-library/components/pattern-search.js

@@ -4,14 +4,18 @@ import { useDebounce } from '@wordpress/compose';
 import { useLibrary } from './library-provider';
 
 export default function PatternSearch( { onChange } ) {
-	const { setSearch } = useLibrary();
+	const { setSearch, activeLibrary } = useLibrary();
 	const [ searchInput, setSearchInput ] = useState( '' );
 	const setDebouncedInput = useDebounce( setSearch, 500 );
 
 	useEffect( () => {
 		setDebouncedInput( searchInput );
 	}, [ searchInput ] );
 
+	useEffect( () => {
+		setSearchInput( '' );
+	}, [ activeLibrary?.id ] );
+
 	return (
 		<SearchControl
 			value={ searchInput }

src/pattern-library/components/pattern.js

@@ -15,7 +15,6 @@ export default function Pattern( { pattern, isLoading, isActive = false, globalS
 	const [ height, setHeight ] = useState( 0 );
 	const [ injectContent, setInjectContent ] = useState( false );
 	const [ editorColors, setEditorColors ] = useState( {} );
-	const [ isVisible, setIsVisible ] = useState( !! isActive );
 	const [ isLoaded, setIsLoaded ] = useState( false );
 	const [ patternWidth, setPatternWidth ] = useState( 0 );
 	const [ isResizing, setIsResizing ] = useState( false );
@@ -57,42 +56,11 @@ export default function Pattern( { pattern, isLoading, isActive = false, globalS
 		}
 	}, [ elementRef.current?.clientWidth, isResizing ] );
 
-	/**
-	 * Set up lazy loading on the iframes.
-	 */
-	useEffect( () => {
-		const intersectionObserver = new IntersectionObserver(
-			( entries ) => {
-				entries.forEach( ( entry ) => {
-					if ( entry.isIntersecting ) {
-						setIsVisible( true );
-						intersectionObserver.disconnect();
-					}
-				} );
-			},
-			{
-				root: null,
-				rootMargin: '0px',
-				threshold: 0.01,
-			}
-		);
-
-		if ( elementRef.current ) {
-			intersectionObserver.observe( elementRef.current );
-		}
-
-		return () => {
-			if ( intersectionObserver ) {
-				intersectionObserver.disconnect();
-			}
-		};
-	}, [] );
-
 	/**
 	 * Insert our pattern preview into the empty iframe.
 	 */
 	useEffect( () => {
-		if ( ! isVisible || ! injectContent ) {
+		if ( ! injectContent ) {
 			return;
 		}
 
@@ -119,7 +87,7 @@ export default function Pattern( { pattern, isLoading, isActive = false, globalS
 			setHeight( document.body.scrollHeight );
 			setIsLoaded( true );
 		} );
-	}, [ injectContent, isVisible ] );
+	}, [ injectContent ] );
 
 	/**
 	 * Store our editor background and text color.
@@ -191,7 +159,7 @@ export default function Pattern( { pattern, isLoading, isActive = false, globalS
 				firstVisibleElement.style.marginRight = 'auto';
 			}
 		}
-	}, [ patternWidth, injectContent, isVisible ] );
+	}, [ patternWidth, injectContent ] );
 
 	const viewportHeight = Math.round( height * ( viewport / iframe ) );
 
@@ -203,6 +171,14 @@ export default function Pattern( { pattern, isLoading, isActive = false, globalS
 		justifyContent: ( viewportHeight + 40 ) < patternHeight ? 'center' : '',
 	};
 
+	const sandbox = [
+		'allow-same-origin',
+	];
+
+	if ( isActive ) {
+		sandbox.push( 'allow-scripts' );
+	}
+
 	return (
 		<div
 			className="gb-pattern-frame"
@@ -216,7 +192,7 @@ export default function Pattern( { pattern, isLoading, isActive = false, globalS
 				className="gb-pattern"
 				style={ ! isActive ? wrapperStyle : { minHeight: '200px' } }
 			>
-				{ !! isVisible && ! isLoaded && <Spinner /> }
+				{ ! isLoaded && <Spinner /> }
 				<div
 					style={ ! isActive ? {
 						width: `${ viewport }px`,
@@ -234,9 +210,7 @@ export default function Pattern( { pattern, isLoading, isActive = false, globalS
 						<iframe
 							id={ id }
 							onLoad={ () => {
-								if ( isVisible ) {
-									setInjectContent( true );
-								}
+								setInjectContent( true );
 
 								const iframeDoc = iframeRef.current.contentDocument || iframeRef.current.contentWindow.document;
 
@@ -273,6 +247,7 @@ export default function Pattern( { pattern, isLoading, isActive = false, globalS
 							} }
 							tabIndex="-1"
 							loading="lazy"
+							sandbox={ sandbox.join( ' ' ) }
 						/>
 					</div>
 				</div>

src/pattern-library/components/selected-patterns.js

@@ -10,7 +10,7 @@ import { useLibrary } from './library-provider';
 import { InsertPattern } from './insert-pattern';
 import { isEmptyContentBlock, updateUniqueIds } from '../utils';
 
-export function SelectedPatterns( { closeModal, globalStyleData, setBulkInsertEnabled } ) {
+export function SelectedPatterns( { closeModal, globalStyleData, setBulkInsertEnabled, filteredPatterns } ) {
 	const { insertBlocks, replaceBlock } = useDispatch( blockEditorStore );
 	const {
 		selectedPatterns = [],
@@ -49,6 +49,7 @@ export function SelectedPatterns( { closeModal, globalStyleData, setBulkInsertEn
 						icon={ seen }
 						label={ __( 'Preview Pattern', 'generateblocks' ) }
 						showTooltip
+						disabled={ ! filteredPatterns.find( ( { id } ) => id === pattern.id ) }
 						onClick={ () => {
 							setActivePatternId( pattern.id );
 							const patternContent = ref.current.closest( '.gb-pattern-library__content' );