@wordpress/edit-site 6.33.3 → 6.34.0

package/src/components/style-book/style.scss

@@ -1,44 +0,0 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/variables" as *;
-
-.edit-site-style-book {
-	// Ensure the style book fills the available vertical space.
-	// This is useful when the style book is used to fill a frame.
-	height: 100%;
-	&.is-button {
-		border-radius: $radius-large;
-	}
-
-	display: flex;
-	flex-direction: column;
-	align-items: stretch;
-}
-
-.edit-site-style-book__iframe {
-	display: block;
-	height: 100%;
-	width: 100%;
-
-	&.is-button {
-		border-radius: $radius-large;
-	}
-	&.is-focused {
-		outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
-		outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
-	}
-}
-
-.edit-site-style-book__tablist-container {
-	flex: none;
-
-	display: flex;
-	width: 100%;
-	padding-right: 56px;
-	background: $white;
-}
-
-.edit-site-style-book__tabpanel {
-	flex: 1 0 auto;
-
-	overflow: auto;
-}

package/src/components/style-book/test/categories.js

@@ -1,166 +0,0 @@
-/**
- * Internal dependencies
- */
-import {
-	getExamplesByCategory,
-	getTopLevelStyleBookCategories,
-} from '../categories';
-import { STYLE_BOOK_CATEGORIES } from '../constants';
-
-jest.mock( '@wordpress/blocks', () => {
-	return {
-		getCategories() {
-			return [
-				{
-					slug: 'text',
-					title: 'Text Registered',
-					icon: 'text',
-				},
-				{
-					slug: 'design',
-					title: 'Design Registered',
-					icon: 'design',
-				},
-				{
-					slug: 'funky',
-					title: 'Funky',
-					icon: 'funky',
-				},
-			];
-		},
-	};
-} );
-
-// Fixtures
-const exampleThemeBlocks = [
-	{
-		name: 'core/post-content',
-		title: 'Post Content',
-		category: 'theme',
-	},
-	{
-		name: 'core/post-terms',
-		title: 'Post Terms',
-		category: 'theme',
-	},
-	{
-		name: 'core/home-link',
-		title: 'Home Link',
-		category: 'design',
-	},
-	{
-		name: 'core/site-logo',
-		title: 'Site Logo',
-		category: 'theme',
-	},
-	{
-		name: 'core/site-title',
-		title: 'Site Title',
-		category: 'theme',
-	},
-	{
-		name: 'core/site-tagline',
-		title: 'Site Tagline',
-		category: 'theme',
-	},
-	{
-		name: 'core/group',
-		title: 'Group',
-		category: 'design',
-	},
-	{
-		name: 'core/comments-pagination-numbers',
-		title: 'Comments Page Numbers',
-		category: 'theme',
-	},
-	{
-		name: 'core/post-featured-image',
-		title: 'Featured Image',
-		category: 'theme',
-	},
-];
-
-describe( 'utils', () => {
-	describe( 'getTopLevelStyleBookCategories', () => {
-		it( 'returns theme subcategories examples', () => {
-			expect( getTopLevelStyleBookCategories() ).toEqual( [
-				...STYLE_BOOK_CATEGORIES,
-				{
-					slug: 'funky',
-					title: 'Funky',
-					icon: 'funky',
-				},
-			] );
-		} );
-	} );
-
-	describe( 'getExamplesByCategory', () => {
-		it( 'returns theme subcategories examples', () => {
-			const themeCategory = STYLE_BOOK_CATEGORIES.find(
-				( category ) => category.slug === 'theme'
-			);
-			const themeCategoryExamples = getExamplesByCategory(
-				themeCategory,
-				exampleThemeBlocks
-			);
-
-			expect( themeCategoryExamples.slug ).toEqual( 'theme' );
-
-			const siteIdentity = themeCategoryExamples.subcategories.find(
-				( subcategory ) => subcategory.slug === 'site-identity'
-			);
-			expect( siteIdentity ).toEqual( {
-				title: 'Site Identity',
-				slug: 'site-identity',
-				examples: [
-					{
-						name: 'core/site-logo',
-						title: 'Site Logo',
-						category: 'theme',
-					},
-					{
-						name: 'core/site-title',
-						title: 'Site Title',
-						category: 'theme',
-					},
-					{
-						name: 'core/site-tagline',
-						title: 'Site Tagline',
-						category: 'theme',
-					},
-				],
-			} );
-
-			const design = themeCategoryExamples.subcategories.find(
-				( subcategory ) => subcategory.slug === 'design'
-			);
-			expect( design ).toEqual( {
-				title: 'Design',
-				slug: 'design',
-				examples: [
-					{
-						name: 'core/group',
-						title: 'Group',
-						category: 'design',
-					},
-				],
-			} );
-
-			const posts = themeCategoryExamples.subcategories.find(
-				( subcategory ) => subcategory.slug === 'posts'
-			);
-
-			expect( posts ).toEqual( {
-				title: 'Posts',
-				slug: 'posts',
-				examples: [
-					{
-						name: 'core/post-terms',
-						title: 'Post Terms',
-						category: 'theme',
-					},
-				],
-			} );
-		} );
-	} );
-} );

