@wordpress/edit-site 5.27.2 → 5.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.27.2",
+	"version": "5.28.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,46 +27,46 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.50.0",
-		"@wordpress/api-fetch": "^6.47.0",
-		"@wordpress/blob": "^3.50.0",
-		"@wordpress/block-editor": "^12.18.2",
-		"@wordpress/block-library": "^8.27.2",
-		"@wordpress/blocks": "^12.27.1",
-		"@wordpress/commands": "^0.21.0",
-		"@wordpress/components": "^25.16.0",
-		"@wordpress/compose": "^6.27.0",
-		"@wordpress/core-commands": "^0.19.2",
-		"@wordpress/core-data": "^6.27.2",
-		"@wordpress/data": "^9.20.0",
-		"@wordpress/dataviews": "^0.4.1",
-		"@wordpress/date": "^4.50.0",
-		"@wordpress/deprecated": "^3.50.0",
-		"@wordpress/dom": "^3.50.0",
-		"@wordpress/editor": "^13.27.2",
-		"@wordpress/element": "^5.27.0",
-		"@wordpress/escape-html": "^2.50.0",
-		"@wordpress/hooks": "^3.50.0",
-		"@wordpress/html-entities": "^3.50.0",
-		"@wordpress/i18n": "^4.50.0",
-		"@wordpress/icons": "^9.41.0",
-		"@wordpress/interface": "^5.27.0",
-		"@wordpress/keyboard-shortcuts": "^4.27.0",
-		"@wordpress/keycodes": "^3.50.0",
-		"@wordpress/media-utils": "^4.41.0",
-		"@wordpress/notices": "^4.18.0",
-		"@wordpress/patterns": "^1.11.2",
-		"@wordpress/plugins": "^6.18.0",
-		"@wordpress/preferences": "^3.27.0",
-		"@wordpress/primitives": "^3.48.0",
-		"@wordpress/private-apis": "^0.32.0",
-		"@wordpress/reusable-blocks": "^4.27.2",
-		"@wordpress/router": "^0.19.0",
-		"@wordpress/style-engine": "^1.33.1",
-		"@wordpress/url": "^3.51.0",
-		"@wordpress/viewport": "^5.27.0",
-		"@wordpress/widgets": "^3.27.2",
-		"@wordpress/wordcount": "^3.50.0",
+		"@wordpress/a11y": "^3.51.0",
+		"@wordpress/api-fetch": "^6.48.0",
+		"@wordpress/blob": "^3.51.0",
+		"@wordpress/block-editor": "^12.19.0",
+		"@wordpress/block-library": "^8.28.0",
+		"@wordpress/blocks": "^12.28.0",
+		"@wordpress/commands": "^0.22.0",
+		"@wordpress/components": "^26.0.0",
+		"@wordpress/compose": "^6.28.0",
+		"@wordpress/core-commands": "^0.20.0",
+		"@wordpress/core-data": "^6.28.0",
+		"@wordpress/data": "^9.21.0",
+		"@wordpress/dataviews": "^0.5.0",
+		"@wordpress/date": "^4.51.0",
+		"@wordpress/deprecated": "^3.51.0",
+		"@wordpress/dom": "^3.51.0",
+		"@wordpress/editor": "^13.28.0",
+		"@wordpress/element": "^5.28.0",
+		"@wordpress/escape-html": "^2.51.0",
+		"@wordpress/hooks": "^3.51.0",
+		"@wordpress/html-entities": "^3.51.0",
+		"@wordpress/i18n": "^4.51.0",
+		"@wordpress/icons": "^9.42.0",
+		"@wordpress/interface": "^5.28.0",
+		"@wordpress/keyboard-shortcuts": "^4.28.0",
+		"@wordpress/keycodes": "^3.51.0",
+		"@wordpress/media-utils": "^4.42.0",
+		"@wordpress/notices": "^4.19.0",
+		"@wordpress/patterns": "^1.12.0",
+		"@wordpress/plugins": "^6.19.0",
+		"@wordpress/preferences": "^3.28.0",
+		"@wordpress/primitives": "^3.49.0",
+		"@wordpress/private-apis": "^0.33.0",
+		"@wordpress/reusable-blocks": "^4.28.0",
+		"@wordpress/router": "^0.20.0",
+		"@wordpress/style-engine": "^1.34.0",
+		"@wordpress/url": "^3.52.0",
+		"@wordpress/viewport": "^5.28.0",
+		"@wordpress/widgets": "^3.28.0",
+		"@wordpress/wordcount": "^3.51.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "fefb6f718fbfd5df9390f366d5733369f613084a"
+	"gitHead": "eb796371e9630636a4a8837033807b0c4a06ed67"
 }

