@wordpress/block-editor 14.3.14 → 14.3.16
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/build/components/block-list/index.js +1 -0
- package/build/components/block-list/index.js.map +1 -1
- package/build/components/block-switcher/index.js +1 -0
- package/build/components/block-switcher/index.js.map +1 -1
- package/build/components/block-switcher/use-transformed-patterns.js +1 -0
- package/build/components/block-switcher/use-transformed-patterns.js.map +1 -1
- package/build/components/block-switcher/utils.js +1 -0
- package/build/components/block-switcher/utils.js.map +1 -1
- package/build/components/block-toolbar/index.js +1 -1
- package/build/components/block-toolbar/index.js.map +1 -1
- package/build/components/block-variation-transforms/index.js +1 -0
- package/build/components/block-variation-transforms/index.js.map +1 -1
- package/build/components/button-block-appender/index.js +1 -5
- package/build/components/button-block-appender/index.js.map +1 -1
- package/build/components/date-format-picker/index.js +1 -0
- package/build/components/date-format-picker/index.js.map +1 -1
- package/build/components/global-styles/get-global-styles-changes.js +1 -0
- package/build/components/global-styles/get-global-styles-changes.js.map +1 -1
- package/build/components/iframe/index.js +137 -23
- package/build/components/iframe/index.js.map +1 -1
- package/build/components/inserter/block-patterns-explorer/pattern-list.js +2 -1
- package/build/components/inserter/block-patterns-explorer/pattern-list.js.map +1 -1
- package/build/components/observe-typing/index.js +1 -0
- package/build/components/observe-typing/index.js.map +1 -1
- package/build/components/recursion-provider/index.js +1 -0
- package/build/components/recursion-provider/index.js.map +1 -1
- package/build/components/rich-text/index.js +1 -0
- package/build/components/rich-text/index.js.map +1 -1
- package/build/components/rich-text/native/use-format-types.js +1 -0
- package/build/components/rich-text/native/use-format-types.js.map +1 -1
- package/build/components/rich-text/use-format-types.js +1 -0
- package/build/components/rich-text/use-format-types.js.map +1 -1
- package/build/components/spacing-sizes-control/utils.js +1 -0
- package/build/components/spacing-sizes-control/utils.js.map +1 -1
- package/build/components/typewriter/index.js +1 -0
- package/build/components/typewriter/index.js.map +1 -1
- package/build/hooks/generated-class-name.js +1 -0
- package/build/hooks/generated-class-name.js.map +1 -1
- package/build/store/reducer.js +1 -0
- package/build/store/reducer.js.map +1 -1
- package/build/store/selectors.js +1 -0
- package/build/store/selectors.js.map +1 -1
- package/build/utils/object.js +1 -0
- package/build/utils/object.js.map +1 -1
- package/build-module/components/block-list/index.js +1 -0
- package/build-module/components/block-list/index.js.map +1 -1
- package/build-module/components/block-switcher/index.js +1 -0
- package/build-module/components/block-switcher/index.js.map +1 -1
- package/build-module/components/block-switcher/use-transformed-patterns.js +1 -0
- package/build-module/components/block-switcher/use-transformed-patterns.js.map +1 -1
- package/build-module/components/block-switcher/utils.js +1 -0
- package/build-module/components/block-switcher/utils.js.map +1 -1
- package/build-module/components/block-toolbar/index.js +1 -1
- package/build-module/components/block-toolbar/index.js.map +1 -1
- package/build-module/components/block-variation-transforms/index.js +1 -0
- package/build-module/components/block-variation-transforms/index.js.map +1 -1
- package/build-module/components/button-block-appender/index.js +2 -6
- package/build-module/components/button-block-appender/index.js.map +1 -1
- package/build-module/components/date-format-picker/index.js +1 -0
- package/build-module/components/date-format-picker/index.js.map +1 -1
- package/build-module/components/global-styles/get-global-styles-changes.js +1 -0
- package/build-module/components/global-styles/get-global-styles-changes.js.map +1 -1
- package/build-module/components/iframe/index.js +138 -24
- package/build-module/components/iframe/index.js.map +1 -1
- package/build-module/components/inserter/block-patterns-explorer/pattern-list.js +2 -1
- package/build-module/components/inserter/block-patterns-explorer/pattern-list.js.map +1 -1
- package/build-module/components/observe-typing/index.js +1 -0
- package/build-module/components/observe-typing/index.js.map +1 -1
- package/build-module/components/recursion-provider/index.js +1 -0
- package/build-module/components/recursion-provider/index.js.map +1 -1
- package/build-module/components/rich-text/index.js +1 -0
- package/build-module/components/rich-text/index.js.map +1 -1
- package/build-module/components/rich-text/native/use-format-types.js +1 -0
- package/build-module/components/rich-text/native/use-format-types.js.map +1 -1
- package/build-module/components/rich-text/use-format-types.js +1 -0
- package/build-module/components/rich-text/use-format-types.js.map +1 -1
- package/build-module/components/spacing-sizes-control/utils.js +1 -0
- package/build-module/components/spacing-sizes-control/utils.js.map +1 -1
- package/build-module/components/typewriter/index.js +1 -0
- package/build-module/components/typewriter/index.js.map +1 -1
- package/build-module/hooks/generated-class-name.js +1 -0
- package/build-module/hooks/generated-class-name.js.map +1 -1
- package/build-module/store/reducer.js +1 -0
- package/build-module/store/reducer.js.map +1 -1
- package/build-module/store/selectors.js +1 -0
- package/build-module/store/selectors.js.map +1 -1
- package/build-module/utils/object.js +1 -0
- package/build-module/utils/object.js.map +1 -1
- package/build-style/content-rtl.css +9 -2
- package/build-style/content.css +9 -2
- package/build-style/style-rtl.css +1 -2
- package/build-style/style.css +1 -2
- package/package.json +11 -11
- package/src/components/block-toolbar/index.js +7 -5
- package/src/components/button-block-appender/index.js +2 -7
- package/src/components/iframe/content.scss +16 -3
- package/src/components/iframe/index.js +184 -44
- package/src/components/inserter/block-patterns-explorer/pattern-list.js +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_x","__","dateI18n","humanTimeDiff","useState","createInterpolateElement","TextControl","ExternalLink","VisuallyHidden","ToggleControl","__experimentalVStack","VStack","CustomSelectControl","jsx","_jsx","jsxs","_jsxs","exampleDate","Date","setDate","setMonth","getMonth","DateFormatPicker","format","defaultFormat","onChange","className","children","as","__nextHasNoMarginBottom","label","help","checked","NonDefaultControls","_suggestedOptions$fin","suggestedFormats","Set","suggestedOptions","map","suggestedFormat","index","key","name","customOption","hint","isCustom","setIsCustom","some","option","__next40pxDefaultSize","options","value","find","selectedItem","hideLabelFromVision","Link","href"],"sources":["@wordpress/block-editor/src/components/date-format-picker/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { _x, __ } from '@wordpress/i18n';\nimport { dateI18n, humanTimeDiff } from '@wordpress/date';\nimport { useState, createInterpolateElement } from '@wordpress/element';\nimport {\n\tTextControl,\n\tExternalLink,\n\tVisuallyHidden,\n\tToggleControl,\n\t__experimentalVStack as VStack,\n\tCustomSelectControl,\n} from '@wordpress/components';\n\n// So that we illustrate the different formats in the dropdown properly, show a date that is\n// somwhat recent, has a day greater than 12, and a month with more than three letters.\nconst exampleDate = new Date();\nexampleDate.setDate( 20 );\nexampleDate.setMonth( exampleDate.getMonth() - 3 );\nif ( exampleDate.getMonth() === 4 ) {\n\t// May has three letters, so use March.\n\texampleDate.setMonth( 3 );\n}\n\n/**\n * The `DateFormatPicker` component renders controls that let the user choose a\n * _date format_. That is, how they want their dates to be formatted.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md\n *\n * @param {Object} props\n * @param {string|null} props.format The selected date\n * format. If\n * `null`,\n * _Default_ is\n * selected.\n * @param {string} props.defaultFormat The date format that\n * will be used if the\n * user selects\n * 'Default'.\n * @param {( format: string|null ) => void} props.onChange Called when a\n * selection is\n * made. If `null`,\n * _Default_ is\n * selected.\n */\nexport default function DateFormatPicker( {\n\tformat,\n\tdefaultFormat,\n\tonChange,\n} ) {\n\treturn (\n\t\t<fieldset className=\"block-editor-date-format-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Date format' ) }</VisuallyHidden>\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tlabel={ __( 'Default format' ) }\n\t\t\t\thelp={ `${ __( 'Example:' ) } ${ dateI18n(\n\t\t\t\t\tdefaultFormat,\n\t\t\t\t\texampleDate\n\t\t\t\t) }` }\n\t\t\t\tchecked={ ! format }\n\t\t\t\tonChange={ ( checked ) =>\n\t\t\t\t\tonChange( checked ? null : defaultFormat )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ format && (\n\t\t\t\t<NonDefaultControls format={ format } onChange={ onChange } />\n\t\t\t) }\n\t\t</fieldset>\n\t);\n}\n\nfunction NonDefaultControls( { format, onChange } ) {\n\t// Suggest a short format, medium format, long format, and a standardised\n\t// (YYYY-MM-DD) format. The short, medium, and long formats are localised as\n\t// different languages have different ways of writing these. For example, 'F\n\t// j, Y' (April 20, 2022) in American English (en_US) is 'j. F Y' (20. April\n\t// 2022) in German (de). The resultant array is de-duplicated as some\n\t// languages will use the same format string for short, medium, and long\n\t// formats.\n\tconst suggestedFormats = [\n\t\t...new Set( [\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t'Y-m-d',\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'n/j/Y', 'short date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'n/j/Y g:i A', 'short date format with time' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j, Y', 'medium date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j, Y g:i A', 'medium date format with time' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'F j, Y', 'long date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j', 'short date format without the year' ),\n\t\t] ),\n\t];\n\n\tconst suggestedOptions = [\n\t\t...suggestedFormats.map( ( suggestedFormat, index ) => ( {\n\t\t\tkey: `suggested-${ index }`,\n\t\t\tname: dateI18n( suggestedFormat, exampleDate ),\n\t\t\tformat: suggestedFormat,\n\t\t} ) ),\n\t\t{\n\t\t\tkey: 'human-diff',\n\t\t\tname: humanTimeDiff( exampleDate ),\n\t\t\tformat: 'human-diff',\n\t\t},\n\t];\n\n\tconst customOption = {\n\t\tkey: 'custom',\n\t\tname: __( 'Custom' ),\n\t\tclassName:\n\t\t\t'block-editor-date-format-picker__custom-format-select-control__custom-option',\n\t\thint: __( 'Enter your own date format' ),\n\t};\n\n\tconst [ isCustom, setIsCustom ] = useState(\n\t\t() =>\n\t\t\t!! format &&\n\t\t\t! suggestedOptions.some( ( option ) => option.format === format )\n\t);\n\n\treturn (\n\t\t<VStack>\n\t\t\t<CustomSelectControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tlabel={ __( 'Choose a format' ) }\n\t\t\t\toptions={ [ ...suggestedOptions, customOption ] }\n\t\t\t\tvalue={\n\t\t\t\t\tisCustom\n\t\t\t\t\t\t? customOption\n\t\t\t\t\t\t: suggestedOptions.find(\n\t\t\t\t\t\t\t\t( option ) => option.format === format\n\t\t\t\t\t\t ) ?? customOption\n\t\t\t\t}\n\t\t\t\tonChange={ ( { selectedItem } ) => {\n\t\t\t\t\tif ( selectedItem === customOption ) {\n\t\t\t\t\t\tsetIsCustom( true );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetIsCustom( false );\n\t\t\t\t\t\tonChange( selectedItem.format );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ isCustom && (\n\t\t\t\t<TextControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Custom format' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\thelp={ createInterpolateElement(\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Enter a date or time <Link>format string</Link>.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tLink: (\n\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/customize-date-and-time-format/'\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\tvalue={ format }\n\t\t\t\t\tonChange={ ( value ) => onChange( value ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["_x","__","dateI18n","humanTimeDiff","useState","createInterpolateElement","TextControl","ExternalLink","VisuallyHidden","ToggleControl","__experimentalVStack","VStack","CustomSelectControl","jsx","_jsx","jsxs","_jsxs","exampleDate","Date","setDate","setMonth","getMonth","DateFormatPicker","format","defaultFormat","onChange","className","children","as","__nextHasNoMarginBottom","label","help","checked","NonDefaultControls","_suggestedOptions$fin","suggestedFormats","Set","suggestedOptions","map","suggestedFormat","index","key","name","customOption","hint","isCustom","setIsCustom","some","option","__next40pxDefaultSize","options","value","find","selectedItem","hideLabelFromVision","Link","href"],"sources":["@wordpress/block-editor/src/components/date-format-picker/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { _x, __ } from '@wordpress/i18n';\nimport { dateI18n, humanTimeDiff } from '@wordpress/date';\nimport { useState, createInterpolateElement } from '@wordpress/element';\nimport {\n\tTextControl,\n\tExternalLink,\n\tVisuallyHidden,\n\tToggleControl,\n\t__experimentalVStack as VStack,\n\tCustomSelectControl,\n} from '@wordpress/components';\n\n// So that we illustrate the different formats in the dropdown properly, show a date that is\n// somwhat recent, has a day greater than 12, and a month with more than three letters.\nconst exampleDate = new Date();\nexampleDate.setDate( 20 );\nexampleDate.setMonth( exampleDate.getMonth() - 3 );\nif ( exampleDate.getMonth() === 4 ) {\n\t// May has three letters, so use March.\n\texampleDate.setMonth( 3 );\n}\n\n/**\n * The `DateFormatPicker` component renders controls that let the user choose a\n * _date format_. That is, how they want their dates to be formatted.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/date-format-picker/README.md\n *\n * @param {Object} props\n * @param {string|null} props.format The selected date\n * format. If\n * `null`,\n * _Default_ is\n * selected.\n * @param {string} props.defaultFormat The date format that\n * will be used if the\n * user selects\n * 'Default'.\n * @param {( format: string|null ) => void} props.onChange Called when a\n * selection is\n * made. If `null`,\n * _Default_ is\n * selected.\n */\nexport default function DateFormatPicker( {\n\tformat,\n\tdefaultFormat,\n\tonChange,\n} ) {\n\treturn (\n\t\t<fieldset className=\"block-editor-date-format-picker\">\n\t\t\t<VisuallyHidden as=\"legend\">{ __( 'Date format' ) }</VisuallyHidden>\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tlabel={ __( 'Default format' ) }\n\t\t\t\thelp={ `${ __( 'Example:' ) } ${ dateI18n(\n\t\t\t\t\tdefaultFormat,\n\t\t\t\t\texampleDate\n\t\t\t\t) }` }\n\t\t\t\tchecked={ ! format }\n\t\t\t\tonChange={ ( checked ) =>\n\t\t\t\t\tonChange( checked ? null : defaultFormat )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ format && (\n\t\t\t\t<NonDefaultControls format={ format } onChange={ onChange } />\n\t\t\t) }\n\t\t</fieldset>\n\t);\n}\n\nfunction NonDefaultControls( { format, onChange } ) {\n\t// Suggest a short format, medium format, long format, and a standardised\n\t// (YYYY-MM-DD) format. The short, medium, and long formats are localised as\n\t// different languages have different ways of writing these. For example, 'F\n\t// j, Y' (April 20, 2022) in American English (en_US) is 'j. F Y' (20. April\n\t// 2022) in German (de). The resultant array is de-duplicated as some\n\t// languages will use the same format string for short, medium, and long\n\t// formats.\n\tconst suggestedFormats = [\n\t\t...new Set( [\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t'Y-m-d',\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'n/j/Y', 'short date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'n/j/Y g:i A', 'short date format with time' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j, Y', 'medium date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j, Y g:i A', 'medium date format with time' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'F j, Y', 'long date format' ),\n\t\t\t/* translators: See https://www.php.net/manual/datetime.format.php */\n\t\t\t_x( 'M j', 'short date format without the year' ),\n\t\t] ),\n\t];\n\n\tconst suggestedOptions = [\n\t\t...suggestedFormats.map( ( suggestedFormat, index ) => ( {\n\t\t\tkey: `suggested-${ index }`,\n\t\t\tname: dateI18n( suggestedFormat, exampleDate ),\n\t\t\tformat: suggestedFormat,\n\t\t} ) ),\n\t\t{\n\t\t\tkey: 'human-diff',\n\t\t\tname: humanTimeDiff( exampleDate ),\n\t\t\tformat: 'human-diff',\n\t\t},\n\t];\n\n\tconst customOption = {\n\t\tkey: 'custom',\n\t\tname: __( 'Custom' ),\n\t\tclassName:\n\t\t\t'block-editor-date-format-picker__custom-format-select-control__custom-option',\n\t\thint: __( 'Enter your own date format' ),\n\t};\n\n\tconst [ isCustom, setIsCustom ] = useState(\n\t\t() =>\n\t\t\t!! format &&\n\t\t\t! suggestedOptions.some( ( option ) => option.format === format )\n\t);\n\n\treturn (\n\t\t<VStack>\n\t\t\t<CustomSelectControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tlabel={ __( 'Choose a format' ) }\n\t\t\t\toptions={ [ ...suggestedOptions, customOption ] }\n\t\t\t\tvalue={\n\t\t\t\t\tisCustom\n\t\t\t\t\t\t? customOption\n\t\t\t\t\t\t: suggestedOptions.find(\n\t\t\t\t\t\t\t\t( option ) => option.format === format\n\t\t\t\t\t\t ) ?? customOption\n\t\t\t\t}\n\t\t\t\tonChange={ ( { selectedItem } ) => {\n\t\t\t\t\tif ( selectedItem === customOption ) {\n\t\t\t\t\t\tsetIsCustom( true );\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetIsCustom( false );\n\t\t\t\t\t\tonChange( selectedItem.format );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ isCustom && (\n\t\t\t\t<TextControl\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tlabel={ __( 'Custom format' ) }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\thelp={ createInterpolateElement(\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Enter a date or time <Link>format string</Link>.'\n\t\t\t\t\t\t),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tLink: (\n\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t\t'https://wordpress.org/documentation/article/customize-date-and-time-format/'\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\tvalue={ format }\n\t\t\t\t\tonChange={ ( value ) => onChange( value ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["memoize","__","_n","sprintf","getBlockTypes","globalStylesChangesCache","Map","EMPTY_ARRAY","translationMap","caption","link","button","heading","h1","h2","h3","h4","h5","h6","getBlockNames","reduce","accumulator","name","title","isObject","obj","getTranslation","key","keyArray","split","blockName","undefined","deepCompare","changedObject","originalObject","parentPath","slice","join","allKeys","Set","Object","keys","diffs","path","changedPath","concat","getGlobalStylesChangelist","next","previous","cacheKey","JSON","stringify","has","get","changedValueTree","styles","background","color","typography","spacing","blocks","elements","settings","length","set","result","acc","curr","translation","push","getGlobalStylesChanges","options","changeList","changesLength","maxResults","entries","group","includes","map","changeValues","changeValuesLength","joinedChangesValue"],"sources":["@wordpress/block-editor/src/components/global-styles/get-global-styles-changes.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport memoize from 'memize';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { getBlockTypes } from '@wordpress/blocks';\n\nconst globalStylesChangesCache = new Map();\nconst EMPTY_ARRAY = [];\nconst translationMap = {\n\tcaption: __( 'Caption' ),\n\tlink: __( 'Link' ),\n\tbutton: __( 'Button' ),\n\theading: __( 'Heading' ),\n\th1: __( 'H1' ),\n\th2: __( 'H2' ),\n\th3: __( 'H3' ),\n\th4: __( 'H4' ),\n\th5: __( 'H5' ),\n\th6: __( 'H6' ),\n\t'settings.color': __( 'Color' ),\n\t'settings.typography': __( 'Typography' ),\n\t'styles.color': __( 'Colors' ),\n\t'styles.spacing': __( 'Spacing' ),\n\t'styles.background': __( 'Background' ),\n\t'styles.typography': __( 'Typography' ),\n};\nconst getBlockNames = memoize( () =>\n\tgetBlockTypes().reduce( ( accumulator, { name, title } ) => {\n\t\taccumulator[ name ] = title;\n\t\treturn accumulator;\n\t}, {} )\n);\nconst isObject = ( obj ) => obj !== null && typeof obj === 'object';\n\n/**\n * Get the translation for a given global styles key.\n * @param {string} key A key representing a path to a global style property or setting.\n * @return {string|undefined} A translated key or undefined if no translation exists.\n */\nfunction getTranslation( key ) {\n\tif ( translationMap[ key ] ) {\n\t\treturn translationMap[ key ];\n\t}\n\n\tconst keyArray = key.split( '.' );\n\n\tif ( keyArray?.[ 0 ] === 'blocks' ) {\n\t\tconst blockName = getBlockNames()?.[ keyArray[ 1 ] ];\n\t\treturn blockName || keyArray[ 1 ];\n\t}\n\n\tif ( keyArray?.[ 0 ] === 'elements' ) {\n\t\treturn translationMap[ keyArray[ 1 ] ] || keyArray[ 1 ];\n\t}\n\n\treturn undefined;\n}\n\n/**\n * A deep comparison of two objects, optimized for comparing global styles.\n * @param {Object} changedObject The changed object to compare.\n * @param {Object} originalObject The original object to compare against.\n * @param {string} parentPath A key/value pair object of block names and their rendered titles.\n * @return {string[]} An array of paths whose values have changed.\n */\nfunction deepCompare( changedObject, originalObject, parentPath = '' ) {\n\t// We have two non-object values to compare.\n\tif ( ! isObject( changedObject ) && ! isObject( originalObject ) ) {\n\t\t/*\n\t\t * Only return a path if the value has changed.\n\t\t * And then only the path name up to 2 levels deep.\n\t\t */\n\t\treturn changedObject !== originalObject\n\t\t\t? parentPath.split( '.' ).slice( 0, 2 ).join( '.' )\n\t\t\t: undefined;\n\t}\n\n\t// Enable comparison when an object doesn't have a corresponding property to compare.\n\tchangedObject = isObject( changedObject ) ? changedObject : {};\n\toriginalObject = isObject( originalObject ) ? originalObject : {};\n\n\tconst allKeys = new Set( [\n\t\t...Object.keys( changedObject ),\n\t\t...Object.keys( originalObject ),\n\t] );\n\n\tlet diffs = [];\n\tfor ( const key of allKeys ) {\n\t\tconst path = parentPath ? parentPath + '.' + key : key;\n\t\tconst changedPath = deepCompare(\n\t\t\tchangedObject[ key ],\n\t\t\toriginalObject[ key ],\n\t\t\tpath\n\t\t);\n\t\tif ( changedPath ) {\n\t\t\tdiffs = diffs.concat( changedPath );\n\t\t}\n\t}\n\treturn diffs;\n}\n\n/**\n * Returns an array of translated summarized global styles changes.\n * Results are cached using a Map() key of `JSON.stringify( { next, previous } )`.\n *\n * @param {Object} next The changed object to compare.\n * @param {Object} previous The original object to compare against.\n * @return {Array[]} A 2-dimensional array of tuples: [ \"group\", \"translated change\" ].\n */\nexport function getGlobalStylesChangelist( next, previous ) {\n\tconst cacheKey = JSON.stringify( { next, previous } );\n\n\tif ( globalStylesChangesCache.has( cacheKey ) ) {\n\t\treturn globalStylesChangesCache.get( cacheKey );\n\t}\n\n\t/*\n\t * Compare the two changesets with normalized keys.\n\t * The order of these keys determines the order in which\n\t * they'll appear in the results.\n\t */\n\tconst changedValueTree = deepCompare(\n\t\t{\n\t\t\tstyles: {\n\t\t\t\tbackground: next?.styles?.background,\n\t\t\t\tcolor: next?.styles?.color,\n\t\t\t\ttypography: next?.styles?.typography,\n\t\t\t\tspacing: next?.styles?.spacing,\n\t\t\t},\n\t\t\tblocks: next?.styles?.blocks,\n\t\t\telements: next?.styles?.elements,\n\t\t\tsettings: next?.settings,\n\t\t},\n\t\t{\n\t\t\tstyles: {\n\t\t\t\tbackground: previous?.styles?.background,\n\t\t\t\tcolor: previous?.styles?.color,\n\t\t\t\ttypography: previous?.styles?.typography,\n\t\t\t\tspacing: previous?.styles?.spacing,\n\t\t\t},\n\t\t\tblocks: previous?.styles?.blocks,\n\t\t\telements: previous?.styles?.elements,\n\t\t\tsettings: previous?.settings,\n\t\t}\n\t);\n\n\tif ( ! changedValueTree.length ) {\n\t\tglobalStylesChangesCache.set( cacheKey, EMPTY_ARRAY );\n\t\treturn EMPTY_ARRAY;\n\t}\n\n\t// Remove duplicate results.\n\tconst result = [ ...new Set( changedValueTree ) ]\n\t\t/*\n\t\t * Translate the keys.\n\t\t * Remove empty translations.\n\t\t */\n\t\t.reduce( ( acc, curr ) => {\n\t\t\tconst translation = getTranslation( curr );\n\t\t\tif ( translation ) {\n\t\t\t\tacc.push( [ curr.split( '.' )[ 0 ], translation ] );\n\t\t\t}\n\t\t\treturn acc;\n\t\t}, [] );\n\n\tglobalStylesChangesCache.set( cacheKey, result );\n\n\treturn result;\n}\n\n/**\n * From a getGlobalStylesChangelist() result, returns an array of translated global styles changes, grouped by type.\n * The types are 'blocks', 'elements', 'settings', and 'styles'.\n *\n * @param {Object} next The changed object to compare.\n * @param {Object} previous The original object to compare against.\n * @param {{maxResults:number}} options Options. maxResults: results to return before truncating.\n * @return {string[]} An array of translated changes.\n */\nexport default function getGlobalStylesChanges( next, previous, options = {} ) {\n\tlet changeList = getGlobalStylesChangelist( next, previous );\n\tconst changesLength = changeList.length;\n\tconst { maxResults } = options;\n\n\tif ( changesLength ) {\n\t\t// Truncate to `n` results if necessary.\n\t\tif ( !! maxResults && changesLength > maxResults ) {\n\t\t\tchangeList = changeList.slice( 0, maxResults );\n\t\t}\n\t\treturn Object.entries(\n\t\t\tchangeList.reduce( ( acc, curr ) => {\n\t\t\t\tconst group = acc[ curr[ 0 ] ] || [];\n\t\t\t\tif ( ! group.includes( curr[ 1 ] ) ) {\n\t\t\t\t\tacc[ curr[ 0 ] ] = [ ...group, curr[ 1 ] ];\n\t\t\t\t}\n\t\t\t\treturn acc;\n\t\t\t}, {} )\n\t\t).map( ( [ key, changeValues ] ) => {\n\t\t\tconst changeValuesLength = changeValues.length;\n\t\t\tconst joinedChangesValue = changeValues.join(\n\t\t\t\t/* translators: Used between list items, there is a space after the comma. */\n\t\t\t\t__( ', ' ) // eslint-disable-line @wordpress/i18n-no-flanking-whitespace\n\t\t\t);\n\t\t\tswitch ( key ) {\n\t\t\t\tcase 'blocks': {\n\t\t\t\t\treturn sprintf(\n\t\t\t\t\t\t// translators: %s: a list of block names separated by a comma.\n\t\t\t\t\t\t_n( '%s block.', '%s blocks.', changeValuesLength ),\n\t\t\t\t\t\tjoinedChangesValue\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tcase 'elements': {\n\t\t\t\t\treturn sprintf(\n\t\t\t\t\t\t// translators: %s: a list of element names separated by a comma.\n\t\t\t\t\t\t_n( '%s element.', '%s elements.', changeValuesLength ),\n\t\t\t\t\t\tjoinedChangesValue\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tcase 'settings': {\n\t\t\t\t\treturn sprintf(\n\t\t\t\t\t\t// translators: %s: a list of theme.json setting labels separated by a comma.\n\t\t\t\t\t\t__( '%s settings.' ),\n\t\t\t\t\t\tjoinedChangesValue\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tcase 'styles': {\n\t\t\t\t\treturn sprintf(\n\t\t\t\t\t\t// translators: %s: a list of theme.json top-level styles labels separated by a comma.\n\t\t\t\t\t\t__( '%s styles.' ),\n\t\t\t\t\t\tjoinedChangesValue\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tdefault: {\n\t\t\t\t\treturn sprintf(\n\t\t\t\t\t\t// translators: %s: a list of global styles changes separated by a comma.\n\t\t\t\t\t\t__( '%s.' ),\n\t\t\t\t\t\tjoinedChangesValue\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t}\n\n\treturn EMPTY_ARRAY;\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["memoize","__","_n","sprintf","getBlockTypes","globalStylesChangesCache","Map","EMPTY_ARRAY","translationMap","caption","link","button","heading","h1","h2","h3","h4","h5","h6","getBlockNames","reduce","accumulator","name","title","isObject","obj","getTranslation","key","keyArray","split","blockName","undefined","deepCompare","changedObject","originalObject","parentPath","slice","join","allKeys","Set","Object","keys","diffs","path","changedPath","concat","getGlobalStylesChangelist","next","previous","cacheKey","JSON","stringify","has","get","changedValueTree","styles","background","color","typography","spacing","blocks","elements","settings","length","set","result","acc","curr","translation","push","getGlobalStylesChanges","options","changeList","changesLength","maxResults","entries","group","includes","map","changeValues","changeValuesLength","joinedChangesValue"],"sources":["@wordpress/block-editor/src/components/global-styles/get-global-styles-changes.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport memoize from 'memize';\n\n/**\n * WordPress dependencies\n */\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { getBlockTypes } from '@wordpress/blocks';\n\nconst globalStylesChangesCache = new Map();\nconst EMPTY_ARRAY = [];\nconst translationMap = {\n\tcaption: __( 'Caption' ),\n\tlink: __( 'Link' ),\n\tbutton: __( 'Button' ),\n\theading: __( 'Heading' ),\n\th1: __( 'H1' ),\n\th2: __( 'H2' ),\n\th3: __( 'H3' ),\n\th4: __( 'H4' ),\n\th5: __( 'H5' ),\n\th6: __( 'H6' ),\n\t'settings.color': __( 'Color' ),\n\t'settings.typography': __( 'Typography' ),\n\t'styles.color': __( 'Colors' ),\n\t'styles.spacing': __( 'Spacing' ),\n\t'styles.background': __( 'Background' ),\n\t'styles.typography': __( 'Typography' ),\n};\nconst getBlockNames = memoize( () =>\n\tgetBlockTypes().reduce( ( accumulator, { name, title } ) => {\n\t\taccumulator[ name ] = title;\n\t\treturn accumulator;\n\t}, {} )\n);\nconst isObject = ( obj ) => obj !== null && typeof obj === 'object';\n\n/**\n * Get the translation for a given global styles key.\n * @param {string} key A key representing a path to a global style property or setting.\n * @return {string|undefined} A translated key or undefined if no translation exists.\n */\nfunction getTranslation( key ) {\n\tif ( translationMap[ key ] ) {\n\t\treturn translationMap[ key ];\n\t}\n\n\tconst keyArray = key.split( '.' );\n\n\tif ( keyArray?.[ 0 ] === 'blocks' ) {\n\t\tconst blockName = getBlockNames()?.[ keyArray[ 1 ] ];\n\t\treturn blockName || keyArray[ 1 ];\n\t}\n\n\tif ( keyArray?.[ 0 ] === 'elements' ) {\n\t\treturn translationMap[ keyArray[ 1 ] ] || keyArray[ 1 ];\n\t}\n\n\treturn undefined;\n}\n\n/**\n * A deep comparison of two objects, optimized for comparing global styles.\n * @param {Object} changedObject The changed object to compare.\n * @param {Object} originalObject The original object to compare against.\n * @param {string} parentPath A key/value pair object of block names and their rendered titles.\n * @return {string[]} An array of paths whose values have changed.\n */\nfunction deepCompare( changedObject, originalObject, parentPath = '' ) {\n\t// We have two non-object values to compare.\n\tif ( ! isObject( changedObject ) && ! isObject( originalObject ) ) {\n\t\t/*\n\t\t * Only return a path if the value has changed.\n\t\t * And then only the path name up to 2 levels deep.\n\t\t */\n\t\treturn changedObject !== originalObject\n\t\t\t? parentPath.split( '.' ).slice( 0, 2 ).join( '.' )\n\t\t\t: undefined;\n\t}\n\n\t// Enable comparison when an object doesn't have a corresponding property to compare.\n\tchangedObject = isObject( changedObject ) ? changedObject : {};\n\toriginalObject = isObject( originalObject ) ? originalObject : {};\n\n\tconst allKeys = new Set( [\n\t\t...Object.keys( changedObject ),\n\t\t...Object.keys( originalObject ),\n\t] );\n\n\tlet diffs = [];\n\tfor ( const key of allKeys ) {\n\t\tconst path = parentPath ? parentPath + '.' + key : key;\n\t\tconst changedPath = deepCompare(\n\t\t\tchangedObject[ key ],\n\t\t\toriginalObject[ key ],\n\t\t\tpath\n\t\t);\n\t\tif ( changedPath ) {\n\t\t\tdiffs = diffs.concat( changedPath );\n\t\t}\n\t}\n\treturn diffs;\n}\n\n/**\n * Returns an array of translated summarized global styles changes.\n * Results are cached using a Map() key of `JSON.stringify( { next, previous } )`.\n *\n * @param {Object} next The changed object to compare.\n * @param {Object} previous The original object to compare against.\n * @return {Array[]} A 2-dimensional array of tuples: [ \"group\", \"translated change\" ].\n */\nexport function getGlobalStylesChangelist( next, previous ) {\n\tconst cacheKey = JSON.stringify( { next, previous } );\n\n\tif ( globalStylesChangesCache.has( cacheKey ) ) {\n\t\treturn globalStylesChangesCache.get( cacheKey );\n\t}\n\n\t/*\n\t * Compare the two changesets with normalized keys.\n\t * The order of these keys determines the order in which\n\t * they'll appear in the results.\n\t */\n\tconst changedValueTree = deepCompare(\n\t\t{\n\t\t\tstyles: {\n\t\t\t\tbackground: next?.styles?.background,\n\t\t\t\tcolor: next?.styles?.color,\n\t\t\t\ttypography: next?.styles?.typography,\n\t\t\t\tspacing: next?.styles?.spacing,\n\t\t\t},\n\t\t\tblocks: next?.styles?.blocks,\n\t\t\telements: next?.styles?.elements,\n\t\t\tsettings: next?.settings,\n\t\t},\n\t\t{\n\t\t\tstyles: {\n\t\t\t\tbackground: previous?.styles?.background,\n\t\t\t\tcolor: previous?.styles?.color,\n\t\t\t\ttypography: previous?.styles?.typography,\n\t\t\t\tspacing: previous?.styles?.spacing,\n\t\t\t},\n\t\t\tblocks: previous?.styles?.blocks,\n\t\t\telements: previous?.styles?.elements,\n\t\t\tsettings: previous?.settings,\n\t\t}\n\t);\n\n\tif ( ! changedValueTree.length ) {\n\t\tglobalStylesChangesCache.set( cacheKey, EMPTY_ARRAY );\n\t\treturn EMPTY_ARRAY;\n\t}\n\n\t// Remove duplicate results.\n\tconst result = [ ...new Set( changedValueTree ) ]\n\t\t/*\n\t\t * Translate the keys.\n\t\t * Remove empty translations.\n\t\t */\n\t\t.reduce( ( acc, curr ) => {\n\t\t\tconst translation = getTranslation( curr );\n\t\t\tif ( translation ) {\n\t\t\t\tacc.push( [ curr.split( '.' )[ 0 ], translation ] );\n\t\t\t}\n\t\t\treturn acc;\n\t\t}, [] );\n\n\tglobalStylesChangesCache.set( cacheKey, result );\n\n\treturn result;\n}\n\n/**\n * From a getGlobalStylesChangelist() result, returns an array of translated global styles changes, grouped by type.\n * The types are 'blocks', 'elements', 'settings', and 'styles'.\n *\n * @param {Object} next The changed object to compare.\n * @param {Object} previous The original object to compare against.\n * @param {{maxResults:number}} options Options. maxResults: results to return before truncating.\n * @return {string[]} An array of translated changes.\n */\nexport default function getGlobalStylesChanges( next, previous, options = {} ) {\n\tlet changeList = getGlobalStylesChangelist( next, previous );\n\tconst changesLength = changeList.length;\n\tconst { maxResults } = options;\n\n\tif ( changesLength ) {\n\t\t// Truncate to `n` results if necessary.\n\t\tif ( !! maxResults && changesLength > maxResults ) {\n\t\t\tchangeList = changeList.slice( 0, maxResults );\n\t\t}\n\t\treturn Object.entries(\n\t\t\tchangeList.reduce( ( acc, curr ) => {\n\t\t\t\tconst group = acc[ curr[ 0 ] ] || [];\n\t\t\t\tif ( ! group.includes( curr[ 1 ] ) ) {\n\t\t\t\t\tacc[ curr[ 0 ] ] = [ ...group, curr[ 1 ] ];\n\t\t\t\t}\n\t\t\t\treturn acc;\n\t\t\t}, {} )\n\t\t).map( ( [ key, changeValues ] ) => {\n\t\t\tconst changeValuesLength = changeValues.length;\n\t\t\tconst joinedChangesValue = changeValues.join(\n\t\t\t\t/* translators: Used between list items, there is a space after the comma. */\n\t\t\t\t__( ', ' ) // eslint-disable-line @wordpress/i18n-no-flanking-whitespace\n\t\t\t);\n\t\t\tswitch ( key ) {\n\t\t\t\tcase 'blocks': {\n\t\t\t\t\treturn sprintf(\n\t\t\t\t\t\t// translators: %s: a list of block names separated by a comma.\n\t\t\t\t\t\t_n( '%s block.', '%s blocks.', changeValuesLength ),\n\t\t\t\t\t\tjoinedChangesValue\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tcase 'elements': {\n\t\t\t\t\treturn sprintf(\n\t\t\t\t\t\t// translators: %s: a list of element names separated by a comma.\n\t\t\t\t\t\t_n( '%s element.', '%s elements.', changeValuesLength ),\n\t\t\t\t\t\tjoinedChangesValue\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tcase 'settings': {\n\t\t\t\t\treturn sprintf(\n\t\t\t\t\t\t// translators: %s: a list of theme.json setting labels separated by a comma.\n\t\t\t\t\t\t__( '%s settings.' ),\n\t\t\t\t\t\tjoinedChangesValue\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tcase 'styles': {\n\t\t\t\t\treturn sprintf(\n\t\t\t\t\t\t// translators: %s: a list of theme.json top-level styles labels separated by a comma.\n\t\t\t\t\t\t__( '%s styles.' ),\n\t\t\t\t\t\tjoinedChangesValue\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tdefault: {\n\t\t\t\t\treturn sprintf(\n\t\t\t\t\t\t// translators: %s: a list of global styles changes separated by a comma.\n\t\t\t\t\t\t__( '%s.' ),\n\t\t\t\t\t\tjoinedChangesValue\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t} );\n\t}\n\n\treturn EMPTY_ARRAY;\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -9,7 +9,7 @@ import clsx from 'clsx';
|
|
|
9
9
|
*/
|
|
10
10
|
import { useState, createPortal, forwardRef, useMemo, useEffect, useRef } from '@wordpress/element';
|
|
11
11
|
import { __ } from '@wordpress/i18n';
|
|
12
|
-
import { useResizeObserver, useMergeRefs, useRefEffect, useDisabled } from '@wordpress/compose';
|
|
12
|
+
import { useResizeObserver, useMergeRefs, useRefEffect, useDisabled, useReducedMotion } from '@wordpress/compose';
|
|
13
13
|
import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
|
|
14
14
|
import { useSelect } from '@wordpress/data';
|
|
15
15
|
|
|
@@ -119,6 +119,7 @@ function Iframe({
|
|
|
119
119
|
styles = '',
|
|
120
120
|
scripts = ''
|
|
121
121
|
} = resolvedAssets;
|
|
122
|
+
/** @type {[Document, import('react').Dispatch<Document>]} */
|
|
122
123
|
const [iframeDocument, setIframeDocument] = useState();
|
|
123
124
|
const initialContainerWidth = useRef(0);
|
|
124
125
|
const [bodyClasses, setBodyClasses] = useState([]);
|
|
@@ -130,6 +131,7 @@ function Iframe({
|
|
|
130
131
|
const [containerResizeListener, {
|
|
131
132
|
width: containerWidth
|
|
132
133
|
}] = useResizeObserver();
|
|
134
|
+
const prefersReducedMotion = useReducedMotion();
|
|
133
135
|
const setRef = useRefEffect(node => {
|
|
134
136
|
node._load = () => {
|
|
135
137
|
setIframeDocument(node.contentDocument);
|
|
@@ -208,6 +210,12 @@ function Iframe({
|
|
|
208
210
|
}
|
|
209
211
|
}, [containerWidth, isZoomedOut]);
|
|
210
212
|
const scaleContainerWidth = Math.max(initialContainerWidth.current, containerWidth);
|
|
213
|
+
const frameSizeValue = parseInt(frameSize);
|
|
214
|
+
const maxWidth = 750;
|
|
215
|
+
const scaleValue = scale === 'default' ? (Math.min(containerWidth, maxWidth) - frameSizeValue * 2) / scaleContainerWidth : scale;
|
|
216
|
+
const prevScaleRef = useRef(scaleValue);
|
|
217
|
+
const prevFrameSizeRef = useRef(frameSizeValue);
|
|
218
|
+
const prevClientHeightRef = useRef( /* Initialized in the useEffect. */);
|
|
211
219
|
const disabledRef = useDisabled({
|
|
212
220
|
isDisabled: !readonly
|
|
213
221
|
});
|
|
@@ -252,37 +260,129 @@ function Iframe({
|
|
|
252
260
|
return [_src, () => URL.revokeObjectURL(_src)];
|
|
253
261
|
}, [html]);
|
|
254
262
|
useEffect(() => cleanup, [cleanup]);
|
|
255
|
-
|
|
263
|
+
useEffect(() => {
|
|
264
|
+
var _prevClientHeightRef$;
|
|
265
|
+
if (!iframeDocument ||
|
|
266
|
+
// HACK: Checking if isZoomedOut differs from prevIsZoomedOut here
|
|
267
|
+
// instead of the dependency array to appease the linter.
|
|
268
|
+
scaleValue === 1 === (prevScaleRef.current === 1)) {
|
|
269
|
+
return;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
// Unscaled height of the current iframe container.
|
|
273
|
+
const clientHeight = iframeDocument.documentElement.clientHeight;
|
|
274
|
+
|
|
275
|
+
// Scaled height of the current iframe content.
|
|
276
|
+
const scrollHeight = iframeDocument.documentElement.scrollHeight;
|
|
277
|
+
|
|
278
|
+
// Previous scale value.
|
|
279
|
+
const prevScale = prevScaleRef.current;
|
|
280
|
+
|
|
281
|
+
// Unscaled size of the previous padding around the iframe content.
|
|
282
|
+
const prevFrameSize = prevFrameSizeRef.current;
|
|
283
|
+
|
|
284
|
+
// Unscaled height of the previous iframe container.
|
|
285
|
+
const prevClientHeight = (_prevClientHeightRef$ = prevClientHeightRef.current) !== null && _prevClientHeightRef$ !== void 0 ? _prevClientHeightRef$ : clientHeight;
|
|
286
|
+
|
|
287
|
+
// We can't trust the set value from contentHeight, as it was measured
|
|
288
|
+
// before the zoom out mode was changed. After zoom out mode is changed,
|
|
289
|
+
// appenders may appear or disappear, so we need to get the height from
|
|
290
|
+
// the iframe at this point when we're about to animate the zoom out.
|
|
291
|
+
// The iframe scrollTop, scrollHeight, and clientHeight will all be
|
|
292
|
+
// accurate. The client height also does change when the zoom out mode
|
|
293
|
+
// is toggled, as the bottom bar about selecting the template is
|
|
294
|
+
// added/removed when toggling zoom out mode.
|
|
295
|
+
const scrollTop = iframeDocument.documentElement.scrollTop;
|
|
296
|
+
|
|
297
|
+
// Step 0: Start with the current scrollTop.
|
|
298
|
+
let scrollTopNext = scrollTop;
|
|
299
|
+
|
|
300
|
+
// Step 1: Undo the effects of the previous scale and frame around the
|
|
301
|
+
// midpoint of the visible area.
|
|
302
|
+
scrollTopNext = (scrollTopNext + prevClientHeight / 2 - prevFrameSize) / prevScale - prevClientHeight / 2;
|
|
303
|
+
|
|
304
|
+
// Step 2: Apply the new scale and frame around the midpoint of the
|
|
305
|
+
// visible area.
|
|
306
|
+
scrollTopNext = (scrollTopNext + clientHeight / 2) * scaleValue + frameSizeValue - clientHeight / 2;
|
|
307
|
+
|
|
308
|
+
// Step 3: Handle an edge case so that you scroll to the top of the
|
|
309
|
+
// iframe if the top of the iframe content is visible in the container.
|
|
310
|
+
// The same edge case for the bottom is skipped because changing content
|
|
311
|
+
// makes calculating it impossible.
|
|
312
|
+
scrollTopNext = scrollTop <= prevFrameSize ? 0 : scrollTopNext;
|
|
313
|
+
|
|
314
|
+
// This is the scrollTop value if you are scrolled to the bottom of the
|
|
315
|
+
// iframe. We can't just let the browser handle it because we need to
|
|
316
|
+
// animate the scaling.
|
|
317
|
+
const maxScrollTop = scrollHeight * (scaleValue / prevScale) + frameSizeValue * 2 - clientHeight;
|
|
318
|
+
|
|
319
|
+
// Step 4: Clamp the scrollTopNext between the minimum and maximum
|
|
320
|
+
// possible scrollTop positions. Round the value to avoid subpixel
|
|
321
|
+
// truncation by the browser which sometimes causes a 1px error.
|
|
322
|
+
scrollTopNext = Math.round(Math.min(Math.max(0, scrollTopNext), Math.max(0, maxScrollTop)));
|
|
323
|
+
iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-scroll-top', `${scrollTop}px`);
|
|
324
|
+
iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-scroll-top-next', `${scrollTopNext}px`);
|
|
325
|
+
iframeDocument.documentElement.classList.add('zoom-out-animation');
|
|
326
|
+
function onZoomOutTransitionEnd() {
|
|
327
|
+
// Remove the position fixed for the animation.
|
|
328
|
+
iframeDocument.documentElement.classList.remove('zoom-out-animation');
|
|
329
|
+
|
|
330
|
+
// Update previous values.
|
|
331
|
+
prevClientHeightRef.current = clientHeight;
|
|
332
|
+
prevFrameSizeRef.current = frameSizeValue;
|
|
333
|
+
prevScaleRef.current = scaleValue;
|
|
334
|
+
|
|
335
|
+
// Set the final scroll position that was just animated to.
|
|
336
|
+
iframeDocument.documentElement.scrollTop = scrollTopNext;
|
|
337
|
+
}
|
|
338
|
+
let raf;
|
|
339
|
+
if (prefersReducedMotion) {
|
|
340
|
+
// Hack: Wait for the window values to recalculate.
|
|
341
|
+
raf = iframeDocument.defaultView.requestAnimationFrame(onZoomOutTransitionEnd);
|
|
342
|
+
} else {
|
|
343
|
+
iframeDocument.documentElement.addEventListener('transitionend', onZoomOutTransitionEnd, {
|
|
344
|
+
once: true
|
|
345
|
+
});
|
|
346
|
+
}
|
|
347
|
+
return () => {
|
|
348
|
+
iframeDocument.documentElement.style.removeProperty('--wp-block-editor-iframe-zoom-out-scroll-top');
|
|
349
|
+
iframeDocument.documentElement.style.removeProperty('--wp-block-editor-iframe-zoom-out-scroll-top-next');
|
|
350
|
+
iframeDocument.documentElement.classList.remove('zoom-out-animation');
|
|
351
|
+
if (prefersReducedMotion) {
|
|
352
|
+
iframeDocument.defaultView.cancelAnimationFrame(raf);
|
|
353
|
+
} else {
|
|
354
|
+
iframeDocument.documentElement.removeEventListener('transitionend', onZoomOutTransitionEnd);
|
|
355
|
+
}
|
|
356
|
+
};
|
|
357
|
+
}, [iframeDocument, scaleValue, frameSizeValue, prefersReducedMotion]);
|
|
256
358
|
|
|
257
359
|
// Toggle zoom out CSS Classes only when zoom out mode changes. We could add these into the useEffect
|
|
258
360
|
// that controls settings the CSS variables, but then we would need to do more work to ensure we're
|
|
259
361
|
// only toggling these when the zoom out mode changes, as that useEffect is also triggered by a large
|
|
260
362
|
// number of dependencies.
|
|
261
363
|
useEffect(() => {
|
|
262
|
-
if (!iframeDocument
|
|
364
|
+
if (!iframeDocument) {
|
|
263
365
|
return;
|
|
264
366
|
}
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
iframeDocument.documentElement.classList.remove('zoom-out-animation');
|
|
270
|
-
}, 400); // 400ms should match the animation speed used in components/iframe/content.scss
|
|
271
|
-
};
|
|
272
|
-
handleZoomOutAnimationClassname();
|
|
273
|
-
iframeDocument.documentElement.classList.add('is-zoomed-out');
|
|
274
|
-
return () => {
|
|
275
|
-
handleZoomOutAnimationClassname();
|
|
367
|
+
if (isZoomedOut) {
|
|
368
|
+
iframeDocument.documentElement.classList.add('is-zoomed-out');
|
|
369
|
+
} else {
|
|
370
|
+
// HACK: Since we can't remove this in the cleanup, we need to do it here.
|
|
276
371
|
iframeDocument.documentElement.classList.remove('is-zoomed-out');
|
|
372
|
+
}
|
|
373
|
+
return () => {
|
|
374
|
+
// HACK: Skipping cleanup because it causes issues with the zoom out
|
|
375
|
+
// animation. More refactoring is needed to fix this properly.
|
|
376
|
+
// iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
|
|
277
377
|
};
|
|
278
378
|
}, [iframeDocument, isZoomedOut]);
|
|
279
379
|
|
|
280
380
|
// Calculate the scaling and CSS variables for the zoom out canvas
|
|
281
381
|
useEffect(() => {
|
|
282
|
-
if (!iframeDocument
|
|
382
|
+
if (!iframeDocument) {
|
|
283
383
|
return;
|
|
284
384
|
}
|
|
285
|
-
|
|
385
|
+
|
|
286
386
|
// Note: When we initialize the zoom out when the canvas is smaller (sidebars open),
|
|
287
387
|
// initialContainerWidth will be smaller than the full page, and reflow will happen
|
|
288
388
|
// when the canvas area becomes larger due to sidebars closing. This is a known but
|
|
@@ -291,7 +391,7 @@ function Iframe({
|
|
|
291
391
|
// This scaling calculation has to happen within the JS because CSS calc() can
|
|
292
392
|
// only divide and multiply by a unitless value. I.e. calc( 100px / 2 ) is valid
|
|
293
393
|
// but calc( 100px / 2px ) is not.
|
|
294
|
-
iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-scale',
|
|
394
|
+
iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-scale', scaleValue);
|
|
295
395
|
|
|
296
396
|
// frameSize has to be a px value for the scaling and frame size to be computed correctly.
|
|
297
397
|
iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-frame-size', typeof frameSize === 'number' ? `${frameSize}px` : frameSize);
|
|
@@ -300,14 +400,28 @@ function Iframe({
|
|
|
300
400
|
iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-container-width', `${containerWidth}px`);
|
|
301
401
|
iframeDocument.documentElement.style.setProperty('--wp-block-editor-iframe-zoom-out-scale-container-width', `${scaleContainerWidth}px`);
|
|
302
402
|
return () => {
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
iframeDocument.documentElement.style.removeProperty(
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
iframeDocument.documentElement.style.removeProperty(
|
|
403
|
+
// HACK: Skipping cleanup because it causes issues with the zoom out
|
|
404
|
+
// animation. More refactoring is needed to fix this properly.
|
|
405
|
+
// iframeDocument.documentElement.style.removeProperty(
|
|
406
|
+
// '--wp-block-editor-iframe-zoom-out-scale'
|
|
407
|
+
// );
|
|
408
|
+
// iframeDocument.documentElement.style.removeProperty(
|
|
409
|
+
// '--wp-block-editor-iframe-zoom-out-frame-size'
|
|
410
|
+
// );
|
|
411
|
+
// iframeDocument.documentElement.style.removeProperty(
|
|
412
|
+
// '--wp-block-editor-iframe-zoom-out-content-height'
|
|
413
|
+
// );
|
|
414
|
+
// iframeDocument.documentElement.style.removeProperty(
|
|
415
|
+
// '--wp-block-editor-iframe-zoom-out-inner-height'
|
|
416
|
+
// );
|
|
417
|
+
// iframeDocument.documentElement.style.removeProperty(
|
|
418
|
+
// '--wp-block-editor-iframe-zoom-out-container-width'
|
|
419
|
+
// );
|
|
420
|
+
// iframeDocument.documentElement.style.removeProperty(
|
|
421
|
+
// '--wp-block-editor-iframe-zoom-out-scale-container-width'
|
|
422
|
+
// );
|
|
309
423
|
};
|
|
310
|
-
}, [
|
|
424
|
+
}, [scaleValue, frameSize, iframeDocument, iframeWindowInnerHeight, contentHeight, containerWidth, windowInnerWidth, isZoomedOut, scaleContainerWidth]);
|
|
311
425
|
|
|
312
426
|
// Make sure to not render the before and after focusable div elements in view
|
|
313
427
|
// mode. They're only needed to capture focus in edit mode.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["clsx","useState","createPortal","forwardRef","useMemo","useEffect","useRef","__","useResizeObserver","useMergeRefs","useRefEffect","useDisabled","__experimentalStyleProvider","StyleProvider","useSelect","useBlockSelectionClearer","useWritingFlow","getCompatibilityStyles","store","blockEditorStore","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","bubbleEvent","event","Constructor","frame","init","key","contentDocument","defaultView","MouseEvent","rect","getBoundingClientRect","clientX","left","clientY","top","newEvent","type","defaultPrevented","preventDefault","cancelled","dispatchEvent","useBubbleEvents","iframeDocument","frameElement","html","documentElement","eventTypes","handlers","name","prototype","Object","getPrototypeOf","constructorName","constructor","window","addEventListener","removeEventListener","Iframe","contentRef","children","tabIndex","scale","frameSize","readonly","forwardedRef","ref","title","props","resolvedAssets","isPreviewMode","select","getSettings","settings","__unstableResolvedAssets","__unstableIsPreviewMode","styles","scripts","setIframeDocument","initialContainerWidth","bodyClasses","setBodyClasses","clearerRef","before","writingFlowRef","after","contentResizeListener","height","contentHeight","containerResizeListener","width","containerWidth","setRef","node","_load","iFrameDocument","preventFileDropDefault","onLoad","ownerDocument","classList","add","Array","from","body","filter","startsWith","dir","compatStyle","getElementById","id","head","appendChild","cloneNode","console","warn","iframeWindowInnerHeight","setIframeWindowInnerHeight","iframeResizeRef","nodeWindow","innerHeight","onResize","windowInnerWidth","setWindowInnerWidth","windowResizeRef","innerWidth","isZoomedOut","current","scaleContainerWidth","Math","max","disabledRef","isDisabled","bodyRef","src","cleanup","_src","URL","createObjectURL","Blob","revokeObjectURL","zoomOutAnimationClassnameRef","handleZoomOutAnimationClassname","clearTimeout","setTimeout","remove","maxWidth","style","setProperty","min","parseInt","removeProperty","shouldRenderFocusCaptureElements","iframe","border","onKeyDown","currentTarget","target","stopPropagation","nativeEvent","KeyboardEvent","className","document","IframeIfReady","isInitialised","__internalIsInitialized"],"sources":["@wordpress/block-editor/src/components/iframe/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseState,\n\tcreatePortal,\n\tforwardRef,\n\tuseMemo,\n\tuseEffect,\n\tuseRef,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tuseResizeObserver,\n\tuseMergeRefs,\n\tuseRefEffect,\n\tuseDisabled,\n} from '@wordpress/compose';\nimport { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { useBlockSelectionClearer } from '../block-selection-clearer';\nimport { useWritingFlow } from '../writing-flow';\nimport { getCompatibilityStyles } from './get-compatibility-styles';\nimport { store as blockEditorStore } from '../../store';\n\nfunction bubbleEvent( event, Constructor, frame ) {\n\tconst init = {};\n\n\tfor ( const key in event ) {\n\t\tinit[ key ] = event[ key ];\n\t}\n\n\t// Check if the event is a MouseEvent generated within the iframe.\n\t// If so, adjust the coordinates to be relative to the position of\n\t// the iframe. This ensures that components such as Draggable\n\t// receive coordinates relative to the window, instead of relative\n\t// to the iframe. Without this, the Draggable event handler would\n\t// result in components \"jumping\" position as soon as the user\n\t// drags over the iframe.\n\tif ( event instanceof frame.contentDocument.defaultView.MouseEvent ) {\n\t\tconst rect = frame.getBoundingClientRect();\n\t\tinit.clientX += rect.left;\n\t\tinit.clientY += rect.top;\n\t}\n\n\tconst newEvent = new Constructor( event.type, init );\n\tif ( init.defaultPrevented ) {\n\t\tnewEvent.preventDefault();\n\t}\n\tconst cancelled = ! frame.dispatchEvent( newEvent );\n\n\tif ( cancelled ) {\n\t\tevent.preventDefault();\n\t}\n}\n\n/**\n * Bubbles some event types (keydown, keypress, and dragover) to parent document\n * document to ensure that the keyboard shortcuts and drag and drop work.\n *\n * Ideally, we should remove event bubbling in the future. Keyboard shortcuts\n * should be context dependent, e.g. actions on blocks like Cmd+A should not\n * work globally outside the block editor.\n *\n * @param {Document} iframeDocument Document to attach listeners to.\n */\nfunction useBubbleEvents( iframeDocument ) {\n\treturn useRefEffect( () => {\n\t\tconst { defaultView } = iframeDocument;\n\t\tif ( ! defaultView ) {\n\t\t\treturn;\n\t\t}\n\t\tconst { frameElement } = defaultView;\n\t\tconst html = iframeDocument.documentElement;\n\t\tconst eventTypes = [ 'dragover', 'mousemove' ];\n\t\tconst handlers = {};\n\t\tfor ( const name of eventTypes ) {\n\t\t\thandlers[ name ] = ( event ) => {\n\t\t\t\tconst prototype = Object.getPrototypeOf( event );\n\t\t\t\tconst constructorName = prototype.constructor.name;\n\t\t\t\tconst Constructor = window[ constructorName ];\n\t\t\t\tbubbleEvent( event, Constructor, frameElement );\n\t\t\t};\n\t\t\thtml.addEventListener( name, handlers[ name ] );\n\t\t}\n\n\t\treturn () => {\n\t\t\tfor ( const name of eventTypes ) {\n\t\t\t\thtml.removeEventListener( name, handlers[ name ] );\n\t\t\t}\n\t\t};\n\t} );\n}\n\nfunction Iframe( {\n\tcontentRef,\n\tchildren,\n\ttabIndex = 0,\n\tscale = 1,\n\tframeSize = 0,\n\treadonly,\n\tforwardedRef: ref,\n\ttitle = __( 'Editor canvas' ),\n\t...props\n} ) {\n\tconst { resolvedAssets, isPreviewMode } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst settings = getSettings();\n\t\treturn {\n\t\t\tresolvedAssets: settings.__unstableResolvedAssets,\n\t\t\tisPreviewMode: settings.__unstableIsPreviewMode,\n\t\t};\n\t}, [] );\n\tconst { styles = '', scripts = '' } = resolvedAssets;\n\tconst [ iframeDocument, setIframeDocument ] = useState();\n\tconst initialContainerWidth = useRef( 0 );\n\tconst [ bodyClasses, setBodyClasses ] = useState( [] );\n\tconst clearerRef = useBlockSelectionClearer();\n\tconst [ before, writingFlowRef, after ] = useWritingFlow();\n\tconst [ contentResizeListener, { height: contentHeight } ] =\n\t\tuseResizeObserver();\n\tconst [ containerResizeListener, { width: containerWidth } ] =\n\t\tuseResizeObserver();\n\n\tconst setRef = useRefEffect( ( node ) => {\n\t\tnode._load = () => {\n\t\t\tsetIframeDocument( node.contentDocument );\n\t\t};\n\t\tlet iFrameDocument;\n\t\t// Prevent the default browser action for files dropped outside of dropzones.\n\t\tfunction preventFileDropDefault( event ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t\tfunction onLoad() {\n\t\t\tconst { contentDocument, ownerDocument } = node;\n\t\t\tconst { documentElement } = contentDocument;\n\t\t\tiFrameDocument = contentDocument;\n\n\t\t\tdocumentElement.classList.add( 'block-editor-iframe__html' );\n\n\t\t\tclearerRef( documentElement );\n\n\t\t\t// Ideally ALL classes that are added through get_body_class should\n\t\t\t// be added in the editor too, which we'll somehow have to get from\n\t\t\t// the server in the future (which will run the PHP filters).\n\t\t\tsetBodyClasses(\n\t\t\t\tArray.from( ownerDocument.body.classList ).filter(\n\t\t\t\t\t( name ) =>\n\t\t\t\t\t\tname.startsWith( 'admin-color-' ) ||\n\t\t\t\t\t\tname.startsWith( 'post-type-' ) ||\n\t\t\t\t\t\tname === 'wp-embed-responsive'\n\t\t\t\t)\n\t\t\t);\n\n\t\t\tcontentDocument.dir = ownerDocument.dir;\n\n\t\t\tfor ( const compatStyle of getCompatibilityStyles() ) {\n\t\t\t\tif ( contentDocument.getElementById( compatStyle.id ) ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tcontentDocument.head.appendChild(\n\t\t\t\t\tcompatStyle.cloneNode( true )\n\t\t\t\t);\n\n\t\t\t\tif ( ! isPreviewMode ) {\n\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t`${ compatStyle.id } was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe.`,\n\t\t\t\t\t\tcompatStyle\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tiFrameDocument.addEventListener(\n\t\t\t\t'dragover',\n\t\t\t\tpreventFileDropDefault,\n\t\t\t\tfalse\n\t\t\t);\n\t\t\tiFrameDocument.addEventListener(\n\t\t\t\t'drop',\n\t\t\t\tpreventFileDropDefault,\n\t\t\t\tfalse\n\t\t\t);\n\t\t}\n\n\t\tnode.addEventListener( 'load', onLoad );\n\n\t\treturn () => {\n\t\t\tdelete node._load;\n\t\t\tnode.removeEventListener( 'load', onLoad );\n\t\t\tiFrameDocument?.removeEventListener(\n\t\t\t\t'dragover',\n\t\t\t\tpreventFileDropDefault\n\t\t\t);\n\t\t\tiFrameDocument?.removeEventListener(\n\t\t\t\t'drop',\n\t\t\t\tpreventFileDropDefault\n\t\t\t);\n\t\t};\n\t}, [] );\n\n\tconst [ iframeWindowInnerHeight, setIframeWindowInnerHeight ] = useState();\n\n\tconst iframeResizeRef = useRefEffect( ( node ) => {\n\t\tconst nodeWindow = node.ownerDocument.defaultView;\n\n\t\tsetIframeWindowInnerHeight( nodeWindow.innerHeight );\n\t\tconst onResize = () => {\n\t\t\tsetIframeWindowInnerHeight( nodeWindow.innerHeight );\n\t\t};\n\t\tnodeWindow.addEventListener( 'resize', onResize );\n\t\treturn () => {\n\t\t\tnodeWindow.removeEventListener( 'resize', onResize );\n\t\t};\n\t}, [] );\n\n\tconst [ windowInnerWidth, setWindowInnerWidth ] = useState();\n\n\tconst windowResizeRef = useRefEffect( ( node ) => {\n\t\tconst nodeWindow = node.ownerDocument.defaultView;\n\n\t\tsetWindowInnerWidth( nodeWindow.innerWidth );\n\t\tconst onResize = () => {\n\t\t\tsetWindowInnerWidth( nodeWindow.innerWidth );\n\t\t};\n\t\tnodeWindow.addEventListener( 'resize', onResize );\n\t\treturn () => {\n\t\t\tnodeWindow.removeEventListener( 'resize', onResize );\n\t\t};\n\t}, [] );\n\n\tconst isZoomedOut = scale !== 1;\n\n\tuseEffect( () => {\n\t\tif ( ! isZoomedOut ) {\n\t\t\tinitialContainerWidth.current = containerWidth;\n\t\t}\n\t}, [ containerWidth, isZoomedOut ] );\n\n\tconst scaleContainerWidth = Math.max(\n\t\tinitialContainerWidth.current,\n\t\tcontainerWidth\n\t);\n\n\tconst disabledRef = useDisabled( { isDisabled: ! readonly } );\n\tconst bodyRef = useMergeRefs( [\n\t\tuseBubbleEvents( iframeDocument ),\n\t\tcontentRef,\n\t\tclearerRef,\n\t\twritingFlowRef,\n\t\tdisabledRef,\n\t\t// Avoid resize listeners when not needed, these will trigger\n\t\t// unnecessary re-renders when animating the iframe width, or when\n\t\t// expanding preview iframes.\n\t\tisZoomedOut ? iframeResizeRef : null,\n\t] );\n\n\t// Correct doctype is required to enable rendering in standards\n\t// mode. Also preload the styles to avoid a flash of unstyled\n\t// content.\n\tconst html = `<!doctype html>\n<html>\n\t<head>\n\t\t<meta charset=\"utf-8\">\n\t\t<script>window.frameElement._load()</script>\n\t\t<style>\n\t\t\thtml{\n\t\t\t\theight: auto !important;\n\t\t\t\tmin-height: 100%;\n\t\t\t}\n\t\t\t/* Lowest specificity to not override global styles */\n\t\t\t:where(body) {\n\t\t\t\tmargin: 0;\n\t\t\t\t/* Default background color in case zoom out mode background\n\t\t\t\tcolors the html element */\n\t\t\t\tbackground-color: white;\n\t\t\t}\n\t\t</style>\n\t\t${ styles }\n\t\t${ scripts }\n\t</head>\n\t<body>\n\t\t<script>document.currentScript.parentElement.remove()</script>\n\t</body>\n</html>`;\n\n\tconst [ src, cleanup ] = useMemo( () => {\n\t\tconst _src = URL.createObjectURL(\n\t\t\tnew window.Blob( [ html ], { type: 'text/html' } )\n\t\t);\n\t\treturn [ _src, () => URL.revokeObjectURL( _src ) ];\n\t}, [ html ] );\n\n\tuseEffect( () => cleanup, [ cleanup ] );\n\n\tconst zoomOutAnimationClassnameRef = useRef( null );\n\n\t// Toggle zoom out CSS Classes only when zoom out mode changes. We could add these into the useEffect\n\t// that controls settings the CSS variables, but then we would need to do more work to ensure we're\n\t// only toggling these when the zoom out mode changes, as that useEffect is also triggered by a large\n\t// number of dependencies.\n\tuseEffect( () => {\n\t\tif ( ! iframeDocument || ! isZoomedOut ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst handleZoomOutAnimationClassname = () => {\n\t\t\tclearTimeout( zoomOutAnimationClassnameRef.current );\n\n\t\t\tiframeDocument.documentElement.classList.add(\n\t\t\t\t'zoom-out-animation'\n\t\t\t);\n\n\t\t\tzoomOutAnimationClassnameRef.current = setTimeout( () => {\n\t\t\t\tiframeDocument.documentElement.classList.remove(\n\t\t\t\t\t'zoom-out-animation'\n\t\t\t\t);\n\t\t\t}, 400 ); // 400ms should match the animation speed used in components/iframe/content.scss\n\t\t};\n\n\t\thandleZoomOutAnimationClassname();\n\t\tiframeDocument.documentElement.classList.add( 'is-zoomed-out' );\n\n\t\treturn () => {\n\t\t\thandleZoomOutAnimationClassname();\n\t\t\tiframeDocument.documentElement.classList.remove( 'is-zoomed-out' );\n\t\t};\n\t}, [ iframeDocument, isZoomedOut ] );\n\n\t// Calculate the scaling and CSS variables for the zoom out canvas\n\tuseEffect( () => {\n\t\tif ( ! iframeDocument || ! isZoomedOut ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst maxWidth = 750;\n\t\t// Note: When we initialize the zoom out when the canvas is smaller (sidebars open),\n\t\t// initialContainerWidth will be smaller than the full page, and reflow will happen\n\t\t// when the canvas area becomes larger due to sidebars closing. This is a known but\n\t\t// minor divergence for now.\n\n\t\t// This scaling calculation has to happen within the JS because CSS calc() can\n\t\t// only divide and multiply by a unitless value. I.e. calc( 100px / 2 ) is valid\n\t\t// but calc( 100px / 2px ) is not.\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scale',\n\t\t\tscale === 'default'\n\t\t\t\t? ( Math.min( containerWidth, maxWidth ) -\n\t\t\t\t\t\tparseInt( frameSize ) * 2 ) /\n\t\t\t\t\t\tscaleContainerWidth\n\t\t\t\t: scale\n\t\t);\n\n\t\t// frameSize has to be a px value for the scaling and frame size to be computed correctly.\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-frame-size',\n\t\t\ttypeof frameSize === 'number' ? `${ frameSize }px` : frameSize\n\t\t);\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-content-height',\n\t\t\t`${ contentHeight }px`\n\t\t);\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-inner-height',\n\t\t\t`${ iframeWindowInnerHeight }px`\n\t\t);\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-container-width',\n\t\t\t`${ containerWidth }px`\n\t\t);\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scale-container-width',\n\t\t\t`${ scaleContainerWidth }px`\n\t\t);\n\n\t\treturn () => {\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-scale'\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-frame-size'\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-content-height'\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-inner-height'\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-container-width'\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-scale-container-width'\n\t\t\t);\n\t\t};\n\t}, [\n\t\tscale,\n\t\tframeSize,\n\t\tiframeDocument,\n\t\tiframeWindowInnerHeight,\n\t\tcontentHeight,\n\t\tcontainerWidth,\n\t\twindowInnerWidth,\n\t\tisZoomedOut,\n\t\tscaleContainerWidth,\n\t] );\n\n\t// Make sure to not render the before and after focusable div elements in view\n\t// mode. They're only needed to capture focus in edit mode.\n\tconst shouldRenderFocusCaptureElements = tabIndex >= 0 && ! isPreviewMode;\n\n\tconst iframe = (\n\t\t<>\n\t\t\t{ shouldRenderFocusCaptureElements && before }\n\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t<iframe\n\t\t\t\t{ ...props }\n\t\t\t\tstyle={ {\n\t\t\t\t\t...props.style,\n\t\t\t\t\theight: props.style?.height,\n\t\t\t\t\tborder: 0,\n\t\t\t\t} }\n\t\t\t\tref={ useMergeRefs( [ ref, setRef ] ) }\n\t\t\t\ttabIndex={ tabIndex }\n\t\t\t\t// Correct doctype is required to enable rendering in standards\n\t\t\t\t// mode. Also preload the styles to avoid a flash of unstyled\n\t\t\t\t// content.\n\t\t\t\tsrc={ src }\n\t\t\t\ttitle={ title }\n\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\tif ( props.onKeyDown ) {\n\t\t\t\t\t\tprops.onKeyDown( event );\n\t\t\t\t\t}\n\t\t\t\t\t// If the event originates from inside the iframe, it means\n\t\t\t\t\t// it bubbled through the portal, but only with React\n\t\t\t\t\t// events. We need to to bubble native events as well,\n\t\t\t\t\t// though by doing so we also trigger another React event,\n\t\t\t\t\t// so we need to stop the propagation of this event to avoid\n\t\t\t\t\t// duplication.\n\t\t\t\t\tif (\n\t\t\t\t\t\tevent.currentTarget.ownerDocument !==\n\t\t\t\t\t\tevent.target.ownerDocument\n\t\t\t\t\t) {\n\t\t\t\t\t\t// We should only stop propagation of the React event,\n\t\t\t\t\t\t// the native event should further bubble inside the\n\t\t\t\t\t\t// iframe to the document and window.\n\t\t\t\t\t\t// Alternatively, we could consider redispatching the\n\t\t\t\t\t\t// native event in the iframe.\n\t\t\t\t\t\tconst { stopPropagation } = event.nativeEvent;\n\t\t\t\t\t\tevent.nativeEvent.stopPropagation = () => {};\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\tevent.nativeEvent.stopPropagation = stopPropagation;\n\t\t\t\t\t\tbubbleEvent(\n\t\t\t\t\t\t\tevent,\n\t\t\t\t\t\t\twindow.KeyboardEvent,\n\t\t\t\t\t\t\tevent.currentTarget\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\t\t{ iframeDocument &&\n\t\t\t\t\tcreatePortal(\n\t\t\t\t\t\t// We want to prevent React events from bubbling throught the iframe\n\t\t\t\t\t\t// we bubble these manually.\n\t\t\t\t\t\t/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */\n\t\t\t\t\t\t<body\n\t\t\t\t\t\t\tref={ bodyRef }\n\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t'block-editor-iframe__body',\n\t\t\t\t\t\t\t\t'editor-styles-wrapper',\n\t\t\t\t\t\t\t\t...bodyClasses\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ contentResizeListener }\n\t\t\t\t\t\t\t<StyleProvider document={ iframeDocument }>\n\t\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t\t</StyleProvider>\n\t\t\t\t\t\t</body>,\n\t\t\t\t\t\tiframeDocument.documentElement\n\t\t\t\t\t) }\n\t\t\t</iframe>\n\t\t\t{ shouldRenderFocusCaptureElements && after }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<div className=\"block-editor-iframe__container\" ref={ windowResizeRef }>\n\t\t\t{ containerResizeListener }\n\t\t\t<div\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'block-editor-iframe__scale-container',\n\t\t\t\t\tisZoomedOut && 'is-zoomed-out'\n\t\t\t\t) }\n\t\t\t\tstyle={ {\n\t\t\t\t\t'--wp-block-editor-iframe-zoom-out-scale-container-width':\n\t\t\t\t\t\tisZoomedOut && `${ scaleContainerWidth }px`,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ iframe }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction IframeIfReady( props, ref ) {\n\tconst isInitialised = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getSettings().__internalIsInitialized,\n\t\t[]\n\t);\n\n\t// We shouldn't render the iframe until the editor settings are initialised.\n\t// The initial settings are needed to get the styles for the srcDoc, which\n\t// cannot be changed after the iframe is mounted. srcDoc is used to to set\n\t// the initial iframe HTML, which is required to avoid a flash of unstyled\n\t// content.\n\tif ( ! isInitialised ) {\n\t\treturn null;\n\t}\n\n\treturn <Iframe { ...props } forwardedRef={ ref } />;\n}\n\nexport default forwardRef( IframeIfReady );\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["clsx","useState","createPortal","forwardRef","useMemo","useEffect","useRef","__","useResizeObserver","useMergeRefs","useRefEffect","useDisabled","useReducedMotion","__experimentalStyleProvider","StyleProvider","useSelect","useBlockSelectionClearer","useWritingFlow","getCompatibilityStyles","store","blockEditorStore","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","bubbleEvent","event","Constructor","frame","init","key","contentDocument","defaultView","MouseEvent","rect","getBoundingClientRect","clientX","left","clientY","top","newEvent","type","defaultPrevented","preventDefault","cancelled","dispatchEvent","useBubbleEvents","iframeDocument","frameElement","html","documentElement","eventTypes","handlers","name","prototype","Object","getPrototypeOf","constructorName","constructor","window","addEventListener","removeEventListener","Iframe","contentRef","children","tabIndex","scale","frameSize","readonly","forwardedRef","ref","title","props","resolvedAssets","isPreviewMode","select","getSettings","settings","__unstableResolvedAssets","__unstableIsPreviewMode","styles","scripts","setIframeDocument","initialContainerWidth","bodyClasses","setBodyClasses","clearerRef","before","writingFlowRef","after","contentResizeListener","height","contentHeight","containerResizeListener","width","containerWidth","prefersReducedMotion","setRef","node","_load","iFrameDocument","preventFileDropDefault","onLoad","ownerDocument","classList","add","Array","from","body","filter","startsWith","dir","compatStyle","getElementById","id","head","appendChild","cloneNode","console","warn","iframeWindowInnerHeight","setIframeWindowInnerHeight","iframeResizeRef","nodeWindow","innerHeight","onResize","windowInnerWidth","setWindowInnerWidth","windowResizeRef","innerWidth","isZoomedOut","current","scaleContainerWidth","Math","max","frameSizeValue","parseInt","maxWidth","scaleValue","min","prevScaleRef","prevFrameSizeRef","prevClientHeightRef","disabledRef","isDisabled","bodyRef","src","cleanup","_src","URL","createObjectURL","Blob","revokeObjectURL","_prevClientHeightRef$","clientHeight","scrollHeight","prevScale","prevFrameSize","prevClientHeight","scrollTop","scrollTopNext","maxScrollTop","round","style","setProperty","onZoomOutTransitionEnd","remove","raf","requestAnimationFrame","once","removeProperty","cancelAnimationFrame","shouldRenderFocusCaptureElements","iframe","border","onKeyDown","currentTarget","target","stopPropagation","nativeEvent","KeyboardEvent","className","document","IframeIfReady","isInitialised","__internalIsInitialized"],"sources":["@wordpress/block-editor/src/components/iframe/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseState,\n\tcreatePortal,\n\tforwardRef,\n\tuseMemo,\n\tuseEffect,\n\tuseRef,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tuseResizeObserver,\n\tuseMergeRefs,\n\tuseRefEffect,\n\tuseDisabled,\n\tuseReducedMotion,\n} from '@wordpress/compose';\nimport { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { useBlockSelectionClearer } from '../block-selection-clearer';\nimport { useWritingFlow } from '../writing-flow';\nimport { getCompatibilityStyles } from './get-compatibility-styles';\nimport { store as blockEditorStore } from '../../store';\n\nfunction bubbleEvent( event, Constructor, frame ) {\n\tconst init = {};\n\n\tfor ( const key in event ) {\n\t\tinit[ key ] = event[ key ];\n\t}\n\n\t// Check if the event is a MouseEvent generated within the iframe.\n\t// If so, adjust the coordinates to be relative to the position of\n\t// the iframe. This ensures that components such as Draggable\n\t// receive coordinates relative to the window, instead of relative\n\t// to the iframe. Without this, the Draggable event handler would\n\t// result in components \"jumping\" position as soon as the user\n\t// drags over the iframe.\n\tif ( event instanceof frame.contentDocument.defaultView.MouseEvent ) {\n\t\tconst rect = frame.getBoundingClientRect();\n\t\tinit.clientX += rect.left;\n\t\tinit.clientY += rect.top;\n\t}\n\n\tconst newEvent = new Constructor( event.type, init );\n\tif ( init.defaultPrevented ) {\n\t\tnewEvent.preventDefault();\n\t}\n\tconst cancelled = ! frame.dispatchEvent( newEvent );\n\n\tif ( cancelled ) {\n\t\tevent.preventDefault();\n\t}\n}\n\n/**\n * Bubbles some event types (keydown, keypress, and dragover) to parent document\n * document to ensure that the keyboard shortcuts and drag and drop work.\n *\n * Ideally, we should remove event bubbling in the future. Keyboard shortcuts\n * should be context dependent, e.g. actions on blocks like Cmd+A should not\n * work globally outside the block editor.\n *\n * @param {Document} iframeDocument Document to attach listeners to.\n */\nfunction useBubbleEvents( iframeDocument ) {\n\treturn useRefEffect( () => {\n\t\tconst { defaultView } = iframeDocument;\n\t\tif ( ! defaultView ) {\n\t\t\treturn;\n\t\t}\n\t\tconst { frameElement } = defaultView;\n\t\tconst html = iframeDocument.documentElement;\n\t\tconst eventTypes = [ 'dragover', 'mousemove' ];\n\t\tconst handlers = {};\n\t\tfor ( const name of eventTypes ) {\n\t\t\thandlers[ name ] = ( event ) => {\n\t\t\t\tconst prototype = Object.getPrototypeOf( event );\n\t\t\t\tconst constructorName = prototype.constructor.name;\n\t\t\t\tconst Constructor = window[ constructorName ];\n\t\t\t\tbubbleEvent( event, Constructor, frameElement );\n\t\t\t};\n\t\t\thtml.addEventListener( name, handlers[ name ] );\n\t\t}\n\n\t\treturn () => {\n\t\t\tfor ( const name of eventTypes ) {\n\t\t\t\thtml.removeEventListener( name, handlers[ name ] );\n\t\t\t}\n\t\t};\n\t} );\n}\n\nfunction Iframe( {\n\tcontentRef,\n\tchildren,\n\ttabIndex = 0,\n\tscale = 1,\n\tframeSize = 0,\n\treadonly,\n\tforwardedRef: ref,\n\ttitle = __( 'Editor canvas' ),\n\t...props\n} ) {\n\tconst { resolvedAssets, isPreviewMode } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst settings = getSettings();\n\t\treturn {\n\t\t\tresolvedAssets: settings.__unstableResolvedAssets,\n\t\t\tisPreviewMode: settings.__unstableIsPreviewMode,\n\t\t};\n\t}, [] );\n\tconst { styles = '', scripts = '' } = resolvedAssets;\n\t/** @type {[Document, import('react').Dispatch<Document>]} */\n\tconst [ iframeDocument, setIframeDocument ] = useState();\n\tconst initialContainerWidth = useRef( 0 );\n\tconst [ bodyClasses, setBodyClasses ] = useState( [] );\n\tconst clearerRef = useBlockSelectionClearer();\n\tconst [ before, writingFlowRef, after ] = useWritingFlow();\n\tconst [ contentResizeListener, { height: contentHeight } ] =\n\t\tuseResizeObserver();\n\tconst [ containerResizeListener, { width: containerWidth } ] =\n\t\tuseResizeObserver();\n\tconst prefersReducedMotion = useReducedMotion();\n\n\tconst setRef = useRefEffect( ( node ) => {\n\t\tnode._load = () => {\n\t\t\tsetIframeDocument( node.contentDocument );\n\t\t};\n\t\tlet iFrameDocument;\n\t\t// Prevent the default browser action for files dropped outside of dropzones.\n\t\tfunction preventFileDropDefault( event ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\t\tfunction onLoad() {\n\t\t\tconst { contentDocument, ownerDocument } = node;\n\t\t\tconst { documentElement } = contentDocument;\n\t\t\tiFrameDocument = contentDocument;\n\n\t\t\tdocumentElement.classList.add( 'block-editor-iframe__html' );\n\n\t\t\tclearerRef( documentElement );\n\n\t\t\t// Ideally ALL classes that are added through get_body_class should\n\t\t\t// be added in the editor too, which we'll somehow have to get from\n\t\t\t// the server in the future (which will run the PHP filters).\n\t\t\tsetBodyClasses(\n\t\t\t\tArray.from( ownerDocument.body.classList ).filter(\n\t\t\t\t\t( name ) =>\n\t\t\t\t\t\tname.startsWith( 'admin-color-' ) ||\n\t\t\t\t\t\tname.startsWith( 'post-type-' ) ||\n\t\t\t\t\t\tname === 'wp-embed-responsive'\n\t\t\t\t)\n\t\t\t);\n\n\t\t\tcontentDocument.dir = ownerDocument.dir;\n\n\t\t\tfor ( const compatStyle of getCompatibilityStyles() ) {\n\t\t\t\tif ( contentDocument.getElementById( compatStyle.id ) ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tcontentDocument.head.appendChild(\n\t\t\t\t\tcompatStyle.cloneNode( true )\n\t\t\t\t);\n\n\t\t\t\tif ( ! isPreviewMode ) {\n\t\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t`${ compatStyle.id } was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe.`,\n\t\t\t\t\t\tcompatStyle\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tiFrameDocument.addEventListener(\n\t\t\t\t'dragover',\n\t\t\t\tpreventFileDropDefault,\n\t\t\t\tfalse\n\t\t\t);\n\t\t\tiFrameDocument.addEventListener(\n\t\t\t\t'drop',\n\t\t\t\tpreventFileDropDefault,\n\t\t\t\tfalse\n\t\t\t);\n\t\t}\n\n\t\tnode.addEventListener( 'load', onLoad );\n\n\t\treturn () => {\n\t\t\tdelete node._load;\n\t\t\tnode.removeEventListener( 'load', onLoad );\n\t\t\tiFrameDocument?.removeEventListener(\n\t\t\t\t'dragover',\n\t\t\t\tpreventFileDropDefault\n\t\t\t);\n\t\t\tiFrameDocument?.removeEventListener(\n\t\t\t\t'drop',\n\t\t\t\tpreventFileDropDefault\n\t\t\t);\n\t\t};\n\t}, [] );\n\n\tconst [ iframeWindowInnerHeight, setIframeWindowInnerHeight ] = useState();\n\n\tconst iframeResizeRef = useRefEffect( ( node ) => {\n\t\tconst nodeWindow = node.ownerDocument.defaultView;\n\n\t\tsetIframeWindowInnerHeight( nodeWindow.innerHeight );\n\t\tconst onResize = () => {\n\t\t\tsetIframeWindowInnerHeight( nodeWindow.innerHeight );\n\t\t};\n\t\tnodeWindow.addEventListener( 'resize', onResize );\n\t\treturn () => {\n\t\t\tnodeWindow.removeEventListener( 'resize', onResize );\n\t\t};\n\t}, [] );\n\n\tconst [ windowInnerWidth, setWindowInnerWidth ] = useState();\n\n\tconst windowResizeRef = useRefEffect( ( node ) => {\n\t\tconst nodeWindow = node.ownerDocument.defaultView;\n\n\t\tsetWindowInnerWidth( nodeWindow.innerWidth );\n\t\tconst onResize = () => {\n\t\t\tsetWindowInnerWidth( nodeWindow.innerWidth );\n\t\t};\n\t\tnodeWindow.addEventListener( 'resize', onResize );\n\t\treturn () => {\n\t\t\tnodeWindow.removeEventListener( 'resize', onResize );\n\t\t};\n\t}, [] );\n\n\tconst isZoomedOut = scale !== 1;\n\n\tuseEffect( () => {\n\t\tif ( ! isZoomedOut ) {\n\t\t\tinitialContainerWidth.current = containerWidth;\n\t\t}\n\t}, [ containerWidth, isZoomedOut ] );\n\n\tconst scaleContainerWidth = Math.max(\n\t\tinitialContainerWidth.current,\n\t\tcontainerWidth\n\t);\n\n\tconst frameSizeValue = parseInt( frameSize );\n\n\tconst maxWidth = 750;\n\tconst scaleValue =\n\t\tscale === 'default'\n\t\t\t? ( Math.min( containerWidth, maxWidth ) - frameSizeValue * 2 ) /\n\t\t\t scaleContainerWidth\n\t\t\t: scale;\n\n\tconst prevScaleRef = useRef( scaleValue );\n\tconst prevFrameSizeRef = useRef( frameSizeValue );\n\tconst prevClientHeightRef = useRef( /* Initialized in the useEffect. */ );\n\n\tconst disabledRef = useDisabled( { isDisabled: ! readonly } );\n\tconst bodyRef = useMergeRefs( [\n\t\tuseBubbleEvents( iframeDocument ),\n\t\tcontentRef,\n\t\tclearerRef,\n\t\twritingFlowRef,\n\t\tdisabledRef,\n\t\t// Avoid resize listeners when not needed, these will trigger\n\t\t// unnecessary re-renders when animating the iframe width, or when\n\t\t// expanding preview iframes.\n\t\tisZoomedOut ? iframeResizeRef : null,\n\t] );\n\n\t// Correct doctype is required to enable rendering in standards\n\t// mode. Also preload the styles to avoid a flash of unstyled\n\t// content.\n\tconst html = `<!doctype html>\n<html>\n\t<head>\n\t\t<meta charset=\"utf-8\">\n\t\t<script>window.frameElement._load()</script>\n\t\t<style>\n\t\t\thtml{\n\t\t\t\theight: auto !important;\n\t\t\t\tmin-height: 100%;\n\t\t\t}\n\t\t\t/* Lowest specificity to not override global styles */\n\t\t\t:where(body) {\n\t\t\t\tmargin: 0;\n\t\t\t\t/* Default background color in case zoom out mode background\n\t\t\t\tcolors the html element */\n\t\t\t\tbackground-color: white;\n\t\t\t}\n\t\t</style>\n\t\t${ styles }\n\t\t${ scripts }\n\t</head>\n\t<body>\n\t\t<script>document.currentScript.parentElement.remove()</script>\n\t</body>\n</html>`;\n\n\tconst [ src, cleanup ] = useMemo( () => {\n\t\tconst _src = URL.createObjectURL(\n\t\t\tnew window.Blob( [ html ], { type: 'text/html' } )\n\t\t);\n\t\treturn [ _src, () => URL.revokeObjectURL( _src ) ];\n\t}, [ html ] );\n\n\tuseEffect( () => cleanup, [ cleanup ] );\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\t! iframeDocument ||\n\t\t\t// HACK: Checking if isZoomedOut differs from prevIsZoomedOut here\n\t\t\t// instead of the dependency array to appease the linter.\n\t\t\t( scaleValue === 1 ) === ( prevScaleRef.current === 1 )\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Unscaled height of the current iframe container.\n\t\tconst clientHeight = iframeDocument.documentElement.clientHeight;\n\n\t\t// Scaled height of the current iframe content.\n\t\tconst scrollHeight = iframeDocument.documentElement.scrollHeight;\n\n\t\t// Previous scale value.\n\t\tconst prevScale = prevScaleRef.current;\n\n\t\t// Unscaled size of the previous padding around the iframe content.\n\t\tconst prevFrameSize = prevFrameSizeRef.current;\n\n\t\t// Unscaled height of the previous iframe container.\n\t\tconst prevClientHeight = prevClientHeightRef.current ?? clientHeight;\n\n\t\t// We can't trust the set value from contentHeight, as it was measured\n\t\t// before the zoom out mode was changed. After zoom out mode is changed,\n\t\t// appenders may appear or disappear, so we need to get the height from\n\t\t// the iframe at this point when we're about to animate the zoom out.\n\t\t// The iframe scrollTop, scrollHeight, and clientHeight will all be\n\t\t// accurate. The client height also does change when the zoom out mode\n\t\t// is toggled, as the bottom bar about selecting the template is\n\t\t// added/removed when toggling zoom out mode.\n\t\tconst scrollTop = iframeDocument.documentElement.scrollTop;\n\n\t\t// Step 0: Start with the current scrollTop.\n\t\tlet scrollTopNext = scrollTop;\n\n\t\t// Step 1: Undo the effects of the previous scale and frame around the\n\t\t// midpoint of the visible area.\n\t\tscrollTopNext =\n\t\t\t( scrollTopNext + prevClientHeight / 2 - prevFrameSize ) /\n\t\t\t\tprevScale -\n\t\t\tprevClientHeight / 2;\n\n\t\t// Step 2: Apply the new scale and frame around the midpoint of the\n\t\t// visible area.\n\t\tscrollTopNext =\n\t\t\t( scrollTopNext + clientHeight / 2 ) * scaleValue +\n\t\t\tframeSizeValue -\n\t\t\tclientHeight / 2;\n\n\t\t// Step 3: Handle an edge case so that you scroll to the top of the\n\t\t// iframe if the top of the iframe content is visible in the container.\n\t\t// The same edge case for the bottom is skipped because changing content\n\t\t// makes calculating it impossible.\n\t\tscrollTopNext = scrollTop <= prevFrameSize ? 0 : scrollTopNext;\n\n\t\t// This is the scrollTop value if you are scrolled to the bottom of the\n\t\t// iframe. We can't just let the browser handle it because we need to\n\t\t// animate the scaling.\n\t\tconst maxScrollTop =\n\t\t\tscrollHeight * ( scaleValue / prevScale ) +\n\t\t\tframeSizeValue * 2 -\n\t\t\tclientHeight;\n\n\t\t// Step 4: Clamp the scrollTopNext between the minimum and maximum\n\t\t// possible scrollTop positions. Round the value to avoid subpixel\n\t\t// truncation by the browser which sometimes causes a 1px error.\n\t\tscrollTopNext = Math.round(\n\t\t\tMath.min(\n\t\t\t\tMath.max( 0, scrollTopNext ),\n\t\t\t\tMath.max( 0, maxScrollTop )\n\t\t\t)\n\t\t);\n\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top',\n\t\t\t`${ scrollTop }px`\n\t\t);\n\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top-next',\n\t\t\t`${ scrollTopNext }px`\n\t\t);\n\n\t\tiframeDocument.documentElement.classList.add( 'zoom-out-animation' );\n\n\t\tfunction onZoomOutTransitionEnd() {\n\t\t\t// Remove the position fixed for the animation.\n\t\t\tiframeDocument.documentElement.classList.remove(\n\t\t\t\t'zoom-out-animation'\n\t\t\t);\n\n\t\t\t// Update previous values.\n\t\t\tprevClientHeightRef.current = clientHeight;\n\t\t\tprevFrameSizeRef.current = frameSizeValue;\n\t\t\tprevScaleRef.current = scaleValue;\n\n\t\t\t// Set the final scroll position that was just animated to.\n\t\t\tiframeDocument.documentElement.scrollTop = scrollTopNext;\n\t\t}\n\n\t\tlet raf;\n\t\tif ( prefersReducedMotion ) {\n\t\t\t// Hack: Wait for the window values to recalculate.\n\t\t\traf = iframeDocument.defaultView.requestAnimationFrame(\n\t\t\t\tonZoomOutTransitionEnd\n\t\t\t);\n\t\t} else {\n\t\t\tiframeDocument.documentElement.addEventListener(\n\t\t\t\t'transitionend',\n\t\t\t\tonZoomOutTransitionEnd,\n\t\t\t\t{ once: true }\n\t\t\t);\n\t\t}\n\n\t\treturn () => {\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top'\n\t\t\t);\n\t\t\tiframeDocument.documentElement.style.removeProperty(\n\t\t\t\t'--wp-block-editor-iframe-zoom-out-scroll-top-next'\n\t\t\t);\n\t\t\tiframeDocument.documentElement.classList.remove(\n\t\t\t\t'zoom-out-animation'\n\t\t\t);\n\t\t\tif ( prefersReducedMotion ) {\n\t\t\t\tiframeDocument.defaultView.cancelAnimationFrame( raf );\n\t\t\t} else {\n\t\t\t\tiframeDocument.documentElement.removeEventListener(\n\t\t\t\t\t'transitionend',\n\t\t\t\t\tonZoomOutTransitionEnd\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\t}, [ iframeDocument, scaleValue, frameSizeValue, prefersReducedMotion ] );\n\n\t// Toggle zoom out CSS Classes only when zoom out mode changes. We could add these into the useEffect\n\t// that controls settings the CSS variables, but then we would need to do more work to ensure we're\n\t// only toggling these when the zoom out mode changes, as that useEffect is also triggered by a large\n\t// number of dependencies.\n\tuseEffect( () => {\n\t\tif ( ! iframeDocument ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isZoomedOut ) {\n\t\t\tiframeDocument.documentElement.classList.add( 'is-zoomed-out' );\n\t\t} else {\n\t\t\t// HACK: Since we can't remove this in the cleanup, we need to do it here.\n\t\t\tiframeDocument.documentElement.classList.remove( 'is-zoomed-out' );\n\t\t}\n\n\t\treturn () => {\n\t\t\t// HACK: Skipping cleanup because it causes issues with the zoom out\n\t\t\t// animation. More refactoring is needed to fix this properly.\n\t\t\t// iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );\n\t\t};\n\t}, [ iframeDocument, isZoomedOut ] );\n\n\t// Calculate the scaling and CSS variables for the zoom out canvas\n\tuseEffect( () => {\n\t\tif ( ! iframeDocument ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Note: When we initialize the zoom out when the canvas is smaller (sidebars open),\n\t\t// initialContainerWidth will be smaller than the full page, and reflow will happen\n\t\t// when the canvas area becomes larger due to sidebars closing. This is a known but\n\t\t// minor divergence for now.\n\n\t\t// This scaling calculation has to happen within the JS because CSS calc() can\n\t\t// only divide and multiply by a unitless value. I.e. calc( 100px / 2 ) is valid\n\t\t// but calc( 100px / 2px ) is not.\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scale',\n\t\t\tscaleValue\n\t\t);\n\n\t\t// frameSize has to be a px value for the scaling and frame size to be computed correctly.\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-frame-size',\n\t\t\ttypeof frameSize === 'number' ? `${ frameSize }px` : frameSize\n\t\t);\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-content-height',\n\t\t\t`${ contentHeight }px`\n\t\t);\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-inner-height',\n\t\t\t`${ iframeWindowInnerHeight }px`\n\t\t);\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-container-width',\n\t\t\t`${ containerWidth }px`\n\t\t);\n\t\tiframeDocument.documentElement.style.setProperty(\n\t\t\t'--wp-block-editor-iframe-zoom-out-scale-container-width',\n\t\t\t`${ scaleContainerWidth }px`\n\t\t);\n\n\t\treturn () => {\n\t\t\t// HACK: Skipping cleanup because it causes issues with the zoom out\n\t\t\t// animation. More refactoring is needed to fix this properly.\n\t\t\t// iframeDocument.documentElement.style.removeProperty(\n\t\t\t// \t'--wp-block-editor-iframe-zoom-out-scale'\n\t\t\t// );\n\t\t\t// iframeDocument.documentElement.style.removeProperty(\n\t\t\t// \t'--wp-block-editor-iframe-zoom-out-frame-size'\n\t\t\t// );\n\t\t\t// iframeDocument.documentElement.style.removeProperty(\n\t\t\t// \t'--wp-block-editor-iframe-zoom-out-content-height'\n\t\t\t// );\n\t\t\t// iframeDocument.documentElement.style.removeProperty(\n\t\t\t// \t'--wp-block-editor-iframe-zoom-out-inner-height'\n\t\t\t// );\n\t\t\t// iframeDocument.documentElement.style.removeProperty(\n\t\t\t// \t'--wp-block-editor-iframe-zoom-out-container-width'\n\t\t\t// );\n\t\t\t// iframeDocument.documentElement.style.removeProperty(\n\t\t\t// \t'--wp-block-editor-iframe-zoom-out-scale-container-width'\n\t\t\t// );\n\t\t};\n\t}, [\n\t\tscaleValue,\n\t\tframeSize,\n\t\tiframeDocument,\n\t\tiframeWindowInnerHeight,\n\t\tcontentHeight,\n\t\tcontainerWidth,\n\t\twindowInnerWidth,\n\t\tisZoomedOut,\n\t\tscaleContainerWidth,\n\t] );\n\n\t// Make sure to not render the before and after focusable div elements in view\n\t// mode. They're only needed to capture focus in edit mode.\n\tconst shouldRenderFocusCaptureElements = tabIndex >= 0 && ! isPreviewMode;\n\n\tconst iframe = (\n\t\t<>\n\t\t\t{ shouldRenderFocusCaptureElements && before }\n\t\t\t{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }\n\t\t\t<iframe\n\t\t\t\t{ ...props }\n\t\t\t\tstyle={ {\n\t\t\t\t\t...props.style,\n\t\t\t\t\theight: props.style?.height,\n\t\t\t\t\tborder: 0,\n\t\t\t\t} }\n\t\t\t\tref={ useMergeRefs( [ ref, setRef ] ) }\n\t\t\t\ttabIndex={ tabIndex }\n\t\t\t\t// Correct doctype is required to enable rendering in standards\n\t\t\t\t// mode. Also preload the styles to avoid a flash of unstyled\n\t\t\t\t// content.\n\t\t\t\tsrc={ src }\n\t\t\t\ttitle={ title }\n\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\tif ( props.onKeyDown ) {\n\t\t\t\t\t\tprops.onKeyDown( event );\n\t\t\t\t\t}\n\t\t\t\t\t// If the event originates from inside the iframe, it means\n\t\t\t\t\t// it bubbled through the portal, but only with React\n\t\t\t\t\t// events. We need to to bubble native events as well,\n\t\t\t\t\t// though by doing so we also trigger another React event,\n\t\t\t\t\t// so we need to stop the propagation of this event to avoid\n\t\t\t\t\t// duplication.\n\t\t\t\t\tif (\n\t\t\t\t\t\tevent.currentTarget.ownerDocument !==\n\t\t\t\t\t\tevent.target.ownerDocument\n\t\t\t\t\t) {\n\t\t\t\t\t\t// We should only stop propagation of the React event,\n\t\t\t\t\t\t// the native event should further bubble inside the\n\t\t\t\t\t\t// iframe to the document and window.\n\t\t\t\t\t\t// Alternatively, we could consider redispatching the\n\t\t\t\t\t\t// native event in the iframe.\n\t\t\t\t\t\tconst { stopPropagation } = event.nativeEvent;\n\t\t\t\t\t\tevent.nativeEvent.stopPropagation = () => {};\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\tevent.nativeEvent.stopPropagation = stopPropagation;\n\t\t\t\t\t\tbubbleEvent(\n\t\t\t\t\t\t\tevent,\n\t\t\t\t\t\t\twindow.KeyboardEvent,\n\t\t\t\t\t\t\tevent.currentTarget\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\t\t{ iframeDocument &&\n\t\t\t\t\tcreatePortal(\n\t\t\t\t\t\t// We want to prevent React events from bubbling throught the iframe\n\t\t\t\t\t\t// we bubble these manually.\n\t\t\t\t\t\t/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */\n\t\t\t\t\t\t<body\n\t\t\t\t\t\t\tref={ bodyRef }\n\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t'block-editor-iframe__body',\n\t\t\t\t\t\t\t\t'editor-styles-wrapper',\n\t\t\t\t\t\t\t\t...bodyClasses\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ contentResizeListener }\n\t\t\t\t\t\t\t<StyleProvider document={ iframeDocument }>\n\t\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t\t</StyleProvider>\n\t\t\t\t\t\t</body>,\n\t\t\t\t\t\tiframeDocument.documentElement\n\t\t\t\t\t) }\n\t\t\t</iframe>\n\t\t\t{ shouldRenderFocusCaptureElements && after }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<div className=\"block-editor-iframe__container\" ref={ windowResizeRef }>\n\t\t\t{ containerResizeListener }\n\t\t\t<div\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'block-editor-iframe__scale-container',\n\t\t\t\t\tisZoomedOut && 'is-zoomed-out'\n\t\t\t\t) }\n\t\t\t\tstyle={ {\n\t\t\t\t\t'--wp-block-editor-iframe-zoom-out-scale-container-width':\n\t\t\t\t\t\tisZoomedOut && `${ scaleContainerWidth }px`,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ iframe }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction IframeIfReady( props, ref ) {\n\tconst isInitialised = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getSettings().__internalIsInitialized,\n\t\t[]\n\t);\n\n\t// We shouldn't render the iframe until the editor settings are initialised.\n\t// The initial settings are needed to get the styles for the srcDoc, which\n\t// cannot be changed after the iframe is mounted. srcDoc is used to to set\n\t// the initial iframe HTML, which is required to avoid a flash of unstyled\n\t// content.\n\tif ( ! isInitialised ) {\n\t\treturn null;\n\t}\n\n\treturn <Iframe { ...props } forwardedRef={ ref } />;\n}\n\nexport default forwardRef( IframeIfReady );\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -59,7 +59,8 @@ function PatternList({
|
|
|
59
59
|
return true;
|
|
60
60
|
}
|
|
61
61
|
if (selectedCategory === 'uncategorized') {
|
|
62
|
-
|
|
62
|
+
var _pattern$categories$s;
|
|
63
|
+
const hasKnownCategory = (_pattern$categories$s = pattern.categories?.some(category => registeredPatternCategories.includes(category))) !== null && _pattern$categories$s !== void 0 ? _pattern$categories$s : false;
|
|
63
64
|
return !pattern.categories?.length || !hasKnownCategory;
|
|
64
65
|
}
|
|
65
66
|
return pattern.categories?.includes(selectedCategory);
|