package/src/components/style-book/types.ts

@@ -1,80 +0,0 @@
-export type Block = {
-	name: string;
-	attributes: Record< string, unknown >;
-	innerBlocks?: Block[];
-};
-
-export type StyleBookCategory = {
-	title: string;
-	slug: string;
-	blocks?: string[];
-	exclude?: string[];
-	include?: string[];
-	subcategories?: StyleBookCategory[];
-};
-
-export type BlockExample = {
-	name: string;
-	title: string;
-	category: string;
-	content?: JSX.Element;
-	blocks?: Block | Block[];
-};
-
-export type CategoryExamples = {
-	title: string;
-	slug: string;
-	examples?: BlockExample[];
-	subcategories?: CategoryExamples[];
-};
-
-export type StyleBookColorGroup = {
-	origin: string;
-	slug: string;
-	title: string;
-	type: 'colors' | 'gradients' | 'duotones';
-};
-
-export type Color = { slug: string };
-export type Gradient = { slug: string };
-export type Duotone = {
-	colors: string[];
-	slug: string;
-};
-
-export type ColorExampleProps = {
-	colors: Color[] | Gradient[];
-	type: StyleBookColorGroup[ 'type' ];
-	templateColumns?: string | number;
-	itemHeight?: string;
-};
-
-export type ColorOrigin = {
-	name: string;
-	slug: string;
-	colors?: Color[];
-	gradients?: Gradient[];
-	duotones?: Duotone[];
-};
-
-export type MultiOriginPalettes = {
-	disableCustomColors: boolean;
-	disableCustomGradients: boolean;
-	hasColorsOrGradients: boolean;
-	colors: Omit< ColorOrigin, 'gradients' | 'duotones' >;
-	duotones: Omit< ColorOrigin, 'colors' | 'gradients' >;
-	gradients: Omit< ColorOrigin, 'colors' | 'duotones' >;
-};
-
-/*
- * Typing the items from getBlockTypes from '@wordpress/blocks'
- * to appease the TS linter.
- */
-export type BlockType = {
-	name: string;
-	title: string;
-	category: string;
-	example: BlockType;
-	attributes: Record< string, unknown >;
-	supports: Record< string, unknown >;
-};

package/src/components/welcome-guide/styles.js