package/src/components/add-new-template/style.scss

@@ -21,18 +21,6 @@
 		}
 	}
 
-	.components-search-control {
-		input[type="search"].components-search-control__input {
-			background: $white;
-			border: 1px solid $gray-300;
-
-			&:focus {
-				border-color: var(--wp-admin-theme-color);
-				box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-			}
-		}
-	}
-
 	@include break-medium() {
 		width: 456px;
 	}

package/src/components/block-editor/site-editor-canvas.js

@@ -11,7 +11,6 @@ import { useViewportMatch, useResizeObserver } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import BackButton from './back-button';
 import ResizableEditor from './resizable-editor';
 import EditorCanvas from './editor-canvas';
 import EditorCanvasContainer from '../editor-canvas-container';
@@ -20,6 +19,7 @@ import { store as editSiteStore } from '../../store';
 import {
 	FOCUSABLE_ENTITIES,
 	NAVIGATION_POST_TYPE,
+	TEMPLATE_POST_TYPE,
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -54,7 +54,9 @@ export default function SiteEditorCanvas() {
 		isFocusMode &&
 		! isViewMode &&
 		// Disable resizing in mobile viewport.
-		! isMobileViewport;
+		! isMobileViewport &&
+		// Disable resizing when editing a template in focus mode.
+		templateType !== TEMPLATE_POST_TYPE;
 
 	const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
 	const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode;
@@ -74,7 +76,6 @@ export default function SiteEditorCanvas() {
 							'is-view-mode': isViewMode,
 						} ) }
 					>
