@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
8 lines (7 loc) • 9.55 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/components/post-preview-button/index.js"],
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { renderToString } from '@wordpress/element';\nimport { Button, Path, SVG, VisuallyHidden } from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { applyFilters } from '@wordpress/hooks';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\n\nfunction writeInterstitialMessage( targetDocument ) {\n\tlet markup = renderToString(\n\t\t<div className=\"editor-post-preview-button__interstitial-message\">\n\t\t\t<SVG xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 96\">\n\t\t\t\t<Path\n\t\t\t\t\tclassName=\"outer\"\n\t\t\t\t\td=\"M48 12c19.9 0 36 16.1 36 36S67.9 84 48 84 12 67.9 12 48s16.1-36 36-36\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t/>\n\t\t\t\t<Path\n\t\t\t\t\tclassName=\"inner\"\n\t\t\t\t\td=\"M69.5 46.4c0-3.9-1.4-6.7-2.6-8.8-1.6-2.6-3.1-4.9-3.1-7.5 0-2.9 2.2-5.7 5.4-5.7h.4C63.9 19.2 56.4 16 48 16c-11.2 0-21 5.7-26.7 14.4h2.1c3.3 0 8.5-.4 8.5-.4 1.7-.1 1.9 2.4.2 2.6 0 0-1.7.2-3.7.3L40 67.5l7-20.9L42 33c-1.7-.1-3.3-.3-3.3-.3-1.7-.1-1.5-2.7.2-2.6 0 0 5.3.4 8.4.4 3.3 0 8.5-.4 8.5-.4 1.7-.1 1.9 2.4.2 2.6 0 0-1.7.2-3.7.3l11.5 34.3 3.3-10.4c1.6-4.5 2.4-7.8 2.4-10.5zM16.1 48c0 12.6 7.3 23.5 18 28.7L18.8 35c-1.7 4-2.7 8.4-2.7 13zm32.5 2.8L39 78.6c2.9.8 5.9 1.3 9 1.3 3.7 0 7.3-.6 10.6-1.8-.1-.1-.2-.3-.2-.4l-9.8-26.9zM76.2 36c0 3.2-.6 6.9-2.4 11.4L64 75.6c9.5-5.5 15.9-15.8 15.9-27.6 0-5.5-1.4-10.8-3.9-15.3.1 1 .2 2.1.2 3.3z\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t/>\n\t\t\t</SVG>\n\t\t\t<p>{ __( 'Generating preview\u2026' ) }</p>\n\t\t</div>\n\t);\n\n\tmarkup += `\n\t\t<style>\n\t\t\tbody {\n\t\t\t\tmargin: 0;\n\t\t\t}\n\t\t\t.editor-post-preview-button__interstitial-message {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\twidth: 100vw;\n\t\t\t}\n\t\t\t@-webkit-keyframes paint {\n\t\t\t\t0% {\n\t\t\t\t\tstroke-dashoffset: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t\t@-moz-keyframes paint {\n\t\t\t\t0% {\n\t\t\t\t\tstroke-dashoffset: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t\t@-o-keyframes paint {\n\t\t\t\t0% {\n\t\t\t\t\tstroke-dashoffset: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t\t@keyframes paint {\n\t\t\t\t0% {\n\t\t\t\t\tstroke-dashoffset: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t\t.editor-post-preview-button__interstitial-message svg {\n\t\t\t\twidth: 192px;\n\t\t\t\theight: 192px;\n\t\t\t\tstroke: #555d66;\n\t\t\t\tstroke-width: 0.75;\n\t\t\t}\n\t\t\t.editor-post-preview-button__interstitial-message svg .outer,\n\t\t\t.editor-post-preview-button__interstitial-message svg .inner {\n\t\t\t\tstroke-dasharray: 280;\n\t\t\t\tstroke-dashoffset: 280;\n\t\t\t\t-webkit-animation: paint 1.5s ease infinite alternate;\n\t\t\t\t-moz-animation: paint 1.5s ease infinite alternate;\n\t\t\t\t-o-animation: paint 1.5s ease infinite alternate;\n\t\t\t\tanimation: paint 1.5s ease infinite alternate;\n\t\t\t}\n\t\t\tp {\n\t\t\t\ttext-align: center;\n\t\t\t\tfont-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n\t\t\t}\n\t\t</style>\n\t`;\n\n\t/**\n\t * Filters the interstitial message shown when generating previews.\n\t *\n\t * @param {string} markup The preview interstitial markup.\n\t */\n\tmarkup = applyFilters( 'editor.PostPreview.interstitialMarkup', markup );\n\n\ttargetDocument.write( markup );\n\ttargetDocument.title = __( 'Generating preview\u2026' );\n\ttargetDocument.close();\n}\n\n/**\n * Renders a button that opens a new window or tab for the preview,\n * writes the interstitial message to this window, and then navigates\n * to the actual preview link. The button is not rendered if the post\n * is not viewable and disabled if the post is not saveable.\n *\n * @param {Object} props The component props.\n * @param {string} props.className The class name for the button.\n * @param {string} props.textContent The text content for the button.\n * @param {boolean} props.forceIsAutosaveable Whether to force autosave.\n * @param {string} props.role The role attribute for the button.\n * @param {Function} props.onPreview The callback function for preview event.\n *\n * @return {React.ReactNode} The rendered button component.\n */\nexport default function PostPreviewButton( {\n\tclassName,\n\ttextContent,\n\tforceIsAutosaveable,\n\trole,\n\tonPreview,\n} ) {\n\tconst { postId, currentPostLink, previewLink, isSaveable, isViewable } =\n\t\tuseSelect( ( select ) => {\n\t\t\tconst editor = select( editorStore );\n\t\t\tconst core = select( coreStore );\n\n\t\t\tconst postType = core.getPostType(\n\t\t\t\teditor.getCurrentPostType( 'type' )\n\t\t\t);\n\t\t\tconst canView = postType?.viewable ?? false;\n\t\t\tif ( ! canView ) {\n\t\t\t\treturn { isViewable: canView };\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tpostId: editor.getCurrentPostId(),\n\t\t\t\tcurrentPostLink: editor.getCurrentPostAttribute( 'link' ),\n\t\t\t\tpreviewLink: editor.getEditedPostPreviewLink(),\n\t\t\t\tisSaveable: editor.isEditedPostSaveable(),\n\t\t\t\tisViewable: canView,\n\t\t\t};\n\t\t}, [] );\n\n\tconst { __unstableSaveForPreview } = useDispatch( editorStore );\n\n\tif ( ! isViewable ) {\n\t\treturn null;\n\t}\n\n\tconst targetId = `wp-preview-${ postId }`;\n\n\tconst openPreviewWindow = async ( event ) => {\n\t\t// Our Preview button has its 'href' and 'target' set correctly for a11y\n\t\t// purposes. Unfortunately, though, we can't rely on the default 'click'\n\t\t// handler since sometimes it incorrectly opens a new tab instead of reusing\n\t\t// the existing one.\n\t\t// https://github.com/WordPress/gutenberg/pull/8330\n\t\tevent.preventDefault();\n\n\t\t// Open up a Preview tab if needed. This is where we'll show the preview.\n\t\tconst previewWindow = window.open( '', targetId );\n\n\t\t// Focus the Preview tab. This might not do anything, depending on the browser's\n\t\t// and user's preferences.\n\t\t// https://html.spec.whatwg.org/multipage/interaction.html#dom-window-focus\n\t\tpreviewWindow.focus();\n\n\t\twriteInterstitialMessage( previewWindow.document );\n\n\t\tconst link = await __unstableSaveForPreview( { forceIsAutosaveable } );\n\n\t\tpreviewWindow.location = link;\n\n\t\tonPreview?.();\n\t};\n\n\t// Link to the `?preview=true` URL if we have it, since this lets us see\n\t// changes that were autosaved since the post was last published. Otherwise,\n\t// just link to the post's URL.\n\tconst href = previewLink || currentPostLink;\n\n\treturn (\n\t\t<Button\n\t\t\tvariant={ ! className ? 'tertiary' : undefined }\n\t\t\tclassName={ className || 'editor-post-preview' }\n\t\t\thref={ href }\n\t\t\ttarget={ targetId }\n\t\t\taccessibleWhenDisabled\n\t\t\tdisabled={ ! isSaveable }\n\t\t\tonClick={ openPreviewWindow }\n\t\t\trole={ role }\n\t\t\tsize=\"compact\"\n\t\t>\n\t\t\t{ textContent || (\n\t\t\t\t<>\n\t\t\t\t\t{ _x( 'Preview', 'imperative verb' ) }\n\t\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t/* translators: accessibility text */\n\t\t\t\t\t\t\t__( '(opens in a new tab)' )\n\t\t\t\t\t\t}\n\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</Button>\n\t);\n}\n"],
"mappings": "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",
"names": ["editorStore", "coreStore"]
}