@@ -1,139 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useDispatch, useSelect } from '@wordpress/data';
-import { ExternalLink, Guide } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { store as preferencesStore } from '@wordpress/preferences';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import WelcomeGuideImage from './image';
-import { unlock } from '../../lock-unlock';
-
-const { interfaceStore } = unlock( editorPrivateApis );
-
-export default function WelcomeGuideStyles() {
-	const { toggle } = useDispatch( preferencesStore );
-
-	const { isActive, isStylesOpen } = useSelect( ( select ) => {
-		const sidebar =
-			select( interfaceStore ).getActiveComplementaryArea( 'core' );
-
-		return {
-			isActive: !! select( preferencesStore ).get(
-				'core/edit-site',
-				'welcomeGuideStyles'
-			),
-			isStylesOpen: sidebar === 'edit-site/global-styles',
-		};
-	}, [] );
-
-	if ( ! isActive || ! isStylesOpen ) {
-		return null;
-	}
-
-	const welcomeLabel = __( 'Welcome to Styles' );
-
-	return (
-		<Guide
-			className="edit-site-welcome-guide guide-styles"
-			contentLabel={ welcomeLabel }
-			finishButtonText={ __( 'Get started' ) }
-			onFinish={ () => toggle( 'core/edit-site', 'welcomeGuideStyles' ) }
-			pages={ [
-				{
-					image: (
-						<WelcomeGuideImage
-							nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-to-styles.svg?1"
-							animatedSrc="https://s.w.org/images/block-editor/welcome-to-styles.gif?1"
-						/>
-					),
-					content: (
-						<>
-							<h1 className="edit-site-welcome-guide__heading">
-								{ welcomeLabel }
-							</h1>
-							<p className="edit-site-welcome-guide__text">
-								{ __(
-									'Tweak your site, or give it a whole new look! Get creative — how about a new color palette for your buttons, or choosing a new font? Take a look at what you can do here.'
-								) }
-							</p>
-						</>
-					),
-				},
-				{
-					image: (
-						<WelcomeGuideImage
-							nonAnimatedSrc="https://s.w.org/images/block-editor/set-the-design.svg?1"
-							animatedSrc="https://s.w.org/images/block-editor/set-the-design.gif?1"
-						/>
-					),
-					content: (
-						<>
-							<h1 className="edit-site-welcome-guide__heading">
-								{ __( 'Set the design' ) }
-							</h1>
-							<p className="edit-site-welcome-guide__text">
-								{ __(
-									'You can customize your site as much as you like with different colors, typography, and layouts. Or if you prefer, just leave it up to your theme to handle!'
-								) }
-							</p>
-						</>
-					),
-				},
-				{
-					image: (
-						<WelcomeGuideImage
-							nonAnimatedSrc="https://s.w.org/images/block-editor/personalize-blocks.svg?1"
-							animatedSrc="https://s.w.org/images/block-editor/personalize-blocks.gif?1"
-						/>
-					),
-					content: (
-						<>
-							<h1 className="edit-site-welcome-guide__heading">
-								{ __( 'Personalize blocks' ) }
-							</h1>
-							<p className="edit-site-welcome-guide__text">
-								{ __(
-									'You can adjust your blocks to ensure a cohesive experience across your site — add your unique colors to a branded Button block, or adjust the Heading block to your preferred size.'
-								) }
-							</p>
-						</>
-					),
-				},
-				{
-					image: (
-						<WelcomeGuideImage
-							nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-documentation.svg"
-							animatedSrc="https://s.w.org/images/block-editor/welcome-documentation.gif"
-						/>
-					),
-					content: (
-						<>
-							<h1 className="edit-site-welcome-guide__heading">
-								{ __( 'Learn more' ) }
-							</h1>
-							<p className="edit-site-welcome-guide__text">
-								{ __(
-									'New to block themes and styling your site?'
-								) }{ ' ' }
-								<ExternalLink
-									href={ __(
-										'https://wordpress.org/documentation/article/styles-overview/'
-									) }
-								>
-									{ __(
-										'Here’s a detailed guide to learn how to make the most of it.'
-									) }
-								</ExternalLink>
-							</p>
-						</>
-					),
-				},
-			] }
-		/>
-	);
-}

package/src/hooks/index.js

@@ -1,4 +0,0 @@
-/**
- * Internal dependencies
- */
-import './push-changes-to-global-styles';