-						<BackButton />
 						<ResizableEditor
 							enableResizing={ enableResizing }
 							height={

package/src/components/block-editor/style.scss

@@ -23,7 +23,7 @@
 	height: 100%;
 	display: block;
 	overflow: hidden;
-	background-color: $gray-900;
+	background-color: $gray-300;
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
 
@@ -45,7 +45,7 @@
 
 	&.is-focus-mode {
 		.edit-site-layout.is-full-canvas & {
-			padding: $grid-unit-60;
+			padding: $grid-unit-30;
 		}
 
 		.edit-site-visual-editor__editor-canvas {
@@ -71,24 +71,6 @@
 	}
 }
 
-.edit-site-visual-editor__back-button {
-	position: absolute;
-	top: $grid-unit-10;
-	left: $grid-unit-10;
-	color: $white;
-
-	&:active:not([aria-disabled="true"]),
-	&:focus:not([aria-disabled="true"]),
-	&:hover {
-		color: $gray-100;
-	}
-}
-
-// The toolbar header in distraction mode sits over the back button, which renders it unreachable.
-.is-distraction-free .edit-site-visual-editor__back-button {
-	display: none;
-}
-
 .resizable-editor__drag-handle {
 	position: absolute;
 	top: 0;

package/src/components/block-editor/use-navigate-to-entity-record.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+export default function useNavigateToEntityRecord() {
+	const history = useHistory();
+
+	const onNavigateToEntityRecord = useCallback(
+		( params ) => {
+			history.push( { ...params, focusMode: true, canvas: 'edit' } );
+		},
+		[ history ]
+	);
+
+	return onNavigateToEntityRecord;
+}

package/src/components/block-editor/use-site-editor-settings.js

@@ -5,15 +5,19 @@ import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import { usePostLinkProps } from './use-post-link-props';
+import useNavigateToEntityRecord from './use-navigate-to-entity-record';
+import { FOCUSABLE_ENTITIES } from '../../utils/constants';
 
 const { useBlockEditorSettings } = unlock( editorPrivateApis );
+const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 function useArchiveLabel( templateSlug ) {
 	const taxonomyMatches = templateSlug?.match(
@@ -87,8 +91,31 @@ function useArchiveLabel( templateSlug ) {
 	);
 }
 
+function useNavigateToPreviousEntityRecord() {
+	const location = useLocation();
+	const previousLocation = usePrevious( location );
+	const history = useHistory();
+	const goBack = useMemo( () => {
+		const isFocusMode =
+			location.params.focusMode ||
+			( location.params.postId &&
+				FOCUSABLE_ENTITIES.includes( location.params.postType ) );
+		const didComeFromEditorCanvas =
+			previousLocation?.params.postId &&
+			previousLocation?.params.postType &&
+			previousLocation?.params.canvas === 'edit';
+		const showBackButton = isFocusMode && didComeFromEditorCanvas;
+		return showBackButton ? () => history.back() : undefined;
+		// Disable reason: previousLocation changes when the component updates for any reason, not
+		// just when location changes. Until this is fixed we can't add it to deps. See
+		// https://github.com/WordPress/gutenberg/pull/58710#discussion_r1479219465.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ location, history ] );
+	return goBack;
+}
+
 export function useSpecificEditorSettings() {
-	const getPostLinkProps = usePostLinkProps();
+	const onNavigateToEntityRecord = useNavigateToEntityRecord();
 	const { templateSlug, canvasMode, settings, postWithTemplate } = useSelect(
 		( select ) => {
 			const {
@@ -118,6 +145,8 @@ export function useSpecificEditorSettings() {
 	);
 	const archiveLabels = useArchiveLabel( templateSlug );
 	const defaultRenderingMode = postWithTemplate ? 'template-locked' : 'all';
+	const onNavigateToPreviousEntityRecord =
+		useNavigateToPreviousEntityRecord();
 	const defaultEditorSettings = useMemo( () => {
 		return {
 			...settings,
@@ -126,7 +155,8 @@ export function useSpecificEditorSettings() {
 			supportsTemplateMode: true,
 			focusMode: canvasMode !== 'view',
 			defaultRenderingMode,
-			getPostLinkProps,
+			onNavigateToEntityRecord,
+			onNavigateToPreviousEntityRecord,
 			// I wonder if they should be set in the post editor too
 			__experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel,
 			__experimentalArchiveTitleNameLabel: archiveLabels.archiveNameLabel,
@@ -135,7 +165,8 @@ export function useSpecificEditorSettings() {
 		settings,
 		canvasMode,
 		defaultRenderingMode,
-		getPostLinkProps,
+		onNavigateToEntityRecord,
+		onNavigateToPreviousEntityRecord,
 		archiveLabels.archiveTypeLabel,
 		archiveLabels.archiveNameLabel,
 	] );

package/src/components/editor/index.js

@@ -84,6 +84,9 @@ const blockRemovalRules = {
 	'core/post-template': __(
 		'Post Template displays each post or page in a Query Loop.'
 	),
+	'bindings/core/pattern-overrides': __(
+		'Blocks from synced patterns that can have overriden content.'
+	),
 };
 
 export default function Editor( { isLoading } ) {
@@ -106,6 +109,7 @@ export default function Editor( { isLoading } ) {
 		isRightSidebarOpen,
 		isInserterOpen,
 		isListViewOpen,
+		isDistractionFree,
 		showIconLabels,
 		showBlockBreadcrumbs,
 		postTypeLabel,
@@ -140,6 +144,7 @@ export default function Editor( { isLoading } ) {
 			isRightSidebarOpen: getActiveComplementaryArea(
 				editSiteStore.name
 			),
+			isDistractionFree: get( 'core', 'distractionFree' ),
 			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
 			showIconLabels: get( 'core', 'showIconLabels' ),
 			postTypeLabel: getPostTypeLabel(),
@@ -150,6 +155,7 @@ export default function Editor( { isLoading } ) {
 	const isEditMode = canvasMode === 'edit';
 	const showVisualEditor = isViewMode || editorMode === 'visual';
 	const shouldShowBlockBreadcrumbs =
+		! isDistractionFree &&
 		showBlockBreadcrumbs &&
 		isEditMode &&
 		showVisualEditor &&
@@ -210,7 +216,7 @@ export default function Editor( { isLoading } ) {
 					<SidebarComplementaryAreaFills />
 					{ isEditMode && <StartTemplateOptions /> }
 					<InterfaceSkeleton
-						isDistractionFree={ true }
+						isDistractionFree={ isDistractionFree }
 						enableRegionNavigation={ false }
 						className={ classnames(
 							'edit-site-editor__interface-skeleton',

package/src/components/global-styles/font-families.js

@@ -9,7 +9,7 @@ import {
 	Button,
 	Tooltip,
 } from '@wordpress/components';
-import { typography } from '@wordpress/icons';
+import { settings } from '@wordpress/icons';
 import { useContext } from '@wordpress/element';
 
 /**
@@ -33,7 +33,7 @@ function FontFamilies() {
 			{ !! modalTabOpen && (
 				<FontLibraryModal
 					onRequestClose={ () => toggleModal() }
-					initialTabName={ modalTabOpen }
+					initialTabId={ modalTabOpen }
 				/>
 			) }
 
@@ -47,7 +47,7 @@ function FontFamilies() {
 									toggleModal( 'installed-fonts' )
 								}
 								aria-label={ __( 'Manage fonts' ) }
-								icon={ typography }
+								icon={ settings }
 								size={ 'small' }
 							/>
 						</Tooltip>
@@ -63,7 +63,16 @@ function FontFamilies() {
 						) ) }
 					</ItemGroup>
 				) : (
-					<>{ __( 'No fonts installed.' ) }</>
+					<>
+						{ __( 'No fonts installed.' ) }
+						<Button
+							className="edit-site-global-styles-font-families__add-fonts"
+							variant="secondary"
+							onClick={ () => toggleModal( 'upload-fonts' ) }
+						>
+							{ __( 'Add fonts' ) }
+						</Button>
+					</>
 				) }
 			</VStack>
 		</>

package/src/components/global-styles/font-library-modal/collection-font-variant.js

@@ -35,21 +35,23 @@ function CollectionFontVariant( {
 	);
 
 	return (
-		<label
-			className="font-library-modal__library-font-variant"
-			htmlFor={ checkboxId }
-		>
-			<Flex justify="space-between" align="center" gap="1rem">
-				<FontFaceDemo fontFace={ face } text={ displayName } />
+		<div className="font-library-modal__library-font-variant">
+			<Flex justify="flex-start" align="center" gap="1rem">
 				<CheckboxControl
 					checked={ selected }
 					onChange={ handleToggleActivation }
 					__nextHasNoMarginBottom={ true }
 					id={ checkboxId }
-					label={ false }
 				/>
+				<label htmlFor={ checkboxId }>
+					<FontFaceDemo
+						fontFace={ face }
+						text={ displayName }
+						onClick={ handleToggleActivation }
+					/>
+				</label>
 			</Flex>
-		</label>
+		</div>
 	);
 }
 

package/src/components/global-styles/font-library-modal/font-card.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { _n } from '@wordpress/i18n';
+import { _n, sprintf } from '@wordpress/i18n';
 import {
 	__experimentalText as Text,
 	Button,
@@ -58,9 +58,15 @@ function FontCard( { font, onClick, variantsText } ) {
 					<FlexItem>
 						<Text className="font-library-modal__font-card__count">
 							{ variantsText ||
-								variantsCount +
-									' ' +
-									_n( 'variant', 'variants', variantsCount ) }
+								sprintf(
+									/* translators: %d: Number of font variants. */
+									_n(
+										'%d variant',
+										'%d variants',
+										variantsCount
+									),
+									variantsCount
+								) }
 						</Text>
 					</FlexItem>
 					<FlexItem>

package/src/components/global-styles/font-library-modal/font-collection.js

@@ -14,7 +14,7 @@ import {
 	Button,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { search, closeSmall } from '@wordpress/icons';
 
 /**
@@ -33,7 +33,7 @@ import { downloadFontFaceAssets } from './utils';
 
 const DEFAULT_CATEGORY = {
 	slug: 'all',
-	name: __( 'All' ),
+	name: _x( 'All', 'font categories' ),
 };
 function FontCollection( { slug } ) {
 	const requiresPermission = slug === 'google-fonts';
@@ -199,9 +199,10 @@ function FontCollection( { slug } ) {
 			notice={ notice }
 			handleBack={ !! selectedFont && handleUnselectFont }
 			footer={
-				fontsToInstall.length > 0 && (
-					<Footer handleInstall={ handleInstall } />
-				)
+				<Footer
+					handleInstall={ handleInstall }
+					isDisabled={ fontsToInstall.length === 0 }
+				/>
 			}
 		>
 			{ renderConfirmDialog && (
@@ -290,7 +291,7 @@ function FontCollection( { slug } ) {
 	);
 }
 
-function Footer( { handleInstall } ) {
+function Footer( { handleInstall, isDisabled } ) {
 	const { isInstalling } = useContext( FontLibraryContext );
 
 	return (
@@ -299,7 +300,8 @@ function Footer( { handleInstall } ) {
 				variant="primary"
 				onClick={ handleInstall }
 				isBusy={ isInstalling }
-				disabled={ isInstalling }
+				disabled={ isDisabled || isInstalling }
+				__experimentalIsFocusable
 			>
 				{ __( 'Install' ) }
 			</Button>

package/src/components/global-styles/font-library-modal/font-demo.js

@@ -31,18 +31,12 @@ function FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {
 
 	const faceStyles = getFacePreviewStyle( fontFace );
 	const textDemoStyle = {
-		whiteSpace: 'nowrap',
-		flexShrink: 0,
 		fontSize: '18px',
+		lineHeight: 1,
 		opacity: isAssetLoaded ? '1' : '0',
-		transition: 'opacity 0.3s ease-in-out',
 		...faceStyles,
 		...style,
 	};
-	const imageDemoStyle = {
-		height: '23px',
-		width: 'auto',
-	};
 
 	useEffect( () => {
 		const observer = new window.IntersectionObserver( ( [ entry ] ) => {
@@ -71,10 +65,15 @@ function FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {
 					src={ previewUrl }
 					loading="lazy"
 					alt={ text }
-					style={ imageDemoStyle }
+					className="font-library-modal__font-variant_demo-image"
 				/>
 			) : (
-				<Text style={ textDemoStyle }>{ text }</Text>
+				<Text
+					style={ textDemoStyle }
+					className="font-library-modal__font-variant_demo-text"
+				>
+					{ text }
+				</Text>
 			) }
 		</div>
 	);

package/src/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js

@@ -34,7 +34,7 @@ function GoogleFontsConfirmDialog() {
 					<Spacer margin={ 3 } />
 					<Text as="p">
 						{ __(
-							'You can alternatively upload files directly on the Library tab.'
+							'You can alternatively upload files directly on the Upload tab.'
 						) }
 					</Text>
 					<Spacer margin={ 6 } />

package/src/components/global-styles/font-library-modal/installed-fonts.js

@@ -172,19 +172,24 @@ function Footer( { shouldDisplayDeleteButton, handleUninstallClick } ) {
 	const { saveFontFamilies, fontFamiliesHasChanges, isInstalling } =
 		useContext( FontLibraryContext );
 	return (
-		<HStack justify="space-between">
+		<HStack justify="flex-end">
 			{ isInstalling && <ProgressBar /> }
 			<div>
 				{ shouldDisplayDeleteButton && (
-					<Button variant="tertiary" onClick={ handleUninstallClick }>
+					<Button
+						isDestructive
+						variant="tertiary"
+						onClick={ handleUninstallClick }
+					>
 						{ __( 'Delete' ) }
 					</Button>
 				) }
 			</div>
 			<Button
-				disabled={ ! fontFamiliesHasChanges }
 				variant="primary"
 				onClick={ saveFontFamilies }
+				disabled={ ! fontFamiliesHasChanges }
+				__experimentalIsFocusable
 			>
 				{ __( 'Update' ) }
 			</Button>

package/src/components/global-styles/font-library-modal/library-font-card.js

@@ -20,7 +20,7 @@ function LibraryFontCard( { font, ...props } ) {
 		font.source
 	).length;
 	const variantsText = sprintf(
-		/* translators: %1$d: Active font variants, %2$d: Total font variants */
+		/* translators: 1: Active font variants, 2: Total font variants. */
 		__( '%1$s/%2$s variants active' ),
 		variantsActive,
 		variantsInstalled

package/src/components/global-styles/font-library-modal/library-font-variant.js

@@ -45,21 +45,23 @@ function LibraryFontVariant( { face, font } ) {
 	);
 
 	return (
-		<label
-			className="font-library-modal__library-font-variant"
-			htmlFor={ checkboxId }
-		>
-			<Flex justify="space-between" align="center" gap="1rem">
-				<FontFaceDemo fontFace={ face } text={ displayName } />
+		<div className="font-library-modal__library-font-variant">
+			<Flex justify="flex-start" align="center" gap="1rem">
 				<CheckboxControl
 					checked={ isInstalled }
 					onChange={ handleToggleActivation }
 					__nextHasNoMarginBottom={ true }
 					id={ checkboxId }
-					label={ false }
 				/>
+				<label htmlFor={ checkboxId }>
+					<FontFaceDemo
+						fontFace={ face }
+						text={ displayName }
+						onClick={ handleToggleActivation }
+					/>
+				</label>
 			</Flex>
-		</label>
+		</div>
 	);
 }
 

package/src/components/global-styles/font-library-modal/style.scss

@@ -65,6 +65,19 @@
 	margin-top: -1px; /* To collapse the margin with the previous element */
 }
 
+.font-library-modal__font-variant_demo-image {
+	display: block;
+	height: $grid-unit-30;
+	width: auto;
+}
+
+.font-library-modal__font-variant_demo-text {
+	white-space: nowrap;
+	flex-shrink: 0;
+	transition: opacity 0.3s ease-in-out;
+	@include reduce-motion("transition");
+}
+
 .font-library-modal__font-variant {
 	border-bottom: 1px solid $gray-200;
 	padding-bottom: $grid-unit-20;
@@ -103,23 +116,6 @@ button.font-library-modal__upload-area {
 	}
 }
 
-.font-library-modal__font-variant_demo-wrapper {
-	white-space: nowrap;
-	overflow: hidden;
-	width: 100%;
-	position: relative;
-
-	&::after {
-		content: "";
-		position: absolute;
-		bottom: 0;
-		right: 0;
-		width: 30vw;
-		height: 100%;
-		background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
-	}
-}
-
 .font-library__google-fonts-confirm {
 	display: flex;
 	justify-content: center;