Fix enableResizing, move prevent default to the Style Book component …

…for simplicity
WordPress · May 17, 2023 · 5e7783f · 5e7783f
1 parent 4600550
commit 5e7783f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 24 deletions.
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
@@ -51,20 +51,6 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 	);
 }
 
-function GlobalStylesStyleBook( { onClick, onSelect } ) {
-	return (
-		<StyleBook
-			isSelected={ () => false }
-			onClick={ onClick }
-			onSelect={ async ( blockName ) => {
-				await onSelect( blockName );
-			} }
-			showCloseButton={ false }
-			showTabs={ false }
-		/>
-	);
-}
-
 export default function SidebarNavigationScreenGlobalStyles() {
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
@@ -87,11 +73,7 @@ export default function SidebarNavigationScreenGlobalStyles() {
 			openGeneralSidebar( 'edit-site/global-styles' ),
 		] );
 
-	const openStyleBook = async ( event ) => {
-		if ( event.defaultPrevented ) {
-			return;
-		}
-		event.preventDefault();
+	const openStyleBook = async () => {
 		await openGlobalStyles();
 		// Open the Style Book once the canvas mode is set to edit,
 		// and the global styles sidebar is open. This ensures that
@@ -136,9 +118,13 @@ export default function SidebarNavigationScreenGlobalStyles() {
 				}
 			/>
 			{ isStyleBookOpened && ! isMobileViewport && (
-				<GlobalStylesStyleBook
+				<StyleBook
+					enableResizing={ false }
+					isSelected={ () => false }
 					onClick={ openStyleBook }
 					onSelect={ openStyleBook }
+					showCloseButton={ false }
+					showTabs={ false }
 				/>
 			) }
 		</>

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
@@ -164,6 +164,7 @@ function getExamples() {
 }
 
 function StyleBook( {
+	enableResizing = true,
 	isSelected,
 	onClick,
 	onSelect,
@@ -201,7 +202,7 @@ function StyleBook( {
 
 	return (
 		<EditorCanvasContainer
-			enableResizing={ true }
+			enableResizing={ enableResizing }
 			closeButtonLabel={
 				showCloseButton ? __( 'Close Style Book' ) : null
 			}
@@ -261,21 +262,28 @@ const StyleBookBody = ( {
 } ) => {
 	const [ isFocused, setIsFocused ] = useState( false );
 
-	// The presence of an `onClick` prop indicates that the Style Book is being used
-	// as a button. In this case, we need to add additional props to the iframe to
-	// make it behave like a button.
+	// The presence of an `onClick` prop indicates that the Style Book is being used as a button.
+	// In this case, add additional props to the iframe to make it behave like a button.
 	const buttonModeProps = {
 		role: 'button',
 		onFocus: () => setIsFocused( true ),
 		onBlur: () => setIsFocused( false ),
 		onKeyDown: ( event ) => {
+			if ( event.defaultPrevented ) {
+				return;
+			}
 			const { keyCode } = event;
 			if ( onClick && ( keyCode === ENTER || keyCode === SPACE ) ) {
+				event.preventDefault();
 				onClick( event );
 			}
 		},
 		onClick: ( event ) => {
+			if ( event.defaultPrevented ) {
+				return;
+			}
 			if ( onClick ) {
+				event.preventDefault();
 				onClick( event );
 			}
 		},