From 1398e28014a12c536e2c5aa6ad222163a34cfd15 Mon Sep 17 00:00:00 2001 From: benazeer1909 <91200605+benazeerhassan1909@users.noreply.github.com> Date: Thu, 24 Oct 2024 01:07:15 +0530 Subject: [PATCH 01/10] Border support added for Embed block --- packages/block-library/src/embed/block.json | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/block-library/src/embed/block.json b/packages/block-library/src/embed/block.json index 5bfb63b0fa9e9..7c6ea54c3ee94 100644 --- a/packages/block-library/src/embed/block.json +++ b/packages/block-library/src/embed/block.json @@ -47,6 +47,18 @@ }, "interactivity": { "clientNavigation": true + }, + "__experimentalBorder": { + "radius": true, + "color": true, + "width": true, + "style": true, + "__experimentalDefaultControls": { + "radius": true, + "color": true, + "width": true, + "style": true + } } }, "editorStyle": "wp-block-embed-editor", From 99b4f1723e707022cb3b4722d6aa34f24bee79d5 Mon Sep 17 00:00:00 2001 From: benazeer1909 <91200605+benazeerhassan1909@users.noreply.github.com> Date: Thu, 24 Oct 2024 01:07:15 +0530 Subject: [PATCH 02/10] Border support added for Embed block --- packages/block-library/src/embed/block.json | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/block-library/src/embed/block.json b/packages/block-library/src/embed/block.json index 5bfb63b0fa9e9..7c6ea54c3ee94 100644 --- a/packages/block-library/src/embed/block.json +++ b/packages/block-library/src/embed/block.json @@ -47,6 +47,18 @@ }, "interactivity": { "clientNavigation": true + }, + "__experimentalBorder": { + "radius": true, + "color": true, + "width": true, + "style": true, + "__experimentalDefaultControls": { + "radius": true, + "color": true, + "width": true, + "style": true + } } }, "editorStyle": "wp-block-embed-editor", From 4184b4b02f0b4f53454f8437580e3523129aaff2 Mon Sep 17 00:00:00 2001 From: benazeer Date: Fri, 25 Oct 2024 16:14:51 +0530 Subject: [PATCH 03/10] Revert "Style Book: Add color tab (#65692)" This reverts commit 54371146e6515a15118c6feceb34ade061b44a1b. --- ...se-multiple-origin-colors-and-gradients.js | 8 +- .../src/components/global-styles/ui.js | 11 -- .../components/style-book/color-examples.tsx | 44 ------ .../src/components/style-book/constants.ts | 80 +---------- .../style-book/duotone-examples.tsx | 53 -------- .../src/components/style-book/examples.ts | 63 +++++++++ .../src/components/style-book/examples.tsx | 113 ---------------- .../src/components/style-book/index.js | 128 ++---------------- .../components/style-book/test/categories.js | 5 + .../src/components/style-book/types.ts | 35 +---- 10 files changed, 85 insertions(+), 455 deletions(-) delete mode 100644 packages/edit-site/src/components/style-book/color-examples.tsx delete mode 100644 packages/edit-site/src/components/style-book/duotone-examples.tsx create mode 100644 packages/edit-site/src/components/style-book/examples.ts delete mode 100644 packages/edit-site/src/components/style-book/examples.tsx diff --git a/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js b/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js index cfa5930ba7034..ee27960529ede 100644 --- a/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js +++ b/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js @@ -55,7 +55,6 @@ export default function useMultipleOriginColorsAndGradients() { 'Theme', 'Indicates this palette comes from the theme.' ), - slug: 'theme', colors: themeColors, } ); } @@ -69,7 +68,6 @@ export default function useMultipleOriginColorsAndGradients() { 'Default', 'Indicates this palette comes from WordPress.' ), - slug: 'default', colors: defaultColors, } ); } @@ -77,9 +75,8 @@ export default function useMultipleOriginColorsAndGradients() { result.push( { name: _x( 'Custom', - 'Indicates this palette is created by the user.' + 'Indicates this palette comes from the theme.' ), - slug: 'custom', colors: customColors, } ); } @@ -99,7 +96,6 @@ export default function useMultipleOriginColorsAndGradients() { 'Theme', 'Indicates this palette comes from the theme.' ), - slug: 'theme', gradients: themeGradients, } ); } @@ -113,7 +109,6 @@ export default function useMultipleOriginColorsAndGradients() { 'Default', 'Indicates this palette comes from WordPress.' ), - slug: 'default', gradients: defaultGradients, } ); } @@ -123,7 +118,6 @@ export default function useMultipleOriginColorsAndGradients() { 'Custom', 'Indicates this palette is created by the user.' ), - slug: 'custom', gradients: customGradients, } ); } diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 9ca88f40f1f00..6cd465e237100 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -45,7 +45,6 @@ import ScreenCSS from './screen-css'; import ScreenRevisions from './screen-revisions'; import { unlock } from '../../lock-unlock'; import { store as editSiteStore } from '../../store'; -import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants'; const SLOT_FILL_NAME = 'GlobalStylesMenu'; const { useGlobalStylesReset } = unlock( blockEditorPrivateApis ); @@ -192,16 +191,6 @@ function GlobalStylesStyleBook() { ) } onSelect={ ( blockName ) => { - if ( - STYLE_BOOK_COLOR_GROUPS.find( - ( group ) => group.slug === blockName - ) - ) { - // Go to color palettes Global Styles. - navigator.goTo( '/colors/palette' ); - return; - } - // Now go to the selected block. navigator.goTo( '/blocks/' + encodeURIComponent( blockName ) ); } } diff --git a/packages/edit-site/src/components/style-book/color-examples.tsx b/packages/edit-site/src/components/style-book/color-examples.tsx deleted file mode 100644 index 97bdeecee32d3..0000000000000 --- a/packages/edit-site/src/components/style-book/color-examples.tsx +++ /dev/null @@ -1,44 +0,0 @@ -/** - * External dependencies - */ -import clsx from 'clsx'; - -/** - * WordPress dependencies - */ -import { __experimentalGrid as Grid } from '@wordpress/components'; -import { View } from '@wordpress/primitives'; -import { - getColorClassName, - __experimentalGetGradientClass, -} from '@wordpress/block-editor'; - -/** - * Internal dependencies - */ -import type { Color, Gradient } from './types'; - -const ColorExamples = ( { colors, type } ): JSX.Element | null => { - if ( ! colors ) { - return null; - } - - return ( - - { colors.map( ( color: Color | Gradient ) => { - const className = - type === 'gradients' - ? __experimentalGetGradientClass( color.slug ) - : getColorClassName( 'background-color', color.slug ); - const classes = clsx( - 'edit-site-style-book__color-example', - className - ); - - return ; - } ) } - - ); -}; - -export default ColorExamples; diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts index 1ba1bf5e3dffa..fc06d8f1409f0 100644 --- a/packages/edit-site/src/components/style-book/constants.ts +++ b/packages/edit-site/src/components/style-book/constants.ts @@ -6,52 +6,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import type { StyleBookCategory, StyleBookColorGroup } from './types'; - -export const STYLE_BOOK_COLOR_GROUPS: StyleBookColorGroup[] = [ - { - slug: 'theme-colors', - title: __( 'Theme Colors' ), - origin: 'theme', - type: 'colors', - }, - { - slug: 'theme-gradients', - title: __( 'Theme Gradients' ), - origin: 'theme', - type: 'gradients', - }, - { - slug: 'custom-colors', - title: __( 'Custom Colors' ), - origin: 'custom', - type: 'colors', - }, - { - slug: 'custom-gradients', - title: __( 'Custom Gradients' ), - origin: 'custom', // User. - type: 'gradients', - }, - { - slug: 'duotones', - title: __( 'Duotones' ), - origin: 'theme', - type: 'duotones', - }, - { - slug: 'default-colors', - title: __( 'Default Colors' ), - origin: 'default', - type: 'colors', - }, - { - slug: 'default-gradients', - title: __( 'Default Gradients' ), - origin: 'default', - type: 'gradients', - }, -]; +import type { StyleBookCategory } from './types'; export const STYLE_BOOK_THEME_SUBCATEGORIES: Omit< StyleBookCategory, @@ -119,7 +74,7 @@ export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [ { slug: 'colors', title: __( 'Colors' ), - blocks: [], + blocks: [ 'custom/colors' ], }, { slug: 'theme', @@ -156,7 +111,7 @@ export const STYLE_BOOK_IFRAME_STYLES = ` .is-root-container { display: flow-root; } - + body { position: relative; padding: 32px !important; @@ -186,40 +141,15 @@ export const STYLE_BOOK_IFRAME_STYLES = ` box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)); } - .edit-site-style-book__example.is-disabled-example { - pointer-events: none; - } - .edit-site-style-book__example:focus:not(:disabled) { box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)); outline: 3px solid transparent; } - .edit-site-style-book__duotone-example > div:first-child { - display: flex; - aspect-ratio: 16 / 9; - grid-row: span 1; - grid-column: span 2; - } - .edit-site-style-book__duotone-example img { - width: 100%; - height: 100%; - object-fit: cover; - } - .edit-site-style-book__duotone-example > div:not(:first-child) { - height: 20px; - border: 1px solid #ddd; - } - - .edit-site-style-book__color-example { - height: 52px; - border: 1px solid #ddd; - } - .edit-site-style-book__examples.is-wide .edit-site-style-book__example { flex-direction: row; } - + .edit-site-style-book__subcategory-title, .edit-site-style-book__example-title { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; @@ -230,7 +160,7 @@ export const STYLE_BOOK_IFRAME_STYLES = ` text-align: left; text-transform: uppercase; } - + .edit-site-style-book__subcategory-title { font-size: 16px; margin-bottom: 40px; diff --git a/packages/edit-site/src/components/style-book/duotone-examples.tsx b/packages/edit-site/src/components/style-book/duotone-examples.tsx deleted file mode 100644 index 7ee90e61f1c6a..0000000000000 --- a/packages/edit-site/src/components/style-book/duotone-examples.tsx +++ /dev/null @@ -1,53 +0,0 @@ -/** - * WordPress dependencies - */ -import { __experimentalGrid as Grid } from '@wordpress/components'; -import { View } from '@wordpress/primitives'; - -/** - * Internal dependencies - */ -import type { Duotone } from './types'; - -const DuotoneExamples = ( { duotones } ): JSX.Element | null => { - if ( ! duotones ) { - return null; - } - - return ( - - { duotones.map( ( duotone: Duotone ) => { - return ( - - - { - - { duotone.colors.map( ( color ) => { - return ( - - ); - } ) } - - ); - } ) } - - ); -}; - -export default DuotoneExamples; diff --git a/packages/edit-site/src/components/style-book/examples.ts b/packages/edit-site/src/components/style-book/examples.ts new file mode 100644 index 0000000000000..80807b10374c6 --- /dev/null +++ b/packages/edit-site/src/components/style-book/examples.ts @@ -0,0 +1,63 @@ +/** + * WordPress dependencies + */ +import { __, sprintf } from '@wordpress/i18n'; +import { + getBlockType, + getBlockTypes, + getBlockFromExample, + createBlock, +} from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import type { BlockExample } from './types'; + +/** + * Returns a list of examples for registered block types. + * + * @return {BlockExample[]} An array of block examples. + */ +export function getExamples(): BlockExample[] { + const nonHeadingBlockExamples = getBlockTypes() + .filter( ( blockType ) => { + const { name, example, supports } = blockType; + return ( + name !== 'core/heading' && + !! example && + supports.inserter !== false + ); + } ) + .map( ( blockType ) => ( { + name: blockType.name, + title: blockType.title, + category: blockType.category, + blocks: getBlockFromExample( blockType.name, blockType.example ), + } ) ); + const isHeadingBlockRegistered = !! getBlockType( 'core/heading' ); + + if ( ! isHeadingBlockRegistered ) { + return nonHeadingBlockExamples; + } + + // Use our own example for the Heading block so that we can show multiple + // heading levels. + const headingsExample = { + name: 'core/heading', + title: __( 'Headings' ), + category: 'text', + blocks: [ 1, 2, 3, 4, 5, 6 ].map( ( level ) => { + return createBlock( 'core/heading', { + content: sprintf( + // translators: %d: heading level e.g: "1", "2", "3" + __( 'Heading %d' ), + level + ), + level, + } ); + } ), + }; + + return [ headingsExample, ...nonHeadingBlockExamples ]; +} diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx deleted file mode 100644 index 9f4badd99a658..0000000000000 --- a/packages/edit-site/src/components/style-book/examples.tsx +++ /dev/null @@ -1,113 +0,0 @@ -/** - * WordPress dependencies - */ -import { __, sprintf } from '@wordpress/i18n'; -import { - getBlockType, - getBlockTypes, - getBlockFromExample, - createBlock, -} from '@wordpress/blocks'; - -/** - * Internal dependencies - */ -import type { BlockExample, ColorOrigin, MultiOriginPalettes } from './types'; -import ColorExamples from './color-examples'; -import DuotoneExamples from './duotone-examples'; -import { STYLE_BOOK_COLOR_GROUPS } from './constants'; - -/** - * Returns examples color examples for each origin - * e.g. Core (Default), Theme, and User. - * - * @param {MultiOriginPalettes} colors Global Styles color palettes per origin. - * @return {BlockExample[]} An array of color block examples. - */ -function getColorExamples( colors: MultiOriginPalettes ): BlockExample[] { - if ( ! colors ) { - return []; - } - - const examples: BlockExample[] = []; - - STYLE_BOOK_COLOR_GROUPS.forEach( ( group ) => { - const palette = colors[ group.type ].find( - ( origin: ColorOrigin ) => origin.slug === group.origin - ); - - if ( palette?.[ group.type ] ) { - const example: BlockExample = { - name: group.slug, - title: group.title, - category: 'colors', - }; - if ( group.type === 'duotones' ) { - example.content = ( - - ); - examples.push( example ); - } else { - example.content = ( - - ); - examples.push( example ); - } - } - } ); - - return examples; -} - -/** - * Returns a list of examples for registered block types. - * - * @param {MultiOriginPalettes} colors Global styles colors grouped by origin e.g. Core, Theme, and User. - * @return {BlockExample[]} An array of block examples. - */ -export function getExamples( colors: MultiOriginPalettes ): BlockExample[] { - const nonHeadingBlockExamples = getBlockTypes() - .filter( ( blockType ) => { - const { name, example, supports } = blockType; - return ( - name !== 'core/heading' && - !! example && - supports?.inserter !== false - ); - } ) - .map( ( blockType ) => ( { - name: blockType.name, - title: blockType.title, - category: blockType.category, - blocks: getBlockFromExample( blockType.name, blockType.example ), - } ) ); - const isHeadingBlockRegistered = !! getBlockType( 'core/heading' ); - - if ( ! isHeadingBlockRegistered ) { - return nonHeadingBlockExamples; - } - - // Use our own example for the Heading block so that we can show multiple - // heading levels. - const headingsExample = { - name: 'core/heading', - title: __( 'Headings' ), - category: 'text', - blocks: [ 1, 2, 3, 4, 5, 6 ].map( ( level ) => { - return createBlock( 'core/heading', { - content: sprintf( - // translators: %d: heading level e.g: "1", "2", "3" - __( 'Heading %d' ), - level - ), - level, - } ); - } ), - }; - const colorExamples = getColorExamples( colors ); - - return [ headingsExample, ...colorExamples, ...nonHeadingBlockExamples ]; -} diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index 93bbc6311c686..0d8c49d76af50 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -11,26 +11,18 @@ import { Composite, privateApis as componentsPrivateApis, } from '@wordpress/components'; -import { __, _x, sprintf } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { BlockList, privateApis as blockEditorPrivateApis, store as blockEditorStore, - useSettings, __unstableEditorStyles as EditorStyles, __unstableIframe as Iframe, - __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients, } from '@wordpress/block-editor'; import { privateApis as editorPrivateApis } from '@wordpress/editor'; import { useSelect } from '@wordpress/data'; import { useResizeObserver } from '@wordpress/compose'; -import { - useMemo, - useState, - memo, - useContext, - useEffect, -} from '@wordpress/element'; +import { useMemo, useState, memo, useContext } from '@wordpress/element'; import { ENTER, SPACE } from '@wordpress/keycodes'; /** @@ -59,81 +51,6 @@ function isObjectEmpty( object ) { return ! object || Object.keys( object ).length === 0; } -/** - * Retrieves colors, gradients, and duotone filters from Global Styles. - * The inclusion of default (Core) palettes is controlled by the relevant - * theme.json property e.g. defaultPalette, defaultGradients, defaultDuotone. - * - * @return {Object} Object containing properties for each type of palette. - */ -function useMultiOriginPalettes() { - const { colors, gradients } = useMultipleOriginColorsAndGradients(); - - // Add duotone filters to the palettes data. - const [ - shouldDisplayDefaultDuotones, - customDuotones, - themeDuotones, - defaultDuotones, - ] = useSettings( - 'color.defaultDuotone', - 'color.duotone.custom', - 'color.duotone.theme', - 'color.duotone.default' - ); - - const palettes = useMemo( () => { - const result = { colors, gradients, duotones: [] }; - - if ( themeDuotones && themeDuotones.length ) { - result.duotones.push( { - name: _x( - 'Theme', - 'Indicates these duotone filters come from the theme.' - ), - slug: 'theme', - duotones: themeDuotones, - } ); - } - - if ( - shouldDisplayDefaultDuotones && - defaultDuotones && - defaultDuotones.length - ) { - result.duotones.push( { - name: _x( - 'Default', - 'Indicates these duotone filters come from WordPress.' - ), - slug: 'default', - duotones: defaultDuotones, - } ); - } - if ( customDuotones && customDuotones.length ) { - result.duotones.push( { - name: _x( - 'Custom', - 'Indicates these doutone filters are created by the user.' - ), - slug: 'custom', - duotones: customDuotones, - } ); - } - - return result; - }, [ - colors, - gradients, - customDuotones, - themeDuotones, - defaultDuotones, - shouldDisplayDefaultDuotones, - ] ); - - return palettes; -} - function StyleBook( { enableResizing = true, isSelected, @@ -147,8 +64,7 @@ function StyleBook( { const [ resizeObserver, sizes ] = useResizeObserver(); const [ textColor ] = useGlobalStyle( 'color.text' ); const [ backgroundColor ] = useGlobalStyle( 'color.background' ); - const colors = useMultiOriginPalettes(); - const [ examples, setExamples ] = useState( () => getExamples( colors ) ); + const [ examples ] = useState( getExamples ); const tabs = useMemo( () => getTopLevelStyleBookCategories().filter( ( category ) => @@ -158,12 +74,6 @@ function StyleBook( { ), [ examples ] ); - - // Ensure color examples are kept in sync with Global Styles palette changes. - useEffect( () => { - setExamples( getExamples( colors ) ); - }, [ colors ] ); - const { base: baseConfig } = useContext( GlobalStylesContext ); const mergedConfig = useMemo( () => { @@ -364,7 +274,6 @@ const Examples = memo( key={ example.name } id={ `example-${ example.name }` } title={ example.title } - content={ example.content } blocks={ example.blocks } isSelected={ isSelected( example.name ) } onClick={ () => { @@ -403,7 +312,6 @@ const Subcategory = ( { examples, isSelected, onSelect } ) => { key={ example.name } id={ `example-${ example.name }` } title={ example.title } - content={ example.content } blocks={ example.blocks } isSelected={ isSelected( example.name ) } onClick={ () => { @@ -414,9 +322,7 @@ const Subcategory = ( { examples, isSelected, onSelect } ) => { ); }; -const disabledExamples = [ 'example-duotones' ]; - -const Example = ( { id, title, blocks, isSelected, onClick, content } ) => { +const Example = ( { id, title, blocks, isSelected, onClick } ) => { const originalSettings = useSelect( ( select ) => select( blockEditorStore ).getSettings(), [] @@ -436,20 +342,12 @@ const Example = ( { id, title, blocks, isSelected, onClick, content } ) => { [ blocks ] ); - const disabledProps = disabledExamples.includes( id ) - ? { - disabled: true, - accessibleWhenDisabled: true, - } - : {}; - return (
{ render={
} role="button" onClick={ onClick } - { ...disabledProps } > { title } @@ -470,17 +367,12 @@ const Example = ( { id, title, blocks, isSelected, onClick, content } ) => { aria-hidden > - { content ? ( - content - ) : ( - - - - - ) } + + +
diff --git a/packages/edit-site/src/components/style-book/test/categories.js b/packages/edit-site/src/components/style-book/test/categories.js index 128eaf282a9c5..5629689e260f8 100644 --- a/packages/edit-site/src/components/style-book/test/categories.js +++ b/packages/edit-site/src/components/style-book/test/categories.js @@ -48,6 +48,11 @@ const exampleThemeBlocks = [ title: 'Home Link', category: 'design', }, + { + name: 'custom/colors', + title: 'Colors', + category: 'colors', + }, { name: 'core/site-logo', title: 'Site Logo', diff --git a/packages/edit-site/src/components/style-book/types.ts b/packages/edit-site/src/components/style-book/types.ts index e7be17b17dd4d..4729b38b1b2bb 100644 --- a/packages/edit-site/src/components/style-book/types.ts +++ b/packages/edit-site/src/components/style-book/types.ts @@ -9,7 +9,6 @@ export type StyleBookCategory = { slug: string; blocks?: string[]; exclude?: string[]; - include?: string[]; subcategories?: StyleBookCategory[]; }; @@ -17,8 +16,7 @@ export type BlockExample = { name: string; title: string; category: string; - content?: JSX.Element; - blocks?: Block | Block[]; + blocks: Block | Block[]; }; export type CategoryExamples = { @@ -27,34 +25,3 @@ export type CategoryExamples = { examples?: BlockExample[]; subcategories?: CategoryExamples[]; }; - -export type StyleBookColorGroup = { - origin: string; - slug: string; - title: string; - type: string; -}; - -export type Color = { slug: string }; -export type Gradient = { slug: string }; -export type Duotone = { - colors: string[]; - slug: 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' >; -}; From a2e68b4be81edabbb6dcb168aa77db1b27b1668c Mon Sep 17 00:00:00 2001 From: akasunil Date: Mon, 28 Oct 2024 10:58:36 +0530 Subject: [PATCH 04/10] Revert unneccessory changes --- ...se-multiple-origin-colors-and-gradients.js | 8 +- .../src/components/global-styles/ui.js | 11 ++ .../components/style-book/color-examples.tsx | 44 +++++++ .../src/components/style-book/constants.ts | 78 +++++++++++- .../style-book/duotone-examples.tsx | 53 ++++++++ .../src/components/style-book/examples.ts | 63 ---------- .../src/components/style-book/examples.tsx | 113 +++++++++++++++++ .../src/components/style-book/index.js | 115 ++++++++++++++++-- .../components/style-book/test/categories.js | 5 - .../src/components/style-book/types.ts | 35 +++++- 10 files changed, 441 insertions(+), 84 deletions(-) create mode 100644 packages/edit-site/src/components/style-book/color-examples.tsx create mode 100644 packages/edit-site/src/components/style-book/duotone-examples.tsx delete mode 100644 packages/edit-site/src/components/style-book/examples.ts create mode 100644 packages/edit-site/src/components/style-book/examples.tsx diff --git a/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js b/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js index ee27960529ede..cfa5930ba7034 100644 --- a/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js +++ b/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js @@ -55,6 +55,7 @@ export default function useMultipleOriginColorsAndGradients() { 'Theme', 'Indicates this palette comes from the theme.' ), + slug: 'theme', colors: themeColors, } ); } @@ -68,6 +69,7 @@ export default function useMultipleOriginColorsAndGradients() { 'Default', 'Indicates this palette comes from WordPress.' ), + slug: 'default', colors: defaultColors, } ); } @@ -75,8 +77,9 @@ export default function useMultipleOriginColorsAndGradients() { result.push( { name: _x( 'Custom', - 'Indicates this palette comes from the theme.' + 'Indicates this palette is created by the user.' ), + slug: 'custom', colors: customColors, } ); } @@ -96,6 +99,7 @@ export default function useMultipleOriginColorsAndGradients() { 'Theme', 'Indicates this palette comes from the theme.' ), + slug: 'theme', gradients: themeGradients, } ); } @@ -109,6 +113,7 @@ export default function useMultipleOriginColorsAndGradients() { 'Default', 'Indicates this palette comes from WordPress.' ), + slug: 'default', gradients: defaultGradients, } ); } @@ -118,6 +123,7 @@ export default function useMultipleOriginColorsAndGradients() { 'Custom', 'Indicates this palette is created by the user.' ), + slug: 'custom', gradients: customGradients, } ); } diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 6cd465e237100..9ca88f40f1f00 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -45,6 +45,7 @@ import ScreenCSS from './screen-css'; import ScreenRevisions from './screen-revisions'; import { unlock } from '../../lock-unlock'; import { store as editSiteStore } from '../../store'; +import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants'; const SLOT_FILL_NAME = 'GlobalStylesMenu'; const { useGlobalStylesReset } = unlock( blockEditorPrivateApis ); @@ -191,6 +192,16 @@ function GlobalStylesStyleBook() { ) } onSelect={ ( blockName ) => { + if ( + STYLE_BOOK_COLOR_GROUPS.find( + ( group ) => group.slug === blockName + ) + ) { + // Go to color palettes Global Styles. + navigator.goTo( '/colors/palette' ); + return; + } + // Now go to the selected block. navigator.goTo( '/blocks/' + encodeURIComponent( blockName ) ); } } diff --git a/packages/edit-site/src/components/style-book/color-examples.tsx b/packages/edit-site/src/components/style-book/color-examples.tsx new file mode 100644 index 0000000000000..97bdeecee32d3 --- /dev/null +++ b/packages/edit-site/src/components/style-book/color-examples.tsx @@ -0,0 +1,44 @@ +/** + * External dependencies + */ +import clsx from 'clsx'; + +/** + * WordPress dependencies + */ +import { __experimentalGrid as Grid } from '@wordpress/components'; +import { View } from '@wordpress/primitives'; +import { + getColorClassName, + __experimentalGetGradientClass, +} from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import type { Color, Gradient } from './types'; + +const ColorExamples = ( { colors, type } ): JSX.Element | null => { + if ( ! colors ) { + return null; + } + + return ( + + { colors.map( ( color: Color | Gradient ) => { + const className = + type === 'gradients' + ? __experimentalGetGradientClass( color.slug ) + : getColorClassName( 'background-color', color.slug ); + const classes = clsx( + 'edit-site-style-book__color-example', + className + ); + + return ; + } ) } + + ); +}; + +export default ColorExamples; diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts index 06dc80bcd3a27..6aa280c937d42 100644 --- a/packages/edit-site/src/components/style-book/constants.ts +++ b/packages/edit-site/src/components/style-book/constants.ts @@ -6,7 +6,52 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import type { StyleBookCategory } from './types'; +import type { StyleBookCategory, StyleBookColorGroup } from './types'; + +export const STYLE_BOOK_COLOR_GROUPS: StyleBookColorGroup[] = [ + { + slug: 'theme-colors', + title: __( 'Theme Colors' ), + origin: 'theme', + type: 'colors', + }, + { + slug: 'theme-gradients', + title: __( 'Theme Gradients' ), + origin: 'theme', + type: 'gradients', + }, + { + slug: 'custom-colors', + title: __( 'Custom Colors' ), + origin: 'custom', + type: 'colors', + }, + { + slug: 'custom-gradients', + title: __( 'Custom Gradients' ), + origin: 'custom', // User. + type: 'gradients', + }, + { + slug: 'duotones', + title: __( 'Duotones' ), + origin: 'theme', + type: 'duotones', + }, + { + slug: 'default-colors', + title: __( 'Default Colors' ), + origin: 'default', + type: 'colors', + }, + { + slug: 'default-gradients', + title: __( 'Default Gradients' ), + origin: 'default', + type: 'gradients', + }, +]; export const STYLE_BOOK_THEME_SUBCATEGORIES: Omit< StyleBookCategory, @@ -74,7 +119,7 @@ export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [ { slug: 'colors', title: __( 'Colors' ), - blocks: [ 'custom/colors' ], + blocks: [], }, { slug: 'theme', @@ -144,15 +189,40 @@ export const STYLE_BOOK_IFRAME_STYLES = ` box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)); } + .edit-site-style-book__example.is-disabled-example { + pointer-events: none; + } + .edit-site-style-book__example:focus:not(:disabled) { box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)); outline: 3px solid transparent; } + .edit-site-style-book__duotone-example > div:first-child { + display: flex; + aspect-ratio: 16 / 9; + grid-row: span 1; + grid-column: span 2; + } + .edit-site-style-book__duotone-example img { + width: 100%; + height: 100%; + object-fit: cover; + } + .edit-site-style-book__duotone-example > div:not(:first-child) { + height: 20px; + border: 1px solid #ddd; + } + + .edit-site-style-book__color-example { + height: 52px; + border: 1px solid #ddd; + } + .edit-site-style-book__examples.is-wide .edit-site-style-book__example { flex-direction: row; } - + .edit-site-style-book__subcategory-title, .edit-site-style-book__example-title { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; @@ -163,7 +233,7 @@ export const STYLE_BOOK_IFRAME_STYLES = ` text-align: left; text-transform: uppercase; } - + .edit-site-style-book__subcategory-title { font-size: 16px; margin-bottom: 40px; diff --git a/packages/edit-site/src/components/style-book/duotone-examples.tsx b/packages/edit-site/src/components/style-book/duotone-examples.tsx new file mode 100644 index 0000000000000..7ee90e61f1c6a --- /dev/null +++ b/packages/edit-site/src/components/style-book/duotone-examples.tsx @@ -0,0 +1,53 @@ +/** + * WordPress dependencies + */ +import { __experimentalGrid as Grid } from '@wordpress/components'; +import { View } from '@wordpress/primitives'; + +/** + * Internal dependencies + */ +import type { Duotone } from './types'; + +const DuotoneExamples = ( { duotones } ): JSX.Element | null => { + if ( ! duotones ) { + return null; + } + + return ( + + { duotones.map( ( duotone: Duotone ) => { + return ( + + + { + + { duotone.colors.map( ( color ) => { + return ( + + ); + } ) } + + ); + } ) } + + ); +}; + +export default DuotoneExamples; diff --git a/packages/edit-site/src/components/style-book/examples.ts b/packages/edit-site/src/components/style-book/examples.ts deleted file mode 100644 index 80807b10374c6..0000000000000 --- a/packages/edit-site/src/components/style-book/examples.ts +++ /dev/null @@ -1,63 +0,0 @@ -/** - * WordPress dependencies - */ -import { __, sprintf } from '@wordpress/i18n'; -import { - getBlockType, - getBlockTypes, - getBlockFromExample, - createBlock, -} from '@wordpress/blocks'; - -/** - * Internal dependencies - */ -import type { BlockExample } from './types'; - -/** - * Returns a list of examples for registered block types. - * - * @return {BlockExample[]} An array of block examples. - */ -export function getExamples(): BlockExample[] { - const nonHeadingBlockExamples = getBlockTypes() - .filter( ( blockType ) => { - const { name, example, supports } = blockType; - return ( - name !== 'core/heading' && - !! example && - supports.inserter !== false - ); - } ) - .map( ( blockType ) => ( { - name: blockType.name, - title: blockType.title, - category: blockType.category, - blocks: getBlockFromExample( blockType.name, blockType.example ), - } ) ); - const isHeadingBlockRegistered = !! getBlockType( 'core/heading' ); - - if ( ! isHeadingBlockRegistered ) { - return nonHeadingBlockExamples; - } - - // Use our own example for the Heading block so that we can show multiple - // heading levels. - const headingsExample = { - name: 'core/heading', - title: __( 'Headings' ), - category: 'text', - blocks: [ 1, 2, 3, 4, 5, 6 ].map( ( level ) => { - return createBlock( 'core/heading', { - content: sprintf( - // translators: %d: heading level e.g: "1", "2", "3" - __( 'Heading %d' ), - level - ), - level, - } ); - } ), - }; - - return [ headingsExample, ...nonHeadingBlockExamples ]; -} diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx new file mode 100644 index 0000000000000..9f4badd99a658 --- /dev/null +++ b/packages/edit-site/src/components/style-book/examples.tsx @@ -0,0 +1,113 @@ +/** + * WordPress dependencies + */ +import { __, sprintf } from '@wordpress/i18n'; +import { + getBlockType, + getBlockTypes, + getBlockFromExample, + createBlock, +} from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import type { BlockExample, ColorOrigin, MultiOriginPalettes } from './types'; +import ColorExamples from './color-examples'; +import DuotoneExamples from './duotone-examples'; +import { STYLE_BOOK_COLOR_GROUPS } from './constants'; + +/** + * Returns examples color examples for each origin + * e.g. Core (Default), Theme, and User. + * + * @param {MultiOriginPalettes} colors Global Styles color palettes per origin. + * @return {BlockExample[]} An array of color block examples. + */ +function getColorExamples( colors: MultiOriginPalettes ): BlockExample[] { + if ( ! colors ) { + return []; + } + + const examples: BlockExample[] = []; + + STYLE_BOOK_COLOR_GROUPS.forEach( ( group ) => { + const palette = colors[ group.type ].find( + ( origin: ColorOrigin ) => origin.slug === group.origin + ); + + if ( palette?.[ group.type ] ) { + const example: BlockExample = { + name: group.slug, + title: group.title, + category: 'colors', + }; + if ( group.type === 'duotones' ) { + example.content = ( + + ); + examples.push( example ); + } else { + example.content = ( + + ); + examples.push( example ); + } + } + } ); + + return examples; +} + +/** + * Returns a list of examples for registered block types. + * + * @param {MultiOriginPalettes} colors Global styles colors grouped by origin e.g. Core, Theme, and User. + * @return {BlockExample[]} An array of block examples. + */ +export function getExamples( colors: MultiOriginPalettes ): BlockExample[] { + const nonHeadingBlockExamples = getBlockTypes() + .filter( ( blockType ) => { + const { name, example, supports } = blockType; + return ( + name !== 'core/heading' && + !! example && + supports?.inserter !== false + ); + } ) + .map( ( blockType ) => ( { + name: blockType.name, + title: blockType.title, + category: blockType.category, + blocks: getBlockFromExample( blockType.name, blockType.example ), + } ) ); + const isHeadingBlockRegistered = !! getBlockType( 'core/heading' ); + + if ( ! isHeadingBlockRegistered ) { + return nonHeadingBlockExamples; + } + + // Use our own example for the Heading block so that we can show multiple + // heading levels. + const headingsExample = { + name: 'core/heading', + title: __( 'Headings' ), + category: 'text', + blocks: [ 1, 2, 3, 4, 5, 6 ].map( ( level ) => { + return createBlock( 'core/heading', { + content: sprintf( + // translators: %d: heading level e.g: "1", "2", "3" + __( 'Heading %d' ), + level + ), + level, + } ); + } ), + }; + const colorExamples = getColorExamples( colors ); + + return [ headingsExample, ...colorExamples, ...nonHeadingBlockExamples ]; +} diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index d047572ba0548..e9660323b8373 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -11,13 +11,15 @@ import { Composite, privateApis as componentsPrivateApis, } from '@wordpress/components'; -import { __, sprintf } from '@wordpress/i18n'; +import { __, _x, sprintf } from '@wordpress/i18n'; import { BlockList, privateApis as blockEditorPrivateApis, store as blockEditorStore, + useSettings, __unstableEditorStyles as EditorStyles, __unstableIframe as Iframe, + __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients, } from '@wordpress/block-editor'; import { privateApis as editorPrivateApis } from '@wordpress/editor'; import { useSelect } from '@wordpress/data'; @@ -51,6 +53,81 @@ function isObjectEmpty( object ) { return ! object || Object.keys( object ).length === 0; } +/** + * Retrieves colors, gradients, and duotone filters from Global Styles. + * The inclusion of default (Core) palettes is controlled by the relevant + * theme.json property e.g. defaultPalette, defaultGradients, defaultDuotone. + * + * @return {Object} Object containing properties for each type of palette. + */ +function useMultiOriginPalettes() { + const { colors, gradients } = useMultipleOriginColorsAndGradients(); + + // Add duotone filters to the palettes data. + const [ + shouldDisplayDefaultDuotones, + customDuotones, + themeDuotones, + defaultDuotones, + ] = useSettings( + 'color.defaultDuotone', + 'color.duotone.custom', + 'color.duotone.theme', + 'color.duotone.default' + ); + + const palettes = useMemo( () => { + const result = { colors, gradients, duotones: [] }; + + if ( themeDuotones && themeDuotones.length ) { + result.duotones.push( { + name: _x( + 'Theme', + 'Indicates these duotone filters come from the theme.' + ), + slug: 'theme', + duotones: themeDuotones, + } ); + } + + if ( + shouldDisplayDefaultDuotones && + defaultDuotones && + defaultDuotones.length + ) { + result.duotones.push( { + name: _x( + 'Default', + 'Indicates these duotone filters come from WordPress.' + ), + slug: 'default', + duotones: defaultDuotones, + } ); + } + if ( customDuotones && customDuotones.length ) { + result.duotones.push( { + name: _x( + 'Custom', + 'Indicates these doutone filters are created by the user.' + ), + slug: 'custom', + duotones: customDuotones, + } ); + } + + return result; + }, [ + colors, + gradients, + customDuotones, + themeDuotones, + defaultDuotones, + shouldDisplayDefaultDuotones, + ] ); + + return palettes; +} + function StyleBook( { enableResizing = true, isSelected, @@ -64,8 +141,8 @@ function StyleBook( { const [ resizeObserver, sizes ] = useResizeObserver(); const [ textColor ] = useGlobalStyle( 'color.text' ); const [ backgroundColor ] = useGlobalStyle( 'color.background' ); - const [ examples ] = useState( getExamples ); - + const colors = useMultiOriginPalettes(); + const examples = useMemo( () => getExamples( colors ), [ colors ] ); const tabs = useMemo( () => getTopLevelStyleBookCategories().filter( ( category ) => @@ -274,6 +351,7 @@ const Examples = memo( key={ example.name } id={ `example-${ example.name }` } title={ example.title } + content={ example.content } blocks={ example.blocks } isSelected={ isSelected( example.name ) } onClick={ () => { @@ -312,6 +390,7 @@ const Subcategory = ( { examples, isSelected, onSelect } ) => { key={ example.name } id={ `example-${ example.name }` } title={ example.title } + content={ example.content } blocks={ example.blocks } isSelected={ isSelected( example.name ) } onClick={ () => { @@ -322,7 +401,9 @@ const Subcategory = ( { examples, isSelected, onSelect } ) => { ); }; -const Example = ( { id, title, blocks, isSelected, onClick } ) => { +const disabledExamples = [ 'example-duotones' ]; + +const Example = ( { id, title, blocks, isSelected, onClick, content } ) => { const originalSettings = useSelect( ( select ) => select( blockEditorStore ).getSettings(), [] @@ -342,12 +423,20 @@ const Example = ( { id, title, blocks, isSelected, onClick } ) => { [ blocks ] ); + const disabledProps = disabledExamples.includes( id ) + ? { + disabled: true, + accessibleWhenDisabled: true, + } + : {}; + return (
{ render={
} role="button" onClick={ onClick } + { ...disabledProps } > { title } @@ -367,12 +457,17 @@ const Example = ( { id, title, blocks, isSelected, onClick } ) => { aria-hidden > - - - + { content ? ( + content + ) : ( + + + + + ) }
diff --git a/packages/edit-site/src/components/style-book/test/categories.js b/packages/edit-site/src/components/style-book/test/categories.js index 5629689e260f8..128eaf282a9c5 100644 --- a/packages/edit-site/src/components/style-book/test/categories.js +++ b/packages/edit-site/src/components/style-book/test/categories.js @@ -48,11 +48,6 @@ const exampleThemeBlocks = [ title: 'Home Link', category: 'design', }, - { - name: 'custom/colors', - title: 'Colors', - category: 'colors', - }, { name: 'core/site-logo', title: 'Site Logo', diff --git a/packages/edit-site/src/components/style-book/types.ts b/packages/edit-site/src/components/style-book/types.ts index 4729b38b1b2bb..e7be17b17dd4d 100644 --- a/packages/edit-site/src/components/style-book/types.ts +++ b/packages/edit-site/src/components/style-book/types.ts @@ -9,6 +9,7 @@ export type StyleBookCategory = { slug: string; blocks?: string[]; exclude?: string[]; + include?: string[]; subcategories?: StyleBookCategory[]; }; @@ -16,7 +17,8 @@ export type BlockExample = { name: string; title: string; category: string; - blocks: Block | Block[]; + content?: JSX.Element; + blocks?: Block | Block[]; }; export type CategoryExamples = { @@ -25,3 +27,34 @@ export type CategoryExamples = { examples?: BlockExample[]; subcategories?: CategoryExamples[]; }; + +export type StyleBookColorGroup = { + origin: string; + slug: string; + title: string; + type: string; +}; + +export type Color = { slug: string }; +export type Gradient = { slug: string }; +export type Duotone = { + colors: string[]; + slug: 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' >; +}; From e2679787c07d080fa09c9c3fe460c40bc339e935 Mon Sep 17 00:00:00 2001 From: benazeer-ben Date: Fri, 15 Nov 2024 21:08:53 +0530 Subject: [PATCH 05/10] Feedback changes - Skip serialization & border box --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/embed/block.json | 9 +++++++-- packages/block-library/src/embed/embed-preview.js | 15 +++++++++++++-- packages/block-library/src/embed/save.js | 10 +++++++++- packages/block-library/src/embed/style.scss | 3 +++ 5 files changed, 33 insertions(+), 6 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index dd49d15685724..88cab6efc156f 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -263,7 +263,7 @@ Add a block that displays content pulled from other sites, like Twitter or YouTu - **Name:** core/embed - **Category:** embed -- **Supports:** align, interactivity (clientNavigation), spacing (margin) +- **Supports:** align, interactivity (clientNavigation), spacing (margin, padding) - **Attributes:** allowResponsive, caption, previewable, providerNameSlug, responsive, type, url ## File diff --git a/packages/block-library/src/embed/block.json b/packages/block-library/src/embed/block.json index 7c6ea54c3ee94..c829b06295272 100644 --- a/packages/block-library/src/embed/block.json +++ b/packages/block-library/src/embed/block.json @@ -43,7 +43,8 @@ "supports": { "align": true, "spacing": { - "margin": true + "margin": true, + "padding": true }, "interactivity": { "clientNavigation": true @@ -58,9 +59,13 @@ "color": true, "width": true, "style": true - } + }, + "__experimentalSkipSerialization": true } }, + "selectors": { + "border": ".wp-block-embed__wrapper " + }, "editorStyle": "wp-block-embed-editor", "style": "wp-block-embed" } diff --git a/packages/block-library/src/embed/embed-preview.js b/packages/block-library/src/embed/embed-preview.js index c0c7d5942d1d7..97c49b0b9153d 100644 --- a/packages/block-library/src/embed/embed-preview.js +++ b/packages/block-library/src/embed/embed-preview.js @@ -13,7 +13,10 @@ import clsx from 'clsx'; */ import { __, sprintf } from '@wordpress/i18n'; import { Placeholder, SandBox } from '@wordpress/components'; -import { BlockIcon } from '@wordpress/block-editor'; +import { + BlockIcon, + __experimentalUseBorderProps as useBorderProps, +} from '@wordpress/block-editor'; import { useState } from '@wordpress/element'; import { getAuthority } from '@wordpress/url'; @@ -31,6 +34,7 @@ export default function EmbedPreview( { className, icon, label, + attributes, } ) { const [ interactive, setInteractive ] = useState( false ); @@ -64,6 +68,7 @@ export default function EmbedPreview( { className, 'wp-block-embed__wrapper' ); + const borderProps = useBorderProps( attributes ); // Disabled because the overlay div doesn't actually have a role or functionality // as far as the user is concerned. We're just catching the first click so that @@ -73,7 +78,13 @@ export default function EmbedPreview( { 'wp-embed' === type ? ( ) : ( -
+
-
+
{ `\n${ url }\n` /* URL needs to be on its own line. */ }
{ ! RichText.isEmpty( caption ) && ( diff --git a/packages/block-library/src/embed/style.scss b/packages/block-library/src/embed/style.scss index 2776b404b853e..3c5b1f558430c 100644 --- a/packages/block-library/src/embed/style.scss +++ b/packages/block-library/src/embed/style.scss @@ -22,6 +22,9 @@ .wp-block-embed { overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block. + // This block has customizable padding, border-box makes that more predictable. + box-sizing: border-box; + // Supply caption styles to embeds, even if the theme hasn't opted in. // Reason being: the new markup, figcaptions, are not likely to be styled in the majority of existing themes, // so we supply the styles so as to not appear broken or unstyled in those. From 38ca863e13a1d3ce67fc2be08d1c94e1039184ba Mon Sep 17 00:00:00 2001 From: benazeer-ben Date: Mon, 25 Nov 2024 11:51:21 +0530 Subject: [PATCH 06/10] Skip serialization for padding --- packages/block-library/src/embed/block.json | 5 +++-- packages/block-library/src/embed/embed-preview.js | 7 +++++-- packages/block-library/src/embed/save.js | 7 +++++-- 3 files changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/embed/block.json b/packages/block-library/src/embed/block.json index c829b06295272..8d760f04cf9bc 100644 --- a/packages/block-library/src/embed/block.json +++ b/packages/block-library/src/embed/block.json @@ -44,7 +44,8 @@ "align": true, "spacing": { "margin": true, - "padding": true + "padding": true, + "__experimentalSkipSerialization": [ "padding" ] }, "interactivity": { "clientNavigation": true @@ -64,7 +65,7 @@ } }, "selectors": { - "border": ".wp-block-embed__wrapper " + "border": ".wp-block-embed__wrapper" }, "editorStyle": "wp-block-embed-editor", "style": "wp-block-embed" diff --git a/packages/block-library/src/embed/embed-preview.js b/packages/block-library/src/embed/embed-preview.js index 97c49b0b9153d..c76b096343df7 100644 --- a/packages/block-library/src/embed/embed-preview.js +++ b/packages/block-library/src/embed/embed-preview.js @@ -16,6 +16,7 @@ import { Placeholder, SandBox } from '@wordpress/components'; import { BlockIcon, __experimentalUseBorderProps as useBorderProps, + __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles, } from '@wordpress/block-editor'; import { useState } from '@wordpress/element'; import { getAuthority } from '@wordpress/url'; @@ -69,6 +70,7 @@ export default function EmbedPreview( { 'wp-block-embed__wrapper' ); const borderProps = useBorderProps( attributes ); + const spacingProps = getSpacingClassesAndStyles( attributes ); // Disabled because the overlay div doesn't actually have a role or functionality // as far as the user is concerned. We're just catching the first click so that @@ -81,9 +83,10 @@ export default function EmbedPreview( {
{ `\n${ url }\n` /* URL needs to be on its own line. */ }
From cc1895750ef3dcb300ac53d2519c8700f294b82b Mon Sep 17 00:00:00 2001 From: benazeer-ben Date: Tue, 26 Nov 2024 11:40:54 +0530 Subject: [PATCH 07/10] Doc Build --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/embed/block.json | 8 +++----- packages/block-library/src/embed/embed-preview.js | 7 ++----- packages/block-library/src/embed/save.js | 7 ++----- 4 files changed, 8 insertions(+), 16 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 88cab6efc156f..dd49d15685724 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -263,7 +263,7 @@ Add a block that displays content pulled from other sites, like Twitter or YouTu - **Name:** core/embed - **Category:** embed -- **Supports:** align, interactivity (clientNavigation), spacing (margin, padding) +- **Supports:** align, interactivity (clientNavigation), spacing (margin) - **Attributes:** allowResponsive, caption, previewable, providerNameSlug, responsive, type, url ## File diff --git a/packages/block-library/src/embed/block.json b/packages/block-library/src/embed/block.json index 8d760f04cf9bc..83f1f61a2ebee 100644 --- a/packages/block-library/src/embed/block.json +++ b/packages/block-library/src/embed/block.json @@ -43,20 +43,18 @@ "supports": { "align": true, "spacing": { - "margin": true, - "padding": true, - "__experimentalSkipSerialization": [ "padding" ] + "margin": true }, "interactivity": { "clientNavigation": true }, "__experimentalBorder": { - "radius": true, + "radius": false, "color": true, "width": true, "style": true, "__experimentalDefaultControls": { - "radius": true, + "radius": false, "color": true, "width": true, "style": true diff --git a/packages/block-library/src/embed/embed-preview.js b/packages/block-library/src/embed/embed-preview.js index c76b096343df7..593f2c3d5be66 100644 --- a/packages/block-library/src/embed/embed-preview.js +++ b/packages/block-library/src/embed/embed-preview.js @@ -16,7 +16,6 @@ import { Placeholder, SandBox } from '@wordpress/components'; import { BlockIcon, __experimentalUseBorderProps as useBorderProps, - __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles, } from '@wordpress/block-editor'; import { useState } from '@wordpress/element'; import { getAuthority } from '@wordpress/url'; @@ -70,7 +69,6 @@ export default function EmbedPreview( { 'wp-block-embed__wrapper' ); const borderProps = useBorderProps( attributes ); - const spacingProps = getSpacingClassesAndStyles( attributes ); // Disabled because the overlay div doesn't actually have a role or functionality // as far as the user is concerned. We're just catching the first click so that @@ -83,10 +81,9 @@ export default function EmbedPreview( {
{ `\n${ url }\n` /* URL needs to be on its own line. */ }
From b0e2645153a695b3d0e8acdbdd75012c75279252 Mon Sep 17 00:00:00 2001 From: benazeer-ben Date: Tue, 26 Nov 2024 15:27:07 +0530 Subject: [PATCH 08/10] Update for wordpress embed case border styling --- packages/block-library/src/embed/embed-preview.js | 6 +++++- packages/block-library/src/embed/wp-embed-preview.js | 7 +++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/embed/embed-preview.js b/packages/block-library/src/embed/embed-preview.js index 593f2c3d5be66..aed9ceb24acca 100644 --- a/packages/block-library/src/embed/embed-preview.js +++ b/packages/block-library/src/embed/embed-preview.js @@ -76,7 +76,11 @@ export default function EmbedPreview( { /* eslint-disable jsx-a11y/no-static-element-interactions */ const embedWrapper = 'wp-embed' === type ? ( - + ) : (
{ const doc = new window.DOMParser().parseFromString( html, 'text/html' ); @@ -68,7 +68,10 @@ export default function WpEmbedPreview( { html } ) { }, [] ); return ( -
+