@wordpress/block-editor 15.6.1 → 15.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/build/components/background-image-control/index.js +2 -2
- package/build/components/background-image-control/index.js.map +2 -2
- package/build/components/block-quick-navigation/index.js +1 -0
- package/build/components/block-quick-navigation/index.js.map +2 -2
- package/build/components/block-toolbar/switch-section-style.js +2 -5
- package/build/components/block-toolbar/switch-section-style.js.map +2 -2
- package/build/components/global-styles/border-panel.js +2 -1
- package/build/components/global-styles/border-panel.js.map +2 -2
- package/build/components/global-styles/color-panel.js +2 -1
- package/build/components/global-styles/color-panel.js.map +2 -2
- package/build/components/global-styles/dimensions-panel.js +3 -2
- package/build/components/global-styles/dimensions-panel.js.map +2 -2
- package/build/components/global-styles/filters-panel.js +2 -1
- package/build/components/global-styles/filters-panel.js.map +2 -2
- package/build/components/global-styles/hooks.js +0 -179
- package/build/components/global-styles/hooks.js.map +3 -3
- package/build/components/global-styles/index.js +0 -29
- package/build/components/global-styles/index.js.map +2 -2
- package/build/components/global-styles/typography-panel.js +2 -1
- package/build/components/global-styles/typography-panel.js.map +2 -2
- package/build/components/global-styles/typography-utils.js +2 -49
- package/build/components/global-styles/typography-utils.js.map +2 -2
- package/build/components/global-styles/utils.js +0 -396
- package/build/components/global-styles/utils.js.map +3 -3
- package/build/components/inserter/media-tab/media-tab.js +33 -1
- package/build/components/inserter/media-tab/media-tab.js.map +3 -3
- package/build/components/inserter/tips.js +0 -2
- package/build/components/inserter/tips.js.map +2 -2
- package/build/components/media-placeholder/index.js +31 -1
- package/build/components/media-placeholder/index.js.map +3 -3
- package/build/components/media-replace-flow/index.js +29 -1
- package/build/components/media-replace-flow/index.js.map +3 -3
- package/build/components/{global-styles/context.js → media-upload-modal/index.js} +8 -23
- package/build/components/media-upload-modal/index.js.map +7 -0
- package/build/hooks/allowed-blocks.js +3 -8
- package/build/hooks/allowed-blocks.js.map +3 -3
- package/build/hooks/block-style-variation.js +10 -23
- package/build/hooks/block-style-variation.js.map +2 -2
- package/build/hooks/duotone.js +3 -3
- package/build/hooks/duotone.js.map +2 -2
- package/build/hooks/fit-text.js +2 -2
- package/build/hooks/fit-text.js.map +2 -2
- package/build/hooks/font-size.js +2 -2
- package/build/hooks/font-size.js.map +2 -2
- package/build/hooks/use-typography-props.js +2 -2
- package/build/hooks/use-typography-props.js.map +2 -2
- package/build/private-apis.js +3 -1
- package/build/private-apis.js.map +3 -3
- package/build-module/components/background-image-control/index.js +1 -1
- package/build-module/components/background-image-control/index.js.map +2 -2
- package/build-module/components/block-quick-navigation/index.js +1 -0
- package/build-module/components/block-quick-navigation/index.js.map +2 -2
- package/build-module/components/block-toolbar/switch-section-style.js +2 -5
- package/build-module/components/block-toolbar/switch-section-style.js.map +2 -2
- package/build-module/components/global-styles/border-panel.js +2 -1
- package/build-module/components/global-styles/border-panel.js.map +2 -2
- package/build-module/components/global-styles/color-panel.js +2 -1
- package/build-module/components/global-styles/color-panel.js.map +2 -2
- package/build-module/components/global-styles/dimensions-panel.js +2 -1
- package/build-module/components/global-styles/dimensions-panel.js.map +2 -2
- package/build-module/components/global-styles/filters-panel.js +2 -1
- package/build-module/components/global-styles/filters-panel.js.map +2 -2
- package/build-module/components/global-styles/hooks.js +1 -167
- package/build-module/components/global-styles/hooks.js.map +2 -2
- package/build-module/components/global-styles/index.js +1 -29
- package/build-module/components/global-styles/index.js.map +2 -2
- package/build-module/components/global-styles/typography-panel.js +2 -1
- package/build-module/components/global-styles/typography-panel.js.map +2 -2
- package/build-module/components/global-styles/typography-utils.js +1 -49
- package/build-module/components/global-styles/typography-utils.js.map +2 -2
- package/build-module/components/global-styles/utils.js +0 -372
- package/build-module/components/global-styles/utils.js.map +2 -2
- package/build-module/components/inserter/media-tab/media-tab.js +34 -2
- package/build-module/components/inserter/media-tab/media-tab.js.map +2 -2
- package/build-module/components/inserter/tips.js +0 -2
- package/build-module/components/inserter/tips.js.map +2 -2
- package/build-module/components/media-placeholder/index.js +31 -1
- package/build-module/components/media-placeholder/index.js.map +2 -2
- package/build-module/components/media-replace-flow/index.js +29 -1
- package/build-module/components/media-replace-flow/index.js.map +2 -2
- package/build-module/components/media-upload-modal/index.js +7 -0
- package/build-module/components/media-upload-modal/index.js.map +7 -0
- package/build-module/hooks/allowed-blocks.js +3 -8
- package/build-module/hooks/allowed-blocks.js.map +2 -2
- package/build-module/hooks/block-style-variation.js +8 -25
- package/build-module/hooks/block-style-variation.js.map +2 -2
- package/build-module/hooks/duotone.js +3 -3
- package/build-module/hooks/duotone.js.map +2 -2
- package/build-module/hooks/fit-text.js +2 -2
- package/build-module/hooks/fit-text.js.map +2 -2
- package/build-module/hooks/font-size.js +1 -1
- package/build-module/hooks/font-size.js.map +2 -2
- package/build-module/hooks/use-typography-props.js +1 -1
- package/build-module/hooks/use-typography-props.js.map +2 -2
- package/build-module/private-apis.js +3 -1
- package/build-module/private-apis.js.map +2 -2
- package/build-style/style-rtl.css +10 -6
- package/build-style/style.css +10 -6
- package/package.json +36 -35
- package/src/components/background-image-control/index.js +1 -1
- package/src/components/block-card/style.scss +1 -1
- package/src/components/block-navigation/style.scss +1 -1
- package/src/components/block-quick-navigation/index.js +1 -0
- package/src/components/block-quick-navigation/style.scss +5 -0
- package/src/components/block-switcher/style.scss +1 -1
- package/src/components/block-toolbar/switch-section-style.js +2 -5
- package/src/components/color-palette/test/__snapshots__/control.js.snap +1 -1
- package/src/components/global-styles/border-panel.js +2 -1
- package/src/components/global-styles/color-panel.js +2 -1
- package/src/components/global-styles/color-panel.native.js +1 -1
- package/src/components/global-styles/dimensions-panel.js +2 -1
- package/src/components/global-styles/filters-panel.js +2 -1
- package/src/components/global-styles/hooks.js +1 -200
- package/src/components/global-styles/index.js +1 -17
- package/src/components/global-styles/test/typography-utils.js +0 -806
- package/src/components/global-styles/typography-panel.js +2 -1
- package/src/components/global-styles/typography-utils.js +0 -133
- package/src/components/global-styles/utils.js +0 -568
- package/src/components/inserter/media-tab/media-tab.js +44 -2
- package/src/components/inserter/style.scss +2 -2
- package/src/components/inserter/tips.js +0 -2
- package/src/components/media-placeholder/index.js +41 -1
- package/src/components/media-replace-flow/index.js +39 -1
- package/src/components/media-upload-modal/index.js +18 -0
- package/src/components/multi-selection-inspector/style.scss +1 -1
- package/src/hooks/allowed-blocks.js +3 -11
- package/src/hooks/block-style-variation.js +8 -28
- package/src/hooks/duotone.js +3 -3
- package/src/hooks/fit-text.js +2 -2
- package/src/hooks/font-size.js +1 -1
- package/src/hooks/use-typography-props.js +1 -1
- package/src/private-apis.js +2 -0
- package/src/style.scss +1 -0
- package/tsconfig.json +2 -0
- package/build/components/global-styles/context.js.map +0 -7
- package/build/components/global-styles/get-block-css-selector.js +0 -78
- package/build/components/global-styles/get-block-css-selector.js.map +0 -7
- package/build/components/global-styles/get-global-styles-changes.js +0 -216
- package/build/components/global-styles/get-global-styles-changes.js.map +0 -7
- package/build/components/global-styles/use-global-styles-output.js +0 -998
- package/build/components/global-styles/use-global-styles-output.js.map +0 -7
- package/build-module/components/global-styles/context.js +0 -17
- package/build-module/components/global-styles/context.js.map +0 -7
- package/build-module/components/global-styles/get-block-css-selector.js +0 -54
- package/build-module/components/global-styles/get-block-css-selector.js.map +0 -7
- package/build-module/components/global-styles/get-global-styles-changes.js +0 -182
- package/build-module/components/global-styles/get-global-styles-changes.js.map +0 -7
- package/build-module/components/global-styles/use-global-styles-output.js +0 -979
- package/build-module/components/global-styles/use-global-styles-output.js.map +0 -7
- package/src/components/global-styles/README.md +0 -190
- package/src/components/global-styles/context.js +0 -16
- package/src/components/global-styles/get-block-css-selector.js +0 -114
- package/src/components/global-styles/get-global-styles-changes.js +0 -252
- package/src/components/global-styles/test/get-global-styles-changes.js +0 -290
- package/src/components/global-styles/test/use-global-styles-output.js +0 -1131
- package/src/components/global-styles/test/utils.js +0 -499
- package/src/components/global-styles/use-global-styles-output.js +0 -1487
|
@@ -15,12 +15,42 @@ import { useSelect } from "@wordpress/data";
|
|
|
15
15
|
import { keyboardReturn } from "@wordpress/icons";
|
|
16
16
|
import deprecated from "@wordpress/deprecated";
|
|
17
17
|
import MediaUpload from "../media-upload";
|
|
18
|
+
import MediaUploadModal from "../media-upload-modal";
|
|
18
19
|
import MediaUploadCheck from "../media-upload/check";
|
|
19
20
|
import URLPopover from "../url-popover";
|
|
20
21
|
import { store as blockEditorStore } from "../../store";
|
|
21
22
|
import { parseDropEvent } from "../use-on-block-drop";
|
|
22
23
|
const noop = () => {
|
|
23
24
|
};
|
|
25
|
+
function ConditionalMediaUpload({ render, ...props }) {
|
|
26
|
+
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
27
|
+
const mediaUpload = useSelect((select) => {
|
|
28
|
+
const { getSettings } = select(blockEditorStore);
|
|
29
|
+
return getSettings().mediaUpload;
|
|
30
|
+
}, []);
|
|
31
|
+
if (window.__experimentalDataViewsMediaModal) {
|
|
32
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
33
|
+
render && render({ open: () => setIsModalOpen(true) }),
|
|
34
|
+
/* @__PURE__ */ jsx(
|
|
35
|
+
MediaUploadModal,
|
|
36
|
+
{
|
|
37
|
+
...props,
|
|
38
|
+
isOpen: isModalOpen,
|
|
39
|
+
onClose: () => {
|
|
40
|
+
setIsModalOpen(false);
|
|
41
|
+
props.onClose?.();
|
|
42
|
+
},
|
|
43
|
+
onSelect: (media) => {
|
|
44
|
+
setIsModalOpen(false);
|
|
45
|
+
props.onSelect?.(media);
|
|
46
|
+
},
|
|
47
|
+
onUpload: mediaUpload
|
|
48
|
+
}
|
|
49
|
+
)
|
|
50
|
+
] });
|
|
51
|
+
}
|
|
52
|
+
return /* @__PURE__ */ jsx(MediaUpload, { ...props, render });
|
|
53
|
+
}
|
|
24
54
|
const InsertFromURLPopover = ({
|
|
25
55
|
src,
|
|
26
56
|
onChange,
|
|
@@ -376,7 +406,7 @@ function MediaPlaceholder({
|
|
|
376
406
|
};
|
|
377
407
|
const libraryButton = mediaLibraryButton ?? defaultButton;
|
|
378
408
|
const uploadMediaLibraryButton = /* @__PURE__ */ jsx(
|
|
379
|
-
|
|
409
|
+
ConditionalMediaUpload,
|
|
380
410
|
{
|
|
381
411
|
addToGallery,
|
|
382
412
|
gallery: multiple && onlyAllowsImages(),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/media-placeholder/index.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tFormFileUpload,\n\tPlaceholder,\n\tDropZone,\n\t__experimentalInputControl as InputControl,\n\t__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,\n\twithFilters,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport { useState, useEffect } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { keyboardReturn } from '@wordpress/icons';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport MediaUpload from '../media-upload';\nimport MediaUploadCheck from '../media-upload/check';\nimport URLPopover from '../url-popover';\nimport { store as blockEditorStore } from '../../store';\nimport { parseDropEvent } from '../use-on-block-drop';\n\nconst noop = () => {};\n\nconst InsertFromURLPopover = ( {\n\tsrc,\n\tonChange,\n\tonSubmit,\n\tonClose,\n\tpopoverAnchor,\n} ) => (\n\t<URLPopover anchor={ popoverAnchor } onClose={ onClose }>\n\t\t<form\n\t\t\tclassName=\"block-editor-media-placeholder__url-input-form\"\n\t\t\tonSubmit={ onSubmit }\n\t\t>\n\t\t\t<InputControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tlabel={ __( 'URL' ) }\n\t\t\t\ttype=\"text\" // Use text instead of URL to allow relative paths (e.g., /image/image.jpg)\n\t\t\t\thideLabelFromVision\n\t\t\t\tplaceholder={ __( 'Paste or type URL' ) }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalue={ src }\n\t\t\t\tsuffix={\n\t\t\t\t\t<InputControlSuffixWrapper variant=\"control\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\ticon={ keyboardReturn }\n\t\t\t\t\t\t\tlabel={ __( 'Apply' ) }\n\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</InputControlSuffixWrapper>\n\t\t\t\t}\n\t\t\t/>\n\t\t</form>\n\t</URLPopover>\n);\n\nconst URLSelectionUI = ( { src, onChangeSrc, onSelectURL } ) => {\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState( null );\n\tconst [ isURLInputVisible, setIsURLInputVisible ] = useState( false );\n\n\tconst openURLInput = () => {\n\t\tsetIsURLInputVisible( true );\n\t};\n\tconst closeURLInput = () => {\n\t\tsetIsURLInputVisible( false );\n\t\tpopoverAnchor?.focus();\n\t};\n\n\tconst onSubmitSrc = ( event ) => {\n\t\tevent.preventDefault();\n\t\tif ( src && onSelectURL ) {\n\t\t\tonSelectURL( src );\n\t\t\tcloseURLInput();\n\t\t}\n\t};\n\n\treturn (\n\t\t<div className=\"block-editor-media-placeholder__url-input-container\">\n\t\t\t<Button\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tclassName=\"block-editor-media-placeholder__button\"\n\t\t\t\tonClick={ openURLInput }\n\t\t\t\tisPressed={ isURLInputVisible }\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t\tref={ setPopoverAnchor }\n\t\t\t>\n\t\t\t\t{ __( 'Insert from URL' ) }\n\t\t\t</Button>\n\t\t\t{ isURLInputVisible && (\n\t\t\t\t<InsertFromURLPopover\n\t\t\t\t\tsrc={ src }\n\t\t\t\t\tonChange={ onChangeSrc }\n\t\t\t\t\tonSubmit={ onSubmitSrc }\n\t\t\t\t\tonClose={ closeURLInput }\n\t\t\t\t\tpopoverAnchor={ popoverAnchor }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n};\n\nexport function MediaPlaceholder( {\n\tvalue = {},\n\tallowedTypes,\n\tclassName,\n\ticon,\n\tlabels = {},\n\tmediaPreview,\n\tnotices,\n\tisAppender,\n\taccept,\n\taddToGallery,\n\tmultiple = false,\n\thandleUpload = true,\n\tdisableDropZone,\n\tdisableMediaButtons,\n\tonError,\n\tonSelect,\n\tonCancel,\n\tonSelectURL,\n\tonToggleFeaturedImage,\n\tonDoubleClick,\n\tonFilesPreUpload = noop,\n\tonHTMLDrop: deprecatedOnHTMLDrop,\n\tchildren,\n\tmediaLibraryButton,\n\tplaceholder,\n\tstyle,\n} ) {\n\tif ( deprecatedOnHTMLDrop ) {\n\t\tdeprecated( 'wp.blockEditor.MediaPlaceholder onHTMLDrop prop', {\n\t\t\tsince: '6.2',\n\t\t\tversion: '6.4',\n\t\t} );\n\t}\n\n\tconst mediaUpload = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn getSettings().mediaUpload;\n\t}, [] );\n\tconst [ src, setSrc ] = useState( '' );\n\n\tuseEffect( () => {\n\t\tsetSrc( value?.src ?? '' );\n\t}, [ value?.src ] );\n\n\tconst onlyAllowsImages = () => {\n\t\tif ( ! allowedTypes || allowedTypes.length === 0 ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn allowedTypes.every(\n\t\t\t( allowedType ) =>\n\t\t\t\tallowedType === 'image' || allowedType.startsWith( 'image/' )\n\t\t);\n\t};\n\n\tconst onFilesUpload = ( files ) => {\n\t\tif (\n\t\t\t! handleUpload ||\n\t\t\t( typeof handleUpload === 'function' && ! handleUpload( files ) )\n\t\t) {\n\t\t\treturn onSelect( files );\n\t\t}\n\t\tonFilesPreUpload( files );\n\t\tlet setMedia;\n\t\tif ( multiple ) {\n\t\t\tif ( addToGallery ) {\n\t\t\t\t// Since the setMedia function runs multiple times per upload group\n\t\t\t\t// and is passed newMedia containing every item in its group each time, we must\n\t\t\t\t// filter out whatever this upload group had previously returned to the\n\t\t\t\t// gallery before adding and returning the image array with replacement newMedia\n\t\t\t\t// values.\n\n\t\t\t\t// Define an array to store urls from newMedia between subsequent function calls.\n\t\t\t\tlet lastMediaPassed = [];\n\t\t\t\tsetMedia = ( newMedia ) => {\n\t\t\t\t\t// Remove any images this upload group is responsible for (lastMediaPassed).\n\t\t\t\t\t// Their replacements are contained in newMedia.\n\t\t\t\t\tconst filteredMedia = ( value ?? [] ).filter( ( item ) => {\n\t\t\t\t\t\t// If Item has id, only remove it if lastMediaPassed has an item with that id.\n\t\t\t\t\t\tif ( item.id ) {\n\t\t\t\t\t\t\treturn ! lastMediaPassed.some(\n\t\t\t\t\t\t\t\t// Be sure to convert to number for comparison.\n\t\t\t\t\t\t\t\t( { id } ) => Number( id ) === Number( item.id )\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// Compare transient images via .includes since gallery may append extra info onto the url.\n\t\t\t\t\t\treturn ! lastMediaPassed.some( ( { urlSlug } ) =>\n\t\t\t\t\t\t\titem.url.includes( urlSlug )\n\t\t\t\t\t\t);\n\t\t\t\t\t} );\n\t\t\t\t\t// Return the filtered media array along with newMedia.\n\t\t\t\t\tonSelect( filteredMedia.concat( newMedia ) );\n\t\t\t\t\t// Reset lastMediaPassed and set it with ids and urls from newMedia.\n\t\t\t\t\tlastMediaPassed = newMedia.map( ( media ) => {\n\t\t\t\t\t\t// Add everything up to '.fileType' to compare via .includes.\n\t\t\t\t\t\tconst cutOffIndex = media.url.lastIndexOf( '.' );\n\t\t\t\t\t\tconst urlSlug = media.url.slice( 0, cutOffIndex );\n\t\t\t\t\t\treturn { id: media.id, urlSlug };\n\t\t\t\t\t} );\n\t\t\t\t};\n\t\t\t} else {\n\t\t\t\tsetMedia = onSelect;\n\t\t\t}\n\t\t} else {\n\t\t\tsetMedia = ( [ media ] ) => onSelect( media );\n\t\t}\n\t\tmediaUpload( {\n\t\t\tallowedTypes,\n\t\t\tfilesList: files,\n\t\t\tonFileChange: setMedia,\n\t\t\tonError,\n\t\t\tmultiple,\n\t\t} );\n\t};\n\n\tasync function handleBlocksDrop( event ) {\n\t\tconst { blocks } = parseDropEvent( event );\n\n\t\tif ( ! blocks?.length ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst uploadedMediaList = await Promise.all(\n\t\t\tblocks.map( ( block ) => {\n\t\t\t\tconst blockType = block.name.split( '/' )[ 1 ];\n\t\t\t\tif ( block.attributes.id ) {\n\t\t\t\t\tblock.attributes.type = blockType;\n\t\t\t\t\treturn block.attributes;\n\t\t\t\t}\n\t\t\t\treturn new Promise( ( resolve, reject ) => {\n\t\t\t\t\twindow\n\t\t\t\t\t\t.fetch( block.attributes.url )\n\t\t\t\t\t\t.then( ( response ) => response.blob() )\n\t\t\t\t\t\t.then( ( blob ) =>\n\t\t\t\t\t\t\tmediaUpload( {\n\t\t\t\t\t\t\t\tfilesList: [ blob ],\n\t\t\t\t\t\t\t\tadditionalData: {\n\t\t\t\t\t\t\t\t\ttitle: block.attributes.title,\n\t\t\t\t\t\t\t\t\talt_text: block.attributes.alt,\n\t\t\t\t\t\t\t\t\tcaption: block.attributes.caption,\n\t\t\t\t\t\t\t\t\ttype: blockType,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tonFileChange: ( [ media ] ) => {\n\t\t\t\t\t\t\t\t\tif ( media.id ) {\n\t\t\t\t\t\t\t\t\t\tresolve( media );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tallowedTypes,\n\t\t\t\t\t\t\t\tonError: reject,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t)\n\t\t\t\t\t\t.catch( () => resolve( block.attributes.url ) );\n\t\t\t\t} );\n\t\t\t} )\n\t\t).catch( ( err ) => onError( err ) );\n\n\t\tif ( ! uploadedMediaList?.length ) {\n\t\t\treturn;\n\t\t}\n\n\t\tonSelect( multiple ? uploadedMediaList : uploadedMediaList[ 0 ] );\n\t}\n\n\tconst onUpload = ( event ) => {\n\t\tonFilesUpload( event.target.files );\n\t};\n\n\tconst defaultRenderPlaceholder = ( content ) => {\n\t\tlet { instructions, title } = labels;\n\n\t\tif ( ! mediaUpload && ! onSelectURL ) {\n\t\t\tinstructions = __(\n\t\t\t\t'To edit this block, you need permission to upload media.'\n\t\t\t);\n\t\t}\n\n\t\tif ( instructions === undefined || title === undefined ) {\n\t\t\tconst typesAllowed = allowedTypes ?? [];\n\n\t\t\tconst [ firstAllowedType ] = typesAllowed;\n\t\t\tconst isOneType = 1 === typesAllowed.length;\n\t\t\tconst isAudio = isOneType && 'audio' === firstAllowedType;\n\t\t\tconst isImage = isOneType && 'image' === firstAllowedType;\n\t\t\tconst isVideo = isOneType && 'video' === firstAllowedType;\n\n\t\t\tif ( instructions === undefined && mediaUpload ) {\n\t\t\t\tinstructions = __(\n\t\t\t\t\t'Drag and drop an image or video, upload, or choose from your library.'\n\t\t\t\t);\n\n\t\t\t\tif ( isAudio ) {\n\t\t\t\t\tinstructions = __(\n\t\t\t\t\t\t'Drag and drop an audio file, upload, or choose from your library.'\n\t\t\t\t\t);\n\t\t\t\t} else if ( isImage ) {\n\t\t\t\t\tinstructions = __(\n\t\t\t\t\t\t'Drag and drop an image, upload, or choose from your library.'\n\t\t\t\t\t);\n\t\t\t\t} else if ( isVideo ) {\n\t\t\t\t\tinstructions = __(\n\t\t\t\t\t\t'Drag and drop a video, upload, or choose from your library.'\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif ( title === undefined ) {\n\t\t\t\ttitle = __( 'Media' );\n\n\t\t\t\tif ( isAudio ) {\n\t\t\t\t\ttitle = __( 'Audio' );\n\t\t\t\t} else if ( isImage ) {\n\t\t\t\t\ttitle = __( 'Image' );\n\t\t\t\t} else if ( isVideo ) {\n\t\t\t\t\ttitle = __( 'Video' );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst placeholderClassName = clsx(\n\t\t\t'block-editor-media-placeholder',\n\t\t\tclassName,\n\t\t\t{\n\t\t\t\t'is-appender': isAppender,\n\t\t\t}\n\t\t);\n\n\t\treturn (\n\t\t\t<Placeholder\n\t\t\t\ticon={ icon }\n\t\t\t\tlabel={ title }\n\t\t\t\tinstructions={ instructions }\n\t\t\t\tclassName={ placeholderClassName }\n\t\t\t\tnotices={ notices }\n\t\t\t\tonDoubleClick={ onDoubleClick }\n\t\t\t\tpreview={ mediaPreview }\n\t\t\t\tstyle={ style }\n\t\t\t>\n\t\t\t\t{ content }\n\t\t\t\t{ children }\n\t\t\t</Placeholder>\n\t\t);\n\t};\n\tconst renderPlaceholder = placeholder ?? defaultRenderPlaceholder;\n\n\tconst renderDropZone = () => {\n\t\tif ( disableDropZone ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<DropZone\n\t\t\t\tonFilesDrop={ onFilesUpload }\n\t\t\t\tonDrop={ handleBlocksDrop }\n\t\t\t\tisEligible={ ( dataTransfer ) => {\n\t\t\t\t\tconst prefix = 'wp-block:core/';\n\t\t\t\t\tconst types = [];\n\t\t\t\t\tfor ( const type of dataTransfer.types ) {\n\t\t\t\t\t\tif ( type.startsWith( prefix ) ) {\n\t\t\t\t\t\t\ttypes.push( type.slice( prefix.length ) );\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn (\n\t\t\t\t\t\ttypes.every( ( type ) =>\n\t\t\t\t\t\t\tallowedTypes.includes( type )\n\t\t\t\t\t\t) && ( multiple ? true : types.length === 1 )\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst renderCancelLink = () => {\n\t\treturn (\n\t\t\tonCancel && (\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tclassName=\"block-editor-media-placeholder__cancel-button\"\n\t\t\t\t\ttitle={ __( 'Cancel' ) }\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\tonClick={ onCancel }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t</Button>\n\t\t\t)\n\t\t);\n\t};\n\n\tconst renderUrlSelectionUI = () => {\n\t\treturn (\n\t\t\tonSelectURL && (\n\t\t\t\t<URLSelectionUI\n\t\t\t\t\tsrc={ src }\n\t\t\t\t\tonChangeSrc={ setSrc }\n\t\t\t\t\tonSelectURL={ onSelectURL }\n\t\t\t\t/>\n\t\t\t)\n\t\t);\n\t};\n\n\tconst renderFeaturedImageToggle = () => {\n\t\treturn (\n\t\t\tonToggleFeaturedImage && (\n\t\t\t\t<div className=\"block-editor-media-placeholder__url-input-container\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tclassName=\"block-editor-media-placeholder__button\"\n\t\t\t\t\t\tonClick={ onToggleFeaturedImage }\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Use featured image' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t)\n\t\t);\n\t};\n\n\tconst renderMediaUploadChecked = () => {\n\t\tconst defaultButton = ( { open } ) => {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\topen();\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Media Library' ) }\n\t\t\t\t</Button>\n\t\t\t);\n\t\t};\n\t\tconst libraryButton = mediaLibraryButton ?? defaultButton;\n\t\tconst uploadMediaLibraryButton = (\n\t\t\t<MediaUpload\n\t\t\t\taddToGallery={ addToGallery }\n\t\t\t\tgallery={ multiple && onlyAllowsImages() }\n\t\t\t\tmultiple={ multiple }\n\t\t\t\tonSelect={ onSelect }\n\t\t\t\tallowedTypes={ allowedTypes }\n\t\t\t\tmode=\"browse\"\n\t\t\t\tvalue={\n\t\t\t\t\tArray.isArray( value )\n\t\t\t\t\t\t? value.map( ( { id } ) => id )\n\t\t\t\t\t\t: value.id\n\t\t\t\t}\n\t\t\t\trender={ libraryButton }\n\t\t\t/>\n\t\t);\n\n\t\tif ( mediaUpload && isAppender ) {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t{ renderDropZone() }\n\t\t\t\t\t<FormFileUpload\n\t\t\t\t\t\tonChange={ onUpload }\n\t\t\t\t\t\taccept={ accept }\n\t\t\t\t\t\tmultiple={ !! multiple }\n\t\t\t\t\t\trender={ ( { openFileDialog } ) => {\n\t\t\t\t\t\t\tconst content = (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t\t'block-editor-media-placeholder__button',\n\t\t\t\t\t\t\t\t\t\t\t'block-editor-media-placeholder__upload-button'\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\tonClick={ openFileDialog }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ _x( 'Upload', 'verb' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t{ uploadMediaLibraryButton }\n\t\t\t\t\t\t\t\t\t{ renderUrlSelectionUI() }\n\t\t\t\t\t\t\t\t\t{ renderFeaturedImageToggle() }\n\t\t\t\t\t\t\t\t\t{ renderCancelLink() }\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\treturn renderPlaceholder( content );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t);\n\t\t}\n\n\t\tif ( mediaUpload ) {\n\t\t\tconst content = (\n\t\t\t\t<>\n\t\t\t\t\t{ renderDropZone() }\n\t\t\t\t\t<FormFileUpload\n\t\t\t\t\t\trender={ ( { openFileDialog } ) => (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tonClick={ openFileDialog }\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t'block-editor-media-placeholder__button',\n\t\t\t\t\t\t\t\t\t'block-editor-media-placeholder__upload-button'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ _x( 'Upload', 'verb' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonChange={ onUpload }\n\t\t\t\t\t\taccept={ accept }\n\t\t\t\t\t\tmultiple={ !! multiple }\n\t\t\t\t\t/>\n\t\t\t\t\t{ uploadMediaLibraryButton }\n\t\t\t\t\t{ renderUrlSelectionUI() }\n\t\t\t\t\t{ renderFeaturedImageToggle() }\n\t\t\t\t\t{ renderCancelLink() }\n\t\t\t\t</>\n\t\t\t);\n\t\t\treturn renderPlaceholder( content );\n\t\t}\n\n\t\treturn renderPlaceholder( uploadMediaLibraryButton );\n\t};\n\n\tif ( disableMediaButtons ) {\n\t\treturn <MediaUploadCheck>{ renderDropZone() }</MediaUploadCheck>;\n\t}\n\n\treturn (\n\t\t<MediaUploadCheck\n\t\t\tfallback={ renderPlaceholder( renderUrlSelectionUI() ) }\n\t\t>\n\t\t\t{ renderMediaUploadChecked() }\n\t\t</MediaUploadCheck>\n\t);\n}\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-placeholder/README.md\n */\nexport default withFilters( 'editor.MediaPlaceholder' )( MediaPlaceholder );\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tFormFileUpload,\n\tPlaceholder,\n\tDropZone,\n\t__experimentalInputControl as InputControl,\n\t__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,\n\twithFilters,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport { useState, useEffect } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { keyboardReturn } from '@wordpress/icons';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport MediaUpload from '../media-upload';\nimport MediaUploadModal from '../media-upload-modal';\nimport MediaUploadCheck from '../media-upload/check';\nimport URLPopover from '../url-popover';\nimport { store as blockEditorStore } from '../../store';\nimport { parseDropEvent } from '../use-on-block-drop';\n\nconst noop = () => {};\n\n/**\n * Conditional Media component that uses MediaUploadModal when experiment is enabled,\n * otherwise falls back to MediaUpload.\n *\n * @param {Object} root0 Component props.\n * @param {Function} root0.render Render prop function that receives { open } object.\n * @return {JSX.Element} The component.\n */\nfunction ConditionalMediaUpload( { render, ...props } ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tconst mediaUpload = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn getSettings().mediaUpload;\n\t}, [] );\n\n\tif ( window.__experimentalDataViewsMediaModal ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ render && render( { open: () => setIsModalOpen( true ) } ) }\n\t\t\t\t<MediaUploadModal\n\t\t\t\t\t{ ...props }\n\t\t\t\t\tisOpen={ isModalOpen }\n\t\t\t\t\tonClose={ () => {\n\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t\tprops.onClose?.();\n\t\t\t\t\t} }\n\t\t\t\t\tonSelect={ ( media ) => {\n\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t\tprops.onSelect?.( media );\n\t\t\t\t\t} }\n\t\t\t\t\tonUpload={ mediaUpload }\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn <MediaUpload { ...props } render={ render } />;\n}\n\nconst InsertFromURLPopover = ( {\n\tsrc,\n\tonChange,\n\tonSubmit,\n\tonClose,\n\tpopoverAnchor,\n} ) => (\n\t<URLPopover anchor={ popoverAnchor } onClose={ onClose }>\n\t\t<form\n\t\t\tclassName=\"block-editor-media-placeholder__url-input-form\"\n\t\t\tonSubmit={ onSubmit }\n\t\t>\n\t\t\t<InputControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tlabel={ __( 'URL' ) }\n\t\t\t\ttype=\"text\" // Use text instead of URL to allow relative paths (e.g., /image/image.jpg)\n\t\t\t\thideLabelFromVision\n\t\t\t\tplaceholder={ __( 'Paste or type URL' ) }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalue={ src }\n\t\t\t\tsuffix={\n\t\t\t\t\t<InputControlSuffixWrapper variant=\"control\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\ticon={ keyboardReturn }\n\t\t\t\t\t\t\tlabel={ __( 'Apply' ) }\n\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</InputControlSuffixWrapper>\n\t\t\t\t}\n\t\t\t/>\n\t\t</form>\n\t</URLPopover>\n);\n\nconst URLSelectionUI = ( { src, onChangeSrc, onSelectURL } ) => {\n\t// Use internal state instead of a ref to make sure that the component\n\t// re-renders when the popover's anchor updates.\n\tconst [ popoverAnchor, setPopoverAnchor ] = useState( null );\n\tconst [ isURLInputVisible, setIsURLInputVisible ] = useState( false );\n\n\tconst openURLInput = () => {\n\t\tsetIsURLInputVisible( true );\n\t};\n\tconst closeURLInput = () => {\n\t\tsetIsURLInputVisible( false );\n\t\tpopoverAnchor?.focus();\n\t};\n\n\tconst onSubmitSrc = ( event ) => {\n\t\tevent.preventDefault();\n\t\tif ( src && onSelectURL ) {\n\t\t\tonSelectURL( src );\n\t\t\tcloseURLInput();\n\t\t}\n\t};\n\n\treturn (\n\t\t<div className=\"block-editor-media-placeholder__url-input-container\">\n\t\t\t<Button\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tclassName=\"block-editor-media-placeholder__button\"\n\t\t\t\tonClick={ openURLInput }\n\t\t\t\tisPressed={ isURLInputVisible }\n\t\t\t\tvariant=\"secondary\"\n\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t\tref={ setPopoverAnchor }\n\t\t\t>\n\t\t\t\t{ __( 'Insert from URL' ) }\n\t\t\t</Button>\n\t\t\t{ isURLInputVisible && (\n\t\t\t\t<InsertFromURLPopover\n\t\t\t\t\tsrc={ src }\n\t\t\t\t\tonChange={ onChangeSrc }\n\t\t\t\t\tonSubmit={ onSubmitSrc }\n\t\t\t\t\tonClose={ closeURLInput }\n\t\t\t\t\tpopoverAnchor={ popoverAnchor }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n};\n\nexport function MediaPlaceholder( {\n\tvalue = {},\n\tallowedTypes,\n\tclassName,\n\ticon,\n\tlabels = {},\n\tmediaPreview,\n\tnotices,\n\tisAppender,\n\taccept,\n\taddToGallery,\n\tmultiple = false,\n\thandleUpload = true,\n\tdisableDropZone,\n\tdisableMediaButtons,\n\tonError,\n\tonSelect,\n\tonCancel,\n\tonSelectURL,\n\tonToggleFeaturedImage,\n\tonDoubleClick,\n\tonFilesPreUpload = noop,\n\tonHTMLDrop: deprecatedOnHTMLDrop,\n\tchildren,\n\tmediaLibraryButton,\n\tplaceholder,\n\tstyle,\n} ) {\n\tif ( deprecatedOnHTMLDrop ) {\n\t\tdeprecated( 'wp.blockEditor.MediaPlaceholder onHTMLDrop prop', {\n\t\t\tsince: '6.2',\n\t\t\tversion: '6.4',\n\t\t} );\n\t}\n\n\tconst mediaUpload = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn getSettings().mediaUpload;\n\t}, [] );\n\tconst [ src, setSrc ] = useState( '' );\n\n\tuseEffect( () => {\n\t\tsetSrc( value?.src ?? '' );\n\t}, [ value?.src ] );\n\n\tconst onlyAllowsImages = () => {\n\t\tif ( ! allowedTypes || allowedTypes.length === 0 ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn allowedTypes.every(\n\t\t\t( allowedType ) =>\n\t\t\t\tallowedType === 'image' || allowedType.startsWith( 'image/' )\n\t\t);\n\t};\n\n\tconst onFilesUpload = ( files ) => {\n\t\tif (\n\t\t\t! handleUpload ||\n\t\t\t( typeof handleUpload === 'function' && ! handleUpload( files ) )\n\t\t) {\n\t\t\treturn onSelect( files );\n\t\t}\n\t\tonFilesPreUpload( files );\n\t\tlet setMedia;\n\t\tif ( multiple ) {\n\t\t\tif ( addToGallery ) {\n\t\t\t\t// Since the setMedia function runs multiple times per upload group\n\t\t\t\t// and is passed newMedia containing every item in its group each time, we must\n\t\t\t\t// filter out whatever this upload group had previously returned to the\n\t\t\t\t// gallery before adding and returning the image array with replacement newMedia\n\t\t\t\t// values.\n\n\t\t\t\t// Define an array to store urls from newMedia between subsequent function calls.\n\t\t\t\tlet lastMediaPassed = [];\n\t\t\t\tsetMedia = ( newMedia ) => {\n\t\t\t\t\t// Remove any images this upload group is responsible for (lastMediaPassed).\n\t\t\t\t\t// Their replacements are contained in newMedia.\n\t\t\t\t\tconst filteredMedia = ( value ?? [] ).filter( ( item ) => {\n\t\t\t\t\t\t// If Item has id, only remove it if lastMediaPassed has an item with that id.\n\t\t\t\t\t\tif ( item.id ) {\n\t\t\t\t\t\t\treturn ! lastMediaPassed.some(\n\t\t\t\t\t\t\t\t// Be sure to convert to number for comparison.\n\t\t\t\t\t\t\t\t( { id } ) => Number( id ) === Number( item.id )\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// Compare transient images via .includes since gallery may append extra info onto the url.\n\t\t\t\t\t\treturn ! lastMediaPassed.some( ( { urlSlug } ) =>\n\t\t\t\t\t\t\titem.url.includes( urlSlug )\n\t\t\t\t\t\t);\n\t\t\t\t\t} );\n\t\t\t\t\t// Return the filtered media array along with newMedia.\n\t\t\t\t\tonSelect( filteredMedia.concat( newMedia ) );\n\t\t\t\t\t// Reset lastMediaPassed and set it with ids and urls from newMedia.\n\t\t\t\t\tlastMediaPassed = newMedia.map( ( media ) => {\n\t\t\t\t\t\t// Add everything up to '.fileType' to compare via .includes.\n\t\t\t\t\t\tconst cutOffIndex = media.url.lastIndexOf( '.' );\n\t\t\t\t\t\tconst urlSlug = media.url.slice( 0, cutOffIndex );\n\t\t\t\t\t\treturn { id: media.id, urlSlug };\n\t\t\t\t\t} );\n\t\t\t\t};\n\t\t\t} else {\n\t\t\t\tsetMedia = onSelect;\n\t\t\t}\n\t\t} else {\n\t\t\tsetMedia = ( [ media ] ) => onSelect( media );\n\t\t}\n\t\tmediaUpload( {\n\t\t\tallowedTypes,\n\t\t\tfilesList: files,\n\t\t\tonFileChange: setMedia,\n\t\t\tonError,\n\t\t\tmultiple,\n\t\t} );\n\t};\n\n\tasync function handleBlocksDrop( event ) {\n\t\tconst { blocks } = parseDropEvent( event );\n\n\t\tif ( ! blocks?.length ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst uploadedMediaList = await Promise.all(\n\t\t\tblocks.map( ( block ) => {\n\t\t\t\tconst blockType = block.name.split( '/' )[ 1 ];\n\t\t\t\tif ( block.attributes.id ) {\n\t\t\t\t\tblock.attributes.type = blockType;\n\t\t\t\t\treturn block.attributes;\n\t\t\t\t}\n\t\t\t\treturn new Promise( ( resolve, reject ) => {\n\t\t\t\t\twindow\n\t\t\t\t\t\t.fetch( block.attributes.url )\n\t\t\t\t\t\t.then( ( response ) => response.blob() )\n\t\t\t\t\t\t.then( ( blob ) =>\n\t\t\t\t\t\t\tmediaUpload( {\n\t\t\t\t\t\t\t\tfilesList: [ blob ],\n\t\t\t\t\t\t\t\tadditionalData: {\n\t\t\t\t\t\t\t\t\ttitle: block.attributes.title,\n\t\t\t\t\t\t\t\t\talt_text: block.attributes.alt,\n\t\t\t\t\t\t\t\t\tcaption: block.attributes.caption,\n\t\t\t\t\t\t\t\t\ttype: blockType,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tonFileChange: ( [ media ] ) => {\n\t\t\t\t\t\t\t\t\tif ( media.id ) {\n\t\t\t\t\t\t\t\t\t\tresolve( media );\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tallowedTypes,\n\t\t\t\t\t\t\t\tonError: reject,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t)\n\t\t\t\t\t\t.catch( () => resolve( block.attributes.url ) );\n\t\t\t\t} );\n\t\t\t} )\n\t\t).catch( ( err ) => onError( err ) );\n\n\t\tif ( ! uploadedMediaList?.length ) {\n\t\t\treturn;\n\t\t}\n\n\t\tonSelect( multiple ? uploadedMediaList : uploadedMediaList[ 0 ] );\n\t}\n\n\tconst onUpload = ( event ) => {\n\t\tonFilesUpload( event.target.files );\n\t};\n\n\tconst defaultRenderPlaceholder = ( content ) => {\n\t\tlet { instructions, title } = labels;\n\n\t\tif ( ! mediaUpload && ! onSelectURL ) {\n\t\t\tinstructions = __(\n\t\t\t\t'To edit this block, you need permission to upload media.'\n\t\t\t);\n\t\t}\n\n\t\tif ( instructions === undefined || title === undefined ) {\n\t\t\tconst typesAllowed = allowedTypes ?? [];\n\n\t\t\tconst [ firstAllowedType ] = typesAllowed;\n\t\t\tconst isOneType = 1 === typesAllowed.length;\n\t\t\tconst isAudio = isOneType && 'audio' === firstAllowedType;\n\t\t\tconst isImage = isOneType && 'image' === firstAllowedType;\n\t\t\tconst isVideo = isOneType && 'video' === firstAllowedType;\n\n\t\t\tif ( instructions === undefined && mediaUpload ) {\n\t\t\t\tinstructions = __(\n\t\t\t\t\t'Drag and drop an image or video, upload, or choose from your library.'\n\t\t\t\t);\n\n\t\t\t\tif ( isAudio ) {\n\t\t\t\t\tinstructions = __(\n\t\t\t\t\t\t'Drag and drop an audio file, upload, or choose from your library.'\n\t\t\t\t\t);\n\t\t\t\t} else if ( isImage ) {\n\t\t\t\t\tinstructions = __(\n\t\t\t\t\t\t'Drag and drop an image, upload, or choose from your library.'\n\t\t\t\t\t);\n\t\t\t\t} else if ( isVideo ) {\n\t\t\t\t\tinstructions = __(\n\t\t\t\t\t\t'Drag and drop a video, upload, or choose from your library.'\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif ( title === undefined ) {\n\t\t\t\ttitle = __( 'Media' );\n\n\t\t\t\tif ( isAudio ) {\n\t\t\t\t\ttitle = __( 'Audio' );\n\t\t\t\t} else if ( isImage ) {\n\t\t\t\t\ttitle = __( 'Image' );\n\t\t\t\t} else if ( isVideo ) {\n\t\t\t\t\ttitle = __( 'Video' );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tconst placeholderClassName = clsx(\n\t\t\t'block-editor-media-placeholder',\n\t\t\tclassName,\n\t\t\t{\n\t\t\t\t'is-appender': isAppender,\n\t\t\t}\n\t\t);\n\n\t\treturn (\n\t\t\t<Placeholder\n\t\t\t\ticon={ icon }\n\t\t\t\tlabel={ title }\n\t\t\t\tinstructions={ instructions }\n\t\t\t\tclassName={ placeholderClassName }\n\t\t\t\tnotices={ notices }\n\t\t\t\tonDoubleClick={ onDoubleClick }\n\t\t\t\tpreview={ mediaPreview }\n\t\t\t\tstyle={ style }\n\t\t\t>\n\t\t\t\t{ content }\n\t\t\t\t{ children }\n\t\t\t</Placeholder>\n\t\t);\n\t};\n\tconst renderPlaceholder = placeholder ?? defaultRenderPlaceholder;\n\n\tconst renderDropZone = () => {\n\t\tif ( disableDropZone ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<DropZone\n\t\t\t\tonFilesDrop={ onFilesUpload }\n\t\t\t\tonDrop={ handleBlocksDrop }\n\t\t\t\tisEligible={ ( dataTransfer ) => {\n\t\t\t\t\tconst prefix = 'wp-block:core/';\n\t\t\t\t\tconst types = [];\n\t\t\t\t\tfor ( const type of dataTransfer.types ) {\n\t\t\t\t\t\tif ( type.startsWith( prefix ) ) {\n\t\t\t\t\t\t\ttypes.push( type.slice( prefix.length ) );\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn (\n\t\t\t\t\t\ttypes.every( ( type ) =>\n\t\t\t\t\t\t\tallowedTypes.includes( type )\n\t\t\t\t\t\t) && ( multiple ? true : types.length === 1 )\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst renderCancelLink = () => {\n\t\treturn (\n\t\t\tonCancel && (\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tclassName=\"block-editor-media-placeholder__cancel-button\"\n\t\t\t\t\ttitle={ __( 'Cancel' ) }\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\tonClick={ onCancel }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t</Button>\n\t\t\t)\n\t\t);\n\t};\n\n\tconst renderUrlSelectionUI = () => {\n\t\treturn (\n\t\t\tonSelectURL && (\n\t\t\t\t<URLSelectionUI\n\t\t\t\t\tsrc={ src }\n\t\t\t\t\tonChangeSrc={ setSrc }\n\t\t\t\t\tonSelectURL={ onSelectURL }\n\t\t\t\t/>\n\t\t\t)\n\t\t);\n\t};\n\n\tconst renderFeaturedImageToggle = () => {\n\t\treturn (\n\t\t\tonToggleFeaturedImage && (\n\t\t\t\t<div className=\"block-editor-media-placeholder__url-input-container\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tclassName=\"block-editor-media-placeholder__button\"\n\t\t\t\t\t\tonClick={ onToggleFeaturedImage }\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Use featured image' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t)\n\t\t);\n\t};\n\n\tconst renderMediaUploadChecked = () => {\n\t\tconst defaultButton = ( { open } ) => {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\topen();\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Media Library' ) }\n\t\t\t\t</Button>\n\t\t\t);\n\t\t};\n\t\tconst libraryButton = mediaLibraryButton ?? defaultButton;\n\t\tconst uploadMediaLibraryButton = (\n\t\t\t<ConditionalMediaUpload\n\t\t\t\taddToGallery={ addToGallery }\n\t\t\t\tgallery={ multiple && onlyAllowsImages() }\n\t\t\t\tmultiple={ multiple }\n\t\t\t\tonSelect={ onSelect }\n\t\t\t\tallowedTypes={ allowedTypes }\n\t\t\t\tmode=\"browse\"\n\t\t\t\tvalue={\n\t\t\t\t\tArray.isArray( value )\n\t\t\t\t\t\t? value.map( ( { id } ) => id )\n\t\t\t\t\t\t: value.id\n\t\t\t\t}\n\t\t\t\trender={ libraryButton }\n\t\t\t/>\n\t\t);\n\n\t\tif ( mediaUpload && isAppender ) {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t{ renderDropZone() }\n\t\t\t\t\t<FormFileUpload\n\t\t\t\t\t\tonChange={ onUpload }\n\t\t\t\t\t\taccept={ accept }\n\t\t\t\t\t\tmultiple={ !! multiple }\n\t\t\t\t\t\trender={ ( { openFileDialog } ) => {\n\t\t\t\t\t\t\tconst content = (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t\t'block-editor-media-placeholder__button',\n\t\t\t\t\t\t\t\t\t\t\t'block-editor-media-placeholder__upload-button'\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\tonClick={ openFileDialog }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ _x( 'Upload', 'verb' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t{ uploadMediaLibraryButton }\n\t\t\t\t\t\t\t\t\t{ renderUrlSelectionUI() }\n\t\t\t\t\t\t\t\t\t{ renderFeaturedImageToggle() }\n\t\t\t\t\t\t\t\t\t{ renderCancelLink() }\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\treturn renderPlaceholder( content );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t);\n\t\t}\n\n\t\tif ( mediaUpload ) {\n\t\t\tconst content = (\n\t\t\t\t<>\n\t\t\t\t\t{ renderDropZone() }\n\t\t\t\t\t<FormFileUpload\n\t\t\t\t\t\trender={ ( { openFileDialog } ) => (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tonClick={ openFileDialog }\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t'block-editor-media-placeholder__button',\n\t\t\t\t\t\t\t\t\t'block-editor-media-placeholder__upload-button'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ _x( 'Upload', 'verb' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonChange={ onUpload }\n\t\t\t\t\t\taccept={ accept }\n\t\t\t\t\t\tmultiple={ !! multiple }\n\t\t\t\t\t/>\n\t\t\t\t\t{ uploadMediaLibraryButton }\n\t\t\t\t\t{ renderUrlSelectionUI() }\n\t\t\t\t\t{ renderFeaturedImageToggle() }\n\t\t\t\t\t{ renderCancelLink() }\n\t\t\t\t</>\n\t\t\t);\n\t\t\treturn renderPlaceholder( content );\n\t\t}\n\n\t\treturn renderPlaceholder( uploadMediaLibraryButton );\n\t};\n\n\tif ( disableMediaButtons ) {\n\t\treturn <MediaUploadCheck>{ renderDropZone() }</MediaUploadCheck>;\n\t}\n\n\treturn (\n\t\t<MediaUploadCheck\n\t\t\tfallback={ renderPlaceholder( renderUrlSelectionUI() ) }\n\t\t>\n\t\t\t{ renderMediaUploadChecked() }\n\t\t</MediaUploadCheck>\n\t);\n}\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-placeholder/README.md\n */\nexport default withFilters( 'editor.MediaPlaceholder' )( MediaPlaceholder );\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -10,6 +10,7 @@ import {
|
|
|
10
10
|
ToolbarButton
|
|
11
11
|
} from "@wordpress/components";
|
|
12
12
|
import { useSelect, withDispatch } from "@wordpress/data";
|
|
13
|
+
import { useState } from "@wordpress/element";
|
|
13
14
|
import { DOWN } from "@wordpress/keycodes";
|
|
14
15
|
import {
|
|
15
16
|
postFeaturedImage,
|
|
@@ -20,12 +21,39 @@ import { compose } from "@wordpress/compose";
|
|
|
20
21
|
import { __unstableStripHTML as stripHTML } from "@wordpress/dom";
|
|
21
22
|
import { store as noticesStore } from "@wordpress/notices";
|
|
22
23
|
import MediaUpload from "../media-upload";
|
|
24
|
+
import MediaUploadModal from "../media-upload-modal";
|
|
23
25
|
import MediaUploadCheck from "../media-upload/check";
|
|
24
26
|
import LinkControl from "../link-control";
|
|
25
27
|
import { store as blockEditorStore } from "../../store";
|
|
26
28
|
const noop = () => {
|
|
27
29
|
};
|
|
28
30
|
let uniqueId = 0;
|
|
31
|
+
function ConditionalMediaUpload({ render, ...props }) {
|
|
32
|
+
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
33
|
+
const { getSettings } = useSelect(blockEditorStore);
|
|
34
|
+
if (window.__experimentalDataViewsMediaModal) {
|
|
35
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
36
|
+
render && render({ open: () => setIsModalOpen(true) }),
|
|
37
|
+
/* @__PURE__ */ jsx(
|
|
38
|
+
MediaUploadModal,
|
|
39
|
+
{
|
|
40
|
+
...props,
|
|
41
|
+
isOpen: isModalOpen,
|
|
42
|
+
onClose: () => {
|
|
43
|
+
setIsModalOpen(false);
|
|
44
|
+
props.onClose?.();
|
|
45
|
+
},
|
|
46
|
+
onSelect: (media) => {
|
|
47
|
+
setIsModalOpen(false);
|
|
48
|
+
props.onSelect?.(media);
|
|
49
|
+
},
|
|
50
|
+
onUpload: getSettings().mediaUpload
|
|
51
|
+
}
|
|
52
|
+
)
|
|
53
|
+
] });
|
|
54
|
+
}
|
|
55
|
+
return /* @__PURE__ */ jsx(MediaUpload, { ...props, render });
|
|
56
|
+
}
|
|
29
57
|
const MediaReplaceFlow = ({
|
|
30
58
|
mediaURL,
|
|
31
59
|
mediaId,
|
|
@@ -135,7 +163,7 @@ const MediaReplaceFlow = ({
|
|
|
135
163
|
/* @__PURE__ */ jsxs(NavigableMenu, { className: "block-editor-media-replace-flow__media-upload-menu", children: [
|
|
136
164
|
/* @__PURE__ */ jsxs(MediaUploadCheck, { children: [
|
|
137
165
|
/* @__PURE__ */ jsx(
|
|
138
|
-
|
|
166
|
+
ConditionalMediaUpload,
|
|
139
167
|
{
|
|
140
168
|
gallery,
|
|
141
169
|
addToGallery,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/media-replace-flow/index.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport { speak } from '@wordpress/a11y';\nimport {\n\tFormFileUpload,\n\tNavigableMenu,\n\tMenuItem,\n\tDropdown,\n\twithFilters,\n\tToolbarButton,\n} from '@wordpress/components';\nimport { useSelect, withDispatch } from '@wordpress/data';\nimport { DOWN } from '@wordpress/keycodes';\nimport {\n\tpostFeaturedImage,\n\tupload,\n\tmedia as mediaIcon,\n} from '@wordpress/icons';\nimport { compose } from '@wordpress/compose';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport MediaUpload from '../media-upload';\nimport MediaUploadCheck from '../media-upload/check';\nimport LinkControl from '../link-control';\nimport { store as blockEditorStore } from '../../store';\n\nconst noop = () => {};\nlet uniqueId = 0;\n\nconst MediaReplaceFlow = ( {\n\tmediaURL,\n\tmediaId,\n\tmediaIds,\n\tallowedTypes,\n\taccept,\n\tonError,\n\tonSelect,\n\tonSelectURL,\n\tonReset,\n\tonToggleFeaturedImage,\n\tuseFeaturedImage,\n\tonFilesUpload = noop,\n\tname = __( 'Replace' ),\n\tcreateNotice,\n\tremoveNotice,\n\tchildren,\n\tmultiple = false,\n\taddToGallery,\n\thandleUpload = true,\n\tpopoverProps,\n\trenderToggle,\n} ) => {\n\tconst { getSettings } = useSelect( blockEditorStore );\n\tconst errorNoticeID = `block-editor/media-replace-flow/error-notice/${ ++uniqueId }`;\n\n\tconst onUploadError = ( message ) => {\n\t\tconst safeMessage = stripHTML( message );\n\t\tif ( onError ) {\n\t\t\tonError( safeMessage );\n\t\t\treturn;\n\t\t}\n\t\t// We need to set a timeout for showing the notice\n\t\t// so that VoiceOver and possibly other screen readers\n\t\t// can announce the error after the toolbar button\n\t\t// regains focus once the upload dialog closes.\n\t\t// Otherwise VO simply skips over the notice and announces\n\t\t// the focused element and the open menu.\n\t\tsetTimeout( () => {\n\t\t\tcreateNotice( 'error', safeMessage, {\n\t\t\t\tspeak: true,\n\t\t\t\tid: errorNoticeID,\n\t\t\t\tisDismissible: true,\n\t\t\t} );\n\t\t}, 1000 );\n\t};\n\n\tconst selectMedia = ( media, closeMenu ) => {\n\t\tif ( useFeaturedImage && onToggleFeaturedImage ) {\n\t\t\tonToggleFeaturedImage();\n\t\t}\n\t\tcloseMenu();\n\t\t// Calling `onSelect` after the state update since it might unmount the component.\n\t\tonSelect( media );\n\t\tspeak( __( 'The media file has been replaced' ) );\n\t\tremoveNotice( errorNoticeID );\n\t};\n\n\tconst uploadFiles = ( event, closeMenu ) => {\n\t\tconst files = event.target.files;\n\t\tif ( ! handleUpload ) {\n\t\t\tcloseMenu();\n\t\t\treturn onSelect( files );\n\t\t}\n\t\tonFilesUpload( files );\n\t\tgetSettings().mediaUpload( {\n\t\t\tallowedTypes,\n\t\t\tfilesList: files,\n\t\t\tonFileChange: ( [ media ] ) => {\n\t\t\t\tselectMedia( media, closeMenu );\n\t\t\t},\n\t\t\tonError: onUploadError,\n\t\t} );\n\t};\n\n\tconst openOnArrowDown = ( event ) => {\n\t\tif ( event.keyCode === DOWN ) {\n\t\t\tevent.preventDefault();\n\t\t\tevent.target.click();\n\t\t}\n\t};\n\n\tconst onlyAllowsImages = () => {\n\t\tif ( ! allowedTypes || allowedTypes.length === 0 ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn allowedTypes.every(\n\t\t\t( allowedType ) =>\n\t\t\t\tallowedType === 'image' || allowedType.startsWith( 'image/' )\n\t\t);\n\t};\n\n\tconst gallery = multiple && onlyAllowsImages();\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tcontentClassName=\"block-editor-media-replace-flow__options\"\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\tif ( renderToggle ) {\n\t\t\t\t\treturn renderToggle( {\n\t\t\t\t\t\t'aria-expanded': isOpen,\n\t\t\t\t\t\t'aria-haspopup': 'true',\n\t\t\t\t\t\tonClick: onToggle,\n\t\t\t\t\t\tonKeyDown: openOnArrowDown,\n\t\t\t\t\t\tchildren: name,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\treturn (\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ name }\n\t\t\t\t\t</ToolbarButton>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t<>\n\t\t\t\t\t<NavigableMenu className=\"block-editor-media-replace-flow__media-upload-menu\">\n\t\t\t\t\t\t<MediaUploadCheck>\n\t\t\t\t\t\t\t<
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport { speak } from '@wordpress/a11y';\nimport {\n\tFormFileUpload,\n\tNavigableMenu,\n\tMenuItem,\n\tDropdown,\n\twithFilters,\n\tToolbarButton,\n} from '@wordpress/components';\nimport { useSelect, withDispatch } from '@wordpress/data';\nimport { useState } from '@wordpress/element';\nimport { DOWN } from '@wordpress/keycodes';\nimport {\n\tpostFeaturedImage,\n\tupload,\n\tmedia as mediaIcon,\n} from '@wordpress/icons';\nimport { compose } from '@wordpress/compose';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\nimport { store as noticesStore } from '@wordpress/notices';\n\n/**\n * Internal dependencies\n */\nimport MediaUpload from '../media-upload';\nimport MediaUploadModal from '../media-upload-modal';\nimport MediaUploadCheck from '../media-upload/check';\nimport LinkControl from '../link-control';\nimport { store as blockEditorStore } from '../../store';\n\nconst noop = () => {};\nlet uniqueId = 0;\n\n/**\n * Conditional Media component that uses MediaUploadModal when experiment is enabled,\n * otherwise falls back to MediaUpload.\n *\n * @param {Object} root0 Component props.\n * @param {Function} root0.render Render prop function that receives { open } object.\n * @return {JSX.Element} The component.\n */\nfunction ConditionalMediaUpload( { render, ...props } ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tconst { getSettings } = useSelect( blockEditorStore );\n\n\tif ( window.__experimentalDataViewsMediaModal ) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ render && render( { open: () => setIsModalOpen( true ) } ) }\n\t\t\t\t<MediaUploadModal\n\t\t\t\t\t{ ...props }\n\t\t\t\t\tisOpen={ isModalOpen }\n\t\t\t\t\tonClose={ () => {\n\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t\tprops.onClose?.();\n\t\t\t\t\t} }\n\t\t\t\t\tonSelect={ ( media ) => {\n\t\t\t\t\t\tsetIsModalOpen( false );\n\t\t\t\t\t\tprops.onSelect?.( media );\n\t\t\t\t\t} }\n\t\t\t\t\tonUpload={ getSettings().mediaUpload }\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn <MediaUpload { ...props } render={ render } />;\n}\n\nconst MediaReplaceFlow = ( {\n\tmediaURL,\n\tmediaId,\n\tmediaIds,\n\tallowedTypes,\n\taccept,\n\tonError,\n\tonSelect,\n\tonSelectURL,\n\tonReset,\n\tonToggleFeaturedImage,\n\tuseFeaturedImage,\n\tonFilesUpload = noop,\n\tname = __( 'Replace' ),\n\tcreateNotice,\n\tremoveNotice,\n\tchildren,\n\tmultiple = false,\n\taddToGallery,\n\thandleUpload = true,\n\tpopoverProps,\n\trenderToggle,\n} ) => {\n\tconst { getSettings } = useSelect( blockEditorStore );\n\tconst errorNoticeID = `block-editor/media-replace-flow/error-notice/${ ++uniqueId }`;\n\n\tconst onUploadError = ( message ) => {\n\t\tconst safeMessage = stripHTML( message );\n\t\tif ( onError ) {\n\t\t\tonError( safeMessage );\n\t\t\treturn;\n\t\t}\n\t\t// We need to set a timeout for showing the notice\n\t\t// so that VoiceOver and possibly other screen readers\n\t\t// can announce the error after the toolbar button\n\t\t// regains focus once the upload dialog closes.\n\t\t// Otherwise VO simply skips over the notice and announces\n\t\t// the focused element and the open menu.\n\t\tsetTimeout( () => {\n\t\t\tcreateNotice( 'error', safeMessage, {\n\t\t\t\tspeak: true,\n\t\t\t\tid: errorNoticeID,\n\t\t\t\tisDismissible: true,\n\t\t\t} );\n\t\t}, 1000 );\n\t};\n\n\tconst selectMedia = ( media, closeMenu ) => {\n\t\tif ( useFeaturedImage && onToggleFeaturedImage ) {\n\t\t\tonToggleFeaturedImage();\n\t\t}\n\t\tcloseMenu();\n\t\t// Calling `onSelect` after the state update since it might unmount the component.\n\t\tonSelect( media );\n\t\tspeak( __( 'The media file has been replaced' ) );\n\t\tremoveNotice( errorNoticeID );\n\t};\n\n\tconst uploadFiles = ( event, closeMenu ) => {\n\t\tconst files = event.target.files;\n\t\tif ( ! handleUpload ) {\n\t\t\tcloseMenu();\n\t\t\treturn onSelect( files );\n\t\t}\n\t\tonFilesUpload( files );\n\t\tgetSettings().mediaUpload( {\n\t\t\tallowedTypes,\n\t\t\tfilesList: files,\n\t\t\tonFileChange: ( [ media ] ) => {\n\t\t\t\tselectMedia( media, closeMenu );\n\t\t\t},\n\t\t\tonError: onUploadError,\n\t\t} );\n\t};\n\n\tconst openOnArrowDown = ( event ) => {\n\t\tif ( event.keyCode === DOWN ) {\n\t\t\tevent.preventDefault();\n\t\t\tevent.target.click();\n\t\t}\n\t};\n\n\tconst onlyAllowsImages = () => {\n\t\tif ( ! allowedTypes || allowedTypes.length === 0 ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn allowedTypes.every(\n\t\t\t( allowedType ) =>\n\t\t\t\tallowedType === 'image' || allowedType.startsWith( 'image/' )\n\t\t);\n\t};\n\n\tconst gallery = multiple && onlyAllowsImages();\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tcontentClassName=\"block-editor-media-replace-flow__options\"\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\tif ( renderToggle ) {\n\t\t\t\t\treturn renderToggle( {\n\t\t\t\t\t\t'aria-expanded': isOpen,\n\t\t\t\t\t\t'aria-haspopup': 'true',\n\t\t\t\t\t\tonClick: onToggle,\n\t\t\t\t\t\tonKeyDown: openOnArrowDown,\n\t\t\t\t\t\tchildren: name,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\treturn (\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ name }\n\t\t\t\t\t</ToolbarButton>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t<>\n\t\t\t\t\t<NavigableMenu className=\"block-editor-media-replace-flow__media-upload-menu\">\n\t\t\t\t\t\t<MediaUploadCheck>\n\t\t\t\t\t\t\t<ConditionalMediaUpload\n\t\t\t\t\t\t\t\tgallery={ gallery }\n\t\t\t\t\t\t\t\taddToGallery={ addToGallery }\n\t\t\t\t\t\t\t\tmultiple={ multiple }\n\t\t\t\t\t\t\t\tvalue={ multiple ? mediaIds : mediaId }\n\t\t\t\t\t\t\t\tonSelect={ ( media ) =>\n\t\t\t\t\t\t\t\t\tselectMedia( media, onClose )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tallowedTypes={ allowedTypes }\n\t\t\t\t\t\t\t\trender={ ( { open } ) => (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\ticon={ mediaIcon }\n\t\t\t\t\t\t\t\t\t\tonClick={ open }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Open Media Library' ) }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<FormFileUpload\n\t\t\t\t\t\t\t\tonChange={ ( event ) => {\n\t\t\t\t\t\t\t\t\tuploadFiles( event, onClose );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\taccept={ accept }\n\t\t\t\t\t\t\t\tmultiple={ !! multiple }\n\t\t\t\t\t\t\t\trender={ ( { openFileDialog } ) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\t\ticon={ upload }\n\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\topenFileDialog();\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ _x( 'Upload', 'verb' ) }\n\t\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</MediaUploadCheck>\n\t\t\t\t\t\t{ onToggleFeaturedImage && (\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\ticon={ postFeaturedImage }\n\t\t\t\t\t\t\t\tonClick={ onToggleFeaturedImage }\n\t\t\t\t\t\t\t\tisPressed={ useFeaturedImage }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Use featured image' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ mediaURL && onReset && (\n\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tonReset();\n\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ typeof children === 'function'\n\t\t\t\t\t\t\t? children( { onClose } )\n\t\t\t\t\t\t\t: children }\n\t\t\t\t\t</NavigableMenu>\n\t\t\t\t\t{ onSelectURL && (\n\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n\t\t\t\t\t\t<form className=\"block-editor-media-flow__url-input\">\n\t\t\t\t\t\t\t<span className=\"block-editor-media-replace-flow__image-url-label\">\n\t\t\t\t\t\t\t\t{ __( 'Current media URL:' ) }\n\t\t\t\t\t\t\t</span>\n\n\t\t\t\t\t\t\t<LinkControl\n\t\t\t\t\t\t\t\tvalue={ { url: mediaURL } }\n\t\t\t\t\t\t\t\tsettings={ [] }\n\t\t\t\t\t\t\t\tshowSuggestions={ false }\n\t\t\t\t\t\t\t\tonChange={ ( { url } ) => {\n\t\t\t\t\t\t\t\t\tonSelectURL( url );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tsearchInputPlaceholder={ __(\n\t\t\t\t\t\t\t\t\t'Paste or type URL'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</form>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t/>\n\t);\n};\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-replace-flow/README.md\n */\nexport default compose( [\n\twithDispatch( ( dispatch ) => {\n\t\tconst { createNotice, removeNotice } = dispatch( noticesStore );\n\t\treturn {\n\t\t\tcreateNotice,\n\t\t\tremoveNotice,\n\t\t};\n\t} ),\n\twithFilters( 'editor.MediaReplaceFlow' ),\n] )( MediaReplaceFlow );\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { withFilters } from "@wordpress/components";
|
|
2
|
+
const MediaUploadModal = () => null;
|
|
3
|
+
var media_upload_modal_default = withFilters("editor.MediaUploadModal")(MediaUploadModal);
|
|
4
|
+
export {
|
|
5
|
+
media_upload_modal_default as default
|
|
6
|
+
};
|
|
7
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/media-upload-modal/index.js"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { withFilters } from '@wordpress/components';\n\n/**\n * This is a placeholder for the media upload modal component necessary to make it possible to provide\n * an integration with the core blocks that handle media files. By default it renders nothing but\n * it provides a way to have it overridden with the `editor.MediaUploadModal` filter.\n *\n * @return {Component} The component to be rendered.\n */\nconst MediaUploadModal = () => null;\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-upload-modal/README.md\n */\nexport default withFilters( 'editor.MediaUploadModal' )( MediaUploadModal );\n"],
|
|
5
|
+
"mappings": "AAGA,SAAS,mBAAmB;AAS5B,MAAM,mBAAmB,MAAM;AAK/B,IAAO,6BAAQ,YAAa,yBAA0B,EAAG,gBAAiB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,17 +1,12 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { addFilter } from "@wordpress/hooks";
|
|
3
3
|
import { hasBlockSupport } from "@wordpress/blocks";
|
|
4
|
-
import { useSelect } from "@wordpress/data";
|
|
5
|
-
import { store as blockEditorStore } from "../store";
|
|
6
4
|
import { PrivateInspectorControlsAllowedBlocks } from "../components/inspector-controls/groups";
|
|
7
5
|
import BlockAllowedBlocksControl from "../components/block-allowed-blocks/allowed-blocks-control";
|
|
6
|
+
import { useBlockEditingMode } from "../components/block-editing-mode";
|
|
8
7
|
function BlockEditAllowedBlocksControlPure({ clientId }) {
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
return select(blockEditorStore).getBlockEditingMode(clientId) === "contentOnly";
|
|
12
|
-
},
|
|
13
|
-
[clientId]
|
|
14
|
-
);
|
|
8
|
+
const blockEditingMode = useBlockEditingMode();
|
|
9
|
+
const isContentOnly = blockEditingMode === "contentOnly";
|
|
15
10
|
if (isContentOnly) {
|
|
16
11
|
return null;
|
|
17
12
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/hooks/allowed-blocks.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { hasBlockSupport } from '@wordpress/blocks';\
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { hasBlockSupport } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { PrivateInspectorControlsAllowedBlocks } from '../components/inspector-controls/groups';\nimport BlockAllowedBlocksControl from '../components/block-allowed-blocks/allowed-blocks-control';\nimport { useBlockEditingMode } from '../components/block-editing-mode';\n\nfunction BlockEditAllowedBlocksControlPure( { clientId } ) {\n\tconst blockEditingMode = useBlockEditingMode();\n\tconst isContentOnly = blockEditingMode === 'contentOnly';\n\n\tif ( isContentOnly ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<PrivateInspectorControlsAllowedBlocks.Fill>\n\t\t\t<BlockAllowedBlocksControl clientId={ clientId } />\n\t\t</PrivateInspectorControlsAllowedBlocks.Fill>\n\t);\n}\n\nexport default {\n\tedit: BlockEditAllowedBlocksControlPure,\n\tattributeKeys: [ 'allowedBlocks' ],\n\thasSupport( name ) {\n\t\treturn hasBlockSupport( name, 'allowedBlocks' );\n\t},\n};\n\n/**\n * Filters registered block settings, extending attributes with allowedBlocks.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nexport function addAttribute( settings ) {\n\t// Allow blocks to specify their own attribute definition with default values if needed.\n\tif ( settings?.attributes?.allowedBlocks?.type ) {\n\t\treturn settings;\n\t}\n\tif ( hasBlockSupport( settings, 'allowedBlocks' ) ) {\n\t\t// Gracefully handle if settings.attributes is undefined.\n\t\tsettings.attributes = {\n\t\t\t...settings.attributes,\n\t\t\tallowedBlocks: {\n\t\t\t\ttype: 'array',\n\t\t\t},\n\t\t};\n\t}\n\n\treturn settings;\n}\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/allowedBlocks/attribute',\n\taddAttribute\n);\n"],
|
|
5
|
+
"mappings": "AAuBG;AApBH,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAKhC,SAAS,6CAA6C;AACtD,OAAO,+BAA+B;AACtC,SAAS,2BAA2B;AAEpC,SAAS,kCAAmC,EAAE,SAAS,GAAI;AAC1D,QAAM,mBAAmB,oBAAoB;AAC7C,QAAM,gBAAgB,qBAAqB;AAE3C,MAAK,eAAgB;AACpB,WAAO;AAAA,EACR;AAEA,SACC,oBAAC,sCAAsC,MAAtC,EACA,8BAAC,6BAA0B,UAAsB,GAClD;AAEF;AAEA,IAAO,yBAAQ;AAAA,EACd,MAAM;AAAA,EACN,eAAe,CAAE,eAAgB;AAAA,EACjC,WAAY,MAAO;AAClB,WAAO,gBAAiB,MAAM,eAAgB;AAAA,EAC/C;AACD;AASO,SAAS,aAAc,UAAW;AAExC,MAAK,UAAU,YAAY,eAAe,MAAO;AAChD,WAAO;AAAA,EACR;AACA,MAAK,gBAAiB,UAAU,eAAgB,GAAI;AAEnD,aAAS,aAAa;AAAA,MACrB,GAAG,SAAS;AAAA,MACZ,eAAe;AAAA,QACd,MAAM;AAAA,MACP;AAAA,IACD;AAAA,EACD;AAEA,SAAO;AACR;AAEA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
import { Fragment, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { getBlockTypes, store as blocksStore } from "@wordpress/blocks";
|
|
3
3
|
import { useSelect } from "@wordpress/data";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
GlobalStylesContext,
|
|
7
|
-
toStyles,
|
|
8
|
-
getBlockSelectors
|
|
9
|
-
} from "../components/global-styles";
|
|
4
|
+
import { useMemo } from "@wordpress/element";
|
|
5
|
+
import { toStyles, getBlockSelectors } from "@wordpress/global-styles-engine";
|
|
10
6
|
import { usePrivateStyleOverride } from "./utils";
|
|
11
7
|
import { getValueFromObjectPath } from "../utils/object";
|
|
12
8
|
import { store as blockEditorStore } from "../store";
|
|
@@ -83,7 +79,6 @@ function __unstableBlockStyleVariationOverridesWithConfig({ config }) {
|
|
|
83
79
|
};
|
|
84
80
|
const blockSelectors = getBlockSelectors(
|
|
85
81
|
getBlockTypes(),
|
|
86
|
-
getBlockStyles,
|
|
87
82
|
override.clientId
|
|
88
83
|
);
|
|
89
84
|
const hasBlockGapSupport = false;
|
|
@@ -168,7 +163,6 @@ function getVariationStylesWithRefValues(globalStyles, name, variation) {
|
|
|
168
163
|
return styles;
|
|
169
164
|
}
|
|
170
165
|
function useBlockStyleVariation(name, variation, clientId) {
|
|
171
|
-
const { merged: mergedConfig } = useContext(GlobalStylesContext);
|
|
172
166
|
const { globalSettings, globalStyles } = useSelect((select) => {
|
|
173
167
|
const settings = select(blockEditorStore).getSettings();
|
|
174
168
|
return {
|
|
@@ -179,14 +173,14 @@ function useBlockStyleVariation(name, variation, clientId) {
|
|
|
179
173
|
return useMemo(() => {
|
|
180
174
|
const variationStyles = getVariationStylesWithRefValues(
|
|
181
175
|
{
|
|
182
|
-
settings:
|
|
183
|
-
styles:
|
|
176
|
+
settings: globalSettings,
|
|
177
|
+
styles: globalStyles
|
|
184
178
|
},
|
|
185
179
|
name,
|
|
186
180
|
variation
|
|
187
181
|
);
|
|
188
182
|
return {
|
|
189
|
-
settings:
|
|
183
|
+
settings: globalSettings,
|
|
190
184
|
// The variation style data is all that is needed to generate
|
|
191
185
|
// the styles for the current application to a block. The variation
|
|
192
186
|
// name is updated to match the instance specific class name.
|
|
@@ -200,14 +194,7 @@ function useBlockStyleVariation(name, variation, clientId) {
|
|
|
200
194
|
}
|
|
201
195
|
}
|
|
202
196
|
};
|
|
203
|
-
}, [
|
|
204
|
-
mergedConfig,
|
|
205
|
-
globalSettings,
|
|
206
|
-
globalStyles,
|
|
207
|
-
variation,
|
|
208
|
-
clientId,
|
|
209
|
-
name
|
|
210
|
-
]);
|
|
197
|
+
}, [globalSettings, globalStyles, variation, clientId, name]);
|
|
211
198
|
}
|
|
212
199
|
function useBlockProps({ name, className, clientId }) {
|
|
213
200
|
const { getBlockStyles } = useSelect(blocksStore);
|
|
@@ -224,11 +211,7 @@ function useBlockProps({ name, className, clientId }) {
|
|
|
224
211
|
return;
|
|
225
212
|
}
|
|
226
213
|
const variationConfig = { settings, styles };
|
|
227
|
-
const blockSelectors = getBlockSelectors(
|
|
228
|
-
getBlockTypes(),
|
|
229
|
-
getBlockStyles,
|
|
230
|
-
clientId
|
|
231
|
-
);
|
|
214
|
+
const blockSelectors = getBlockSelectors(getBlockTypes(), clientId);
|
|
232
215
|
const hasBlockGapSupport = false;
|
|
233
216
|
const hasFallbackGapSupport = true;
|
|
234
217
|
const disableLayoutStyles = true;
|
|
@@ -250,7 +233,7 @@ function useBlockProps({ name, className, clientId }) {
|
|
|
250
233
|
variationStyles: true
|
|
251
234
|
}
|
|
252
235
|
);
|
|
253
|
-
}, [variation, settings, styles,
|
|
236
|
+
}, [variation, settings, styles, clientId]);
|
|
254
237
|
usePrivateStyleOverride({
|
|
255
238
|
id: `variation-${clientId}`,
|
|
256
239
|
css: variationStyles,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/hooks/block-style-variation.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { getBlockTypes, store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { useContext, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tGlobalStylesContext,\n\ttoStyles,\n\tgetBlockSelectors,\n} from '../components/global-styles';\nimport { usePrivateStyleOverride } from './utils';\nimport { getValueFromObjectPath } from '../utils/object';\nimport { store as blockEditorStore } from '../store';\nimport { globalStylesDataKey } from '../store/private-keys';\nimport { unlock } from '../lock-unlock';\n\nconst VARIATION_PREFIX = 'is-style-';\n\nfunction getVariationMatches( className ) {\n\tif ( ! className ) {\n\t\treturn [];\n\t}\n\treturn className.split( /\\s+/ ).reduce( ( matches, name ) => {\n\t\tif ( name.startsWith( VARIATION_PREFIX ) ) {\n\t\t\tconst match = name.slice( VARIATION_PREFIX.length );\n\t\t\tif ( match !== 'default' ) {\n\t\t\t\tmatches.push( match );\n\t\t\t}\n\t\t}\n\t\treturn matches;\n\t}, [] );\n}\n\n/**\n * Get the first block style variation that has been registered from the class string.\n *\n * @param {string} className CSS class string for a block.\n * @param {Array} registeredStyles Currently registered block styles.\n *\n * @return {string|null} The name of the first registered variation.\n */\nfunction getVariationNameFromClass( className, registeredStyles = [] ) {\n\t// The global flag affects how capturing groups work in JS. So the regex\n\t// below will only return full CSS classes not just the variation name.\n\tconst matches = getVariationMatches( className );\n\n\tif ( ! matches ) {\n\t\treturn null;\n\t}\n\n\tfor ( const variation of matches ) {\n\t\tif ( registeredStyles.some( ( style ) => style.name === variation ) ) {\n\t\t\treturn variation;\n\t\t}\n\t}\n\treturn null;\n}\n\n// A helper component to apply a style override using the useStyleOverride hook.\nfunction OverrideStyles( { override } ) {\n\tusePrivateStyleOverride( override );\n}\n\n/**\n * This component is used to generate new block style variation overrides\n * based on an incoming theme config. If a matching style is found in the config,\n * a new override is created and returned. The overrides can be used in conjunction with\n * useStyleOverride to apply the new styles to the editor. Its use is\n * subject to change.\n *\n * @param {Object} props Props.\n * @param {Object} props.config A global styles object, containing settings and styles.\n * @return {JSX.Element|undefined} An array of new block variation overrides.\n */\nexport function __unstableBlockStyleVariationOverridesWithConfig( { config } ) {\n\tconst { getBlockStyles, overrides } = useSelect(\n\t\t( select ) => ( {\n\t\t\tgetBlockStyles: select( blocksStore ).getBlockStyles,\n\t\t\toverrides: unlock( select( blockEditorStore ) ).getStyleOverrides(),\n\t\t} ),\n\t\t[]\n\t);\n\tconst { getBlockName } = useSelect( blockEditorStore );\n\n\tconst overridesWithConfig = useMemo( () => {\n\t\tif ( ! overrides?.length ) {\n\t\t\treturn;\n\t\t}\n\t\tconst newOverrides = [];\n\t\tconst overriddenClientIds = [];\n\t\tfor ( const [ , override ] of overrides ) {\n\t\t\tif (\n\t\t\t\toverride?.variation &&\n\t\t\t\toverride?.clientId &&\n\t\t\t\t/*\n\t\t\t\t * Because this component overwrites existing style overrides,\n\t\t\t\t * filter out any overrides that are already present in the store.\n\t\t\t\t */\n\t\t\t\t! overriddenClientIds.includes( override.clientId )\n\t\t\t) {\n\t\t\t\tconst blockName = getBlockName( override.clientId );\n\t\t\t\tconst configStyles =\n\t\t\t\t\tconfig?.styles?.blocks?.[ blockName ]?.variations?.[\n\t\t\t\t\t\toverride.variation\n\t\t\t\t\t];\n\t\t\t\tif ( configStyles ) {\n\t\t\t\t\tconst variationConfig = {\n\t\t\t\t\t\tsettings: config?.settings,\n\t\t\t\t\t\t// The variation style data is all that is needed to generate\n\t\t\t\t\t\t// the styles for the current application to a block. The variation\n\t\t\t\t\t\t// name is updated to match the instance specific class name.\n\t\t\t\t\t\tstyles: {\n\t\t\t\t\t\t\tblocks: {\n\t\t\t\t\t\t\t\t[ blockName ]: {\n\t\t\t\t\t\t\t\t\tvariations: {\n\t\t\t\t\t\t\t\t\t\t[ `${ override.variation }-${ override.clientId }` ]:\n\t\t\t\t\t\t\t\t\t\t\tconfigStyles,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t};\n\t\t\t\t\tconst blockSelectors = getBlockSelectors(\n\t\t\t\t\t\tgetBlockTypes(),\n\t\t\t\t\t\tgetBlockStyles,\n\t\t\t\t\t\toverride.clientId\n\t\t\t\t\t);\n\t\t\t\t\tconst hasBlockGapSupport = false;\n\t\t\t\t\tconst hasFallbackGapSupport = true;\n\t\t\t\t\tconst disableLayoutStyles = true;\n\t\t\t\t\tconst disableRootPadding = true;\n\t\t\t\t\tconst variationStyles = toStyles(\n\t\t\t\t\t\tvariationConfig,\n\t\t\t\t\t\tblockSelectors,\n\t\t\t\t\t\thasBlockGapSupport,\n\t\t\t\t\t\thasFallbackGapSupport,\n\t\t\t\t\t\tdisableLayoutStyles,\n\t\t\t\t\t\tdisableRootPadding,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tblockGap: false,\n\t\t\t\t\t\t\tblockStyles: true,\n\t\t\t\t\t\t\tlayoutStyles: false,\n\t\t\t\t\t\t\tmarginReset: false,\n\t\t\t\t\t\t\tpresets: false,\n\t\t\t\t\t\t\trootPadding: false,\n\t\t\t\t\t\t\tvariationStyles: true,\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t\tnewOverrides.push( {\n\t\t\t\t\t\tid: `${ override.variation }-${ override.clientId }`,\n\t\t\t\t\t\tcss: variationStyles,\n\t\t\t\t\t\t__unstableType: 'variation',\n\t\t\t\t\t\tvariation: override.variation,\n\t\t\t\t\t\t// The clientId will be stored with the override and used to ensure\n\t\t\t\t\t\t// the order of overrides matches the order of blocks so that the\n\t\t\t\t\t\t// correct CSS cascade is maintained.\n\t\t\t\t\t\tclientId: override.clientId,\n\t\t\t\t\t} );\n\t\t\t\t\toverriddenClientIds.push( override.clientId );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn newOverrides;\n\t}, [ config, overrides, getBlockStyles, getBlockName ] );\n\n\tif ( ! overridesWithConfig || ! overridesWithConfig.length ) {\n\t\treturn;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ overridesWithConfig.map( ( override ) => (\n\t\t\t\t<OverrideStyles key={ override.id } override={ override } />\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n\n/**\n * Retrieves any variation styles data and resolves any referenced values.\n *\n * @param {Object} globalStyles A complete global styles object, containing settings and styles.\n * @param {string} name The name of the desired block type.\n * @param {variation} variation The of the block style variation to retrieve data for.\n *\n * @return {Object|undefined} The global styles data for the specified variation.\n */\nexport function getVariationStylesWithRefValues(\n\tglobalStyles,\n\tname,\n\tvariation\n) {\n\tif ( ! globalStyles?.styles?.blocks?.[ name ]?.variations?.[ variation ] ) {\n\t\treturn;\n\t}\n\n\t// Helper to recursively look for `ref` values to resolve.\n\tconst replaceRefs = ( variationStyles ) => {\n\t\tObject.keys( variationStyles ).forEach( ( key ) => {\n\t\t\tconst value = variationStyles[ key ];\n\n\t\t\t// Only process objects.\n\t\t\tif ( typeof value === 'object' && value !== null ) {\n\t\t\t\t// Process `ref` value if present.\n\t\t\t\tif ( value.ref !== undefined ) {\n\t\t\t\t\tif (\n\t\t\t\t\t\ttypeof value.ref !== 'string' ||\n\t\t\t\t\t\tvalue.ref.trim() === ''\n\t\t\t\t\t) {\n\t\t\t\t\t\t// Remove invalid ref.\n\t\t\t\t\t\tdelete variationStyles[ key ];\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Resolve `ref` value.\n\t\t\t\t\t\tconst refValue = getValueFromObjectPath(\n\t\t\t\t\t\t\tglobalStyles,\n\t\t\t\t\t\t\tvalue.ref\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tif ( refValue ) {\n\t\t\t\t\t\t\tvariationStyles[ key ] = refValue;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tdelete variationStyles[ key ];\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// Recursively resolve `ref` values in nested objects.\n\t\t\t\t\treplaceRefs( value );\n\n\t\t\t\t\t// After recursion, if value is empty due to explicitly\n\t\t\t\t\t// `undefined` ref value, remove it.\n\t\t\t\t\tif ( Object.keys( value ).length === 0 ) {\n\t\t\t\t\t\tdelete variationStyles[ key ];\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t};\n\n\t// Deep clone variation node to avoid mutating it within global styles and losing refs.\n\tconst styles = JSON.parse(\n\t\tJSON.stringify(\n\t\t\tglobalStyles.styles.blocks[ name ].variations[ variation ]\n\t\t)\n\t);\n\treplaceRefs( styles );\n\n\treturn styles;\n}\n\nfunction useBlockStyleVariation( name, variation, clientId ) {\n\t// Prefer global styles data in GlobalStylesContext, which are available\n\t// if in the site editor. Otherwise fall back to whatever is in the\n\t// editor settings and available in the post editor.\n\tconst { merged: mergedConfig } = useContext( GlobalStylesContext );\n\tconst { globalSettings, globalStyles } = useSelect( ( select ) => {\n\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\treturn {\n\t\t\tglobalSettings: settings.__experimentalFeatures,\n\t\t\tglobalStyles: settings[ globalStylesDataKey ],\n\t\t};\n\t}, [] );\n\n\treturn useMemo( () => {\n\t\tconst variationStyles = getVariationStylesWithRefValues(\n\t\t\t{\n\t\t\t\tsettings: mergedConfig?.settings ?? globalSettings,\n\t\t\t\tstyles: mergedConfig?.styles ?? globalStyles,\n\t\t\t},\n\t\t\tname,\n\t\t\tvariation\n\t\t);\n\n\t\treturn {\n\t\t\tsettings: mergedConfig?.settings ?? globalSettings,\n\t\t\t// The variation style data is all that is needed to generate\n\t\t\t// the styles for the current application to a block. The variation\n\t\t\t// name is updated to match the instance specific class name.\n\t\t\tstyles: {\n\t\t\t\tblocks: {\n\t\t\t\t\t[ name ]: {\n\t\t\t\t\t\tvariations: {\n\t\t\t\t\t\t\t[ `${ variation }-${ clientId }` ]: variationStyles,\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}, [\n\t\tmergedConfig,\n\t\tglobalSettings,\n\t\tglobalStyles,\n\t\tvariation,\n\t\tclientId,\n\t\tname,\n\t] );\n}\n\n// Rather than leveraging `useInstanceId` here, the `clientId` is used.\n// This is so that the variation style override's ID is predictable\n// when the order of applied style variations changes.\nfunction useBlockProps( { name, className, clientId } ) {\n\tconst { getBlockStyles } = useSelect( blocksStore );\n\n\tconst registeredStyles = getBlockStyles( name );\n\tconst variation = getVariationNameFromClass( className, registeredStyles );\n\tconst variationClass = `${ VARIATION_PREFIX }${ variation }-${ clientId }`;\n\n\tconst { settings, styles } = useBlockStyleVariation(\n\t\tname,\n\t\tvariation,\n\t\tclientId\n\t);\n\n\tconst variationStyles = useMemo( () => {\n\t\tif ( ! variation ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst variationConfig = { settings, styles };\n\t\tconst blockSelectors = getBlockSelectors(\n\t\t\tgetBlockTypes(),\n\t\t\tgetBlockStyles,\n\t\t\tclientId\n\t\t);\n\t\tconst hasBlockGapSupport = false;\n\t\tconst hasFallbackGapSupport = true;\n\t\tconst disableLayoutStyles = true;\n\t\tconst disableRootPadding = true;\n\n\t\treturn toStyles(\n\t\t\tvariationConfig,\n\t\t\tblockSelectors,\n\t\t\thasBlockGapSupport,\n\t\t\thasFallbackGapSupport,\n\t\t\tdisableLayoutStyles,\n\t\t\tdisableRootPadding,\n\t\t\t{\n\t\t\t\tblockGap: false,\n\t\t\t\tblockStyles: true,\n\t\t\t\tlayoutStyles: false,\n\t\t\t\tmarginReset: false,\n\t\t\t\tpresets: false,\n\t\t\t\trootPadding: false,\n\t\t\t\tvariationStyles: true,\n\t\t\t}\n\t\t);\n\t}, [ variation, settings, styles, getBlockStyles, clientId ] );\n\n\tusePrivateStyleOverride( {\n\t\tid: `variation-${ clientId }`,\n\t\tcss: variationStyles,\n\t\t__unstableType: 'variation',\n\t\tvariation,\n\t\t// The clientId will be stored with the override and used to ensure\n\t\t// the order of overrides matches the order of blocks so that the\n\t\t// correct CSS cascade is maintained.\n\t\tclientId,\n\t} );\n\n\treturn variation ? { className: variationClass } : {};\n}\n\nexport default {\n\thasSupport: () => true,\n\tattributeKeys: [ 'className' ],\n\tisMatch: ( { className } ) => getVariationMatches( className ).length > 0,\n\tuseBlockProps,\n};\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { getBlockTypes, store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\nimport { toStyles, getBlockSelectors } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { usePrivateStyleOverride } from './utils';\nimport { getValueFromObjectPath } from '../utils/object';\nimport { store as blockEditorStore } from '../store';\nimport { globalStylesDataKey } from '../store/private-keys';\nimport { unlock } from '../lock-unlock';\n\nconst VARIATION_PREFIX = 'is-style-';\n\nfunction getVariationMatches( className ) {\n\tif ( ! className ) {\n\t\treturn [];\n\t}\n\treturn className.split( /\\s+/ ).reduce( ( matches, name ) => {\n\t\tif ( name.startsWith( VARIATION_PREFIX ) ) {\n\t\t\tconst match = name.slice( VARIATION_PREFIX.length );\n\t\t\tif ( match !== 'default' ) {\n\t\t\t\tmatches.push( match );\n\t\t\t}\n\t\t}\n\t\treturn matches;\n\t}, [] );\n}\n\n/**\n * Get the first block style variation that has been registered from the class string.\n *\n * @param {string} className CSS class string for a block.\n * @param {Array} registeredStyles Currently registered block styles.\n *\n * @return {string|null} The name of the first registered variation.\n */\nfunction getVariationNameFromClass( className, registeredStyles = [] ) {\n\t// The global flag affects how capturing groups work in JS. So the regex\n\t// below will only return full CSS classes not just the variation name.\n\tconst matches = getVariationMatches( className );\n\n\tif ( ! matches ) {\n\t\treturn null;\n\t}\n\n\tfor ( const variation of matches ) {\n\t\tif ( registeredStyles.some( ( style ) => style.name === variation ) ) {\n\t\t\treturn variation;\n\t\t}\n\t}\n\treturn null;\n}\n\n// A helper component to apply a style override using the useStyleOverride hook.\nfunction OverrideStyles( { override } ) {\n\tusePrivateStyleOverride( override );\n}\n\n/**\n * This component is used to generate new block style variation overrides\n * based on an incoming theme config. If a matching style is found in the config,\n * a new override is created and returned. The overrides can be used in conjunction with\n * useStyleOverride to apply the new styles to the editor. Its use is\n * subject to change.\n *\n * @param {Object} props Props.\n * @param {Object} props.config A global styles object, containing settings and styles.\n * @return {JSX.Element|undefined} An array of new block variation overrides.\n */\nexport function __unstableBlockStyleVariationOverridesWithConfig( { config } ) {\n\tconst { getBlockStyles, overrides } = useSelect(\n\t\t( select ) => ( {\n\t\t\tgetBlockStyles: select( blocksStore ).getBlockStyles,\n\t\t\toverrides: unlock( select( blockEditorStore ) ).getStyleOverrides(),\n\t\t} ),\n\t\t[]\n\t);\n\tconst { getBlockName } = useSelect( blockEditorStore );\n\n\tconst overridesWithConfig = useMemo( () => {\n\t\tif ( ! overrides?.length ) {\n\t\t\treturn;\n\t\t}\n\t\tconst newOverrides = [];\n\t\tconst overriddenClientIds = [];\n\t\tfor ( const [ , override ] of overrides ) {\n\t\t\tif (\n\t\t\t\toverride?.variation &&\n\t\t\t\toverride?.clientId &&\n\t\t\t\t/*\n\t\t\t\t * Because this component overwrites existing style overrides,\n\t\t\t\t * filter out any overrides that are already present in the store.\n\t\t\t\t */\n\t\t\t\t! overriddenClientIds.includes( override.clientId )\n\t\t\t) {\n\t\t\t\tconst blockName = getBlockName( override.clientId );\n\t\t\t\tconst configStyles =\n\t\t\t\t\tconfig?.styles?.blocks?.[ blockName ]?.variations?.[\n\t\t\t\t\t\toverride.variation\n\t\t\t\t\t];\n\t\t\t\tif ( configStyles ) {\n\t\t\t\t\tconst variationConfig = {\n\t\t\t\t\t\tsettings: config?.settings,\n\t\t\t\t\t\t// The variation style data is all that is needed to generate\n\t\t\t\t\t\t// the styles for the current application to a block. The variation\n\t\t\t\t\t\t// name is updated to match the instance specific class name.\n\t\t\t\t\t\tstyles: {\n\t\t\t\t\t\t\tblocks: {\n\t\t\t\t\t\t\t\t[ blockName ]: {\n\t\t\t\t\t\t\t\t\tvariations: {\n\t\t\t\t\t\t\t\t\t\t[ `${ override.variation }-${ override.clientId }` ]:\n\t\t\t\t\t\t\t\t\t\t\tconfigStyles,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t};\n\t\t\t\t\tconst blockSelectors = getBlockSelectors(\n\t\t\t\t\t\tgetBlockTypes(),\n\t\t\t\t\t\toverride.clientId\n\t\t\t\t\t);\n\t\t\t\t\tconst hasBlockGapSupport = false;\n\t\t\t\t\tconst hasFallbackGapSupport = true;\n\t\t\t\t\tconst disableLayoutStyles = true;\n\t\t\t\t\tconst disableRootPadding = true;\n\t\t\t\t\tconst variationStyles = toStyles(\n\t\t\t\t\t\tvariationConfig,\n\t\t\t\t\t\tblockSelectors,\n\t\t\t\t\t\thasBlockGapSupport,\n\t\t\t\t\t\thasFallbackGapSupport,\n\t\t\t\t\t\tdisableLayoutStyles,\n\t\t\t\t\t\tdisableRootPadding,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tblockGap: false,\n\t\t\t\t\t\t\tblockStyles: true,\n\t\t\t\t\t\t\tlayoutStyles: false,\n\t\t\t\t\t\t\tmarginReset: false,\n\t\t\t\t\t\t\tpresets: false,\n\t\t\t\t\t\t\trootPadding: false,\n\t\t\t\t\t\t\tvariationStyles: true,\n\t\t\t\t\t\t}\n\t\t\t\t\t);\n\t\t\t\t\tnewOverrides.push( {\n\t\t\t\t\t\tid: `${ override.variation }-${ override.clientId }`,\n\t\t\t\t\t\tcss: variationStyles,\n\t\t\t\t\t\t__unstableType: 'variation',\n\t\t\t\t\t\tvariation: override.variation,\n\t\t\t\t\t\t// The clientId will be stored with the override and used to ensure\n\t\t\t\t\t\t// the order of overrides matches the order of blocks so that the\n\t\t\t\t\t\t// correct CSS cascade is maintained.\n\t\t\t\t\t\tclientId: override.clientId,\n\t\t\t\t\t} );\n\t\t\t\t\toverriddenClientIds.push( override.clientId );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn newOverrides;\n\t}, [ config, overrides, getBlockStyles, getBlockName ] );\n\n\tif ( ! overridesWithConfig || ! overridesWithConfig.length ) {\n\t\treturn;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ overridesWithConfig.map( ( override ) => (\n\t\t\t\t<OverrideStyles key={ override.id } override={ override } />\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n\n/**\n * Retrieves any variation styles data and resolves any referenced values.\n *\n * @param {Object} globalStyles A complete global styles object, containing settings and styles.\n * @param {string} name The name of the desired block type.\n * @param {variation} variation The of the block style variation to retrieve data for.\n *\n * @return {Object|undefined} The global styles data for the specified variation.\n */\nexport function getVariationStylesWithRefValues(\n\tglobalStyles,\n\tname,\n\tvariation\n) {\n\tif ( ! globalStyles?.styles?.blocks?.[ name ]?.variations?.[ variation ] ) {\n\t\treturn;\n\t}\n\n\t// Helper to recursively look for `ref` values to resolve.\n\tconst replaceRefs = ( variationStyles ) => {\n\t\tObject.keys( variationStyles ).forEach( ( key ) => {\n\t\t\tconst value = variationStyles[ key ];\n\n\t\t\t// Only process objects.\n\t\t\tif ( typeof value === 'object' && value !== null ) {\n\t\t\t\t// Process `ref` value if present.\n\t\t\t\tif ( value.ref !== undefined ) {\n\t\t\t\t\tif (\n\t\t\t\t\t\ttypeof value.ref !== 'string' ||\n\t\t\t\t\t\tvalue.ref.trim() === ''\n\t\t\t\t\t) {\n\t\t\t\t\t\t// Remove invalid ref.\n\t\t\t\t\t\tdelete variationStyles[ key ];\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Resolve `ref` value.\n\t\t\t\t\t\tconst refValue = getValueFromObjectPath(\n\t\t\t\t\t\t\tglobalStyles,\n\t\t\t\t\t\t\tvalue.ref\n\t\t\t\t\t\t);\n\n\t\t\t\t\t\tif ( refValue ) {\n\t\t\t\t\t\t\tvariationStyles[ key ] = refValue;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tdelete variationStyles[ key ];\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\t// Recursively resolve `ref` values in nested objects.\n\t\t\t\t\treplaceRefs( value );\n\n\t\t\t\t\t// After recursion, if value is empty due to explicitly\n\t\t\t\t\t// `undefined` ref value, remove it.\n\t\t\t\t\tif ( Object.keys( value ).length === 0 ) {\n\t\t\t\t\t\tdelete variationStyles[ key ];\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t};\n\n\t// Deep clone variation node to avoid mutating it within global styles and losing refs.\n\tconst styles = JSON.parse(\n\t\tJSON.stringify(\n\t\t\tglobalStyles.styles.blocks[ name ].variations[ variation ]\n\t\t)\n\t);\n\treplaceRefs( styles );\n\n\treturn styles;\n}\n\nfunction useBlockStyleVariation( name, variation, clientId ) {\n\tconst { globalSettings, globalStyles } = useSelect( ( select ) => {\n\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\treturn {\n\t\t\tglobalSettings: settings.__experimentalFeatures,\n\t\t\tglobalStyles: settings[ globalStylesDataKey ],\n\t\t};\n\t}, [] );\n\n\treturn useMemo( () => {\n\t\tconst variationStyles = getVariationStylesWithRefValues(\n\t\t\t{\n\t\t\t\tsettings: globalSettings,\n\t\t\t\tstyles: globalStyles,\n\t\t\t},\n\t\t\tname,\n\t\t\tvariation\n\t\t);\n\n\t\treturn {\n\t\t\tsettings: globalSettings,\n\t\t\t// The variation style data is all that is needed to generate\n\t\t\t// the styles for the current application to a block. The variation\n\t\t\t// name is updated to match the instance specific class name.\n\t\t\tstyles: {\n\t\t\t\tblocks: {\n\t\t\t\t\t[ name ]: {\n\t\t\t\t\t\tvariations: {\n\t\t\t\t\t\t\t[ `${ variation }-${ clientId }` ]: variationStyles,\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}, [ globalSettings, globalStyles, variation, clientId, name ] );\n}\n\n// Rather than leveraging `useInstanceId` here, the `clientId` is used.\n// This is so that the variation style override's ID is predictable\n// when the order of applied style variations changes.\nfunction useBlockProps( { name, className, clientId } ) {\n\tconst { getBlockStyles } = useSelect( blocksStore );\n\n\tconst registeredStyles = getBlockStyles( name );\n\tconst variation = getVariationNameFromClass( className, registeredStyles );\n\tconst variationClass = `${ VARIATION_PREFIX }${ variation }-${ clientId }`;\n\n\tconst { settings, styles } = useBlockStyleVariation(\n\t\tname,\n\t\tvariation,\n\t\tclientId\n\t);\n\n\tconst variationStyles = useMemo( () => {\n\t\tif ( ! variation ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst variationConfig = { settings, styles };\n\t\tconst blockSelectors = getBlockSelectors( getBlockTypes(), clientId );\n\t\tconst hasBlockGapSupport = false;\n\t\tconst hasFallbackGapSupport = true;\n\t\tconst disableLayoutStyles = true;\n\t\tconst disableRootPadding = true;\n\n\t\treturn toStyles(\n\t\t\tvariationConfig,\n\t\t\tblockSelectors,\n\t\t\thasBlockGapSupport,\n\t\t\thasFallbackGapSupport,\n\t\t\tdisableLayoutStyles,\n\t\t\tdisableRootPadding,\n\t\t\t{\n\t\t\t\tblockGap: false,\n\t\t\t\tblockStyles: true,\n\t\t\t\tlayoutStyles: false,\n\t\t\t\tmarginReset: false,\n\t\t\t\tpresets: false,\n\t\t\t\trootPadding: false,\n\t\t\t\tvariationStyles: true,\n\t\t\t}\n\t\t);\n\t}, [ variation, settings, styles, clientId ] );\n\n\tusePrivateStyleOverride( {\n\t\tid: `variation-${ clientId }`,\n\t\tcss: variationStyles,\n\t\t__unstableType: 'variation',\n\t\tvariation,\n\t\t// The clientId will be stored with the override and used to ensure\n\t\t// the order of overrides matches the order of blocks so that the\n\t\t// correct CSS cascade is maintained.\n\t\tclientId,\n\t} );\n\n\treturn variation ? { className: variationClass } : {};\n}\n\nexport default {\n\thasSupport: () => true,\n\tattributeKeys: [ 'className' ],\n\tisMatch: ( { className } ) => getVariationMatches( className ).length > 0,\n\tuseBlockProps,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -9,6 +9,7 @@ import {
|
|
|
9
9
|
import { useInstanceId } from "@wordpress/compose";
|
|
10
10
|
import { addFilter } from "@wordpress/hooks";
|
|
11
11
|
import { useMemo, useEffect } from "@wordpress/element";
|
|
12
|
+
import { getBlockSelector } from "@wordpress/global-styles-engine";
|
|
12
13
|
import {
|
|
13
14
|
BlockControls,
|
|
14
15
|
InspectorControls,
|
|
@@ -20,7 +21,6 @@ import {
|
|
|
20
21
|
getDuotoneStylesheet,
|
|
21
22
|
getDuotoneUnsetStylesheet
|
|
22
23
|
} from "../components/duotone/utils";
|
|
23
|
-
import { getBlockCSSSelector } from "../components/global-styles/get-block-css-selector";
|
|
24
24
|
import { scopeSelector } from "../components/global-styles/utils";
|
|
25
25
|
import {
|
|
26
26
|
cleanEmptyObject,
|
|
@@ -238,10 +238,10 @@ function useBlockProps({ clientId, name, style }) {
|
|
|
238
238
|
false
|
|
239
239
|
);
|
|
240
240
|
if (experimentalDuotone) {
|
|
241
|
-
const rootSelector =
|
|
241
|
+
const rootSelector = getBlockSelector(blockType);
|
|
242
242
|
return typeof experimentalDuotone === "string" ? scopeSelector(rootSelector, experimentalDuotone) : rootSelector;
|
|
243
243
|
}
|
|
244
|
-
return
|
|
244
|
+
return getBlockSelector(blockType, "filter.duotone", {
|
|
245
245
|
fallback: true
|
|
246
246
|
});
|
|
247
247
|
}
|