@wordpress/block-library 6.0.1-next.253d9b6e21.0 → 6.0.3

package/build-module/embed/embed-bottom-sheet.native.js

@@ -3,30 +3,16 @@ import { createElement } from "@wordpress/element";
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { LinkSettingsNavigation, FooterMessageLink } from '@wordpress/components';
 import { isURL } from '@wordpress/url';
 import { useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
 import { useCallback, useState } from '@wordpress/element';
-const linkSettingsOptions = {
-  url: {
-    label: __('Embed link'),
-    placeholder: __('Add link'),
-    autoFocus: true,
-    autoFill: true
-  },
-  footer: {
-    label: createElement(FooterMessageLink, {
-      href: __('https://wordpress.org/support/article/embeds/'),
-      value: __('Learn more about embeds')
-    }),
-    separatorType: 'topFullWidth'
-  }
-};
 
 const EmbedBottomSheet = ({
   value,
+  label,
   isVisible,
   onClose,
   onSubmit
@@ -35,6 +21,22 @@ const EmbedBottomSheet = ({
   const {
     createErrorNotice
   } = useDispatch(noticesStore);
+  const linkSettingsOptions = {
+    url: {
+      label: sprintf( // translators: %s: embed block variant's label e.g: "Twitter".
+      __('%s link'), label),
+      placeholder: __('Add link'),
+      autoFocus: true,
+      autoFill: true
+    },
+    footer: {
+      label: createElement(FooterMessageLink, {
+        href: __('https://wordpress.org/support/article/embeds/'),
+        value: __('Learn more about embeds')
+      }),
+      separatorType: 'topFullWidth'
+    }
+  };
   const onDismiss = useCallback(() => {
     if (url !== '') {
       if (isURL(url)) {
@@ -42,12 +44,10 @@ const EmbedBottomSheet = ({
       } else {
         createErrorNotice(__('Invalid URL. Please enter a valid URL.')); // If the URL was already defined, we submit it to stop showing the embed placeholder.
 
-        if (value !== '') {
-          onSubmit(value);
-        }
+        onSubmit(value);
       }
-    } else if (value !== '') {
-      // Resets the URL when new value is empty and URL was already defined.
+    } else {
+      // Resets the URL when new value is empty
       onSubmit('');
     }
   }, [url, onSubmit, value]);
@@ -63,6 +63,7 @@ const EmbedBottomSheet = ({
     onDismiss: onDismiss,
     setAttributes: setAttributes,
     options: linkSettingsOptions,
+    testID: "embed-edit-url-modal",
     withBottomSheet: true,
     showIcon: true
   });

package/build-module/embed/embed-bottom-sheet.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/embed/embed-bottom-sheet.native.js"],"names":["__","LinkSettingsNavigation","FooterMessageLink","isURL","useDispatch","store","noticesStore","useCallback","useState","linkSettingsOptions","url","label","placeholder","autoFocus","autoFill","footer","separatorType","EmbedBottomSheet","value","isVisible","onClose","onSubmit","setURL","createErrorNotice","onDismiss","setAttributes","attributes"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SACCC,sBADD,EAECC,iBAFD,QAGO,uBAHP;AAIA,SAASC,KAAT,QAAsB,gBAAtB;AACA,SAASC,WAAT,QAA4B,iBAA5B;AACA,SAASC,KAAK,IAAIC,YAAlB,QAAsC,oBAAtC;AACA,SAASC,WAAT,EAAsBC,QAAtB,QAAsC,oBAAtC;AAEA,MAAMC,mBAAmB,GAAG;AAC3BC,EAAAA,GAAG,EAAE;AACJC,IAAAA,KAAK,EAAEX,EAAE,CAAE,YAAF,CADL;AAEJY,IAAAA,WAAW,EAAEZ,EAAE,CAAE,UAAF,CAFX;AAGJa,IAAAA,SAAS,EAAE,IAHP;AAIJC,IAAAA,QAAQ,EAAE;AAJN,GADsB;AAO3BC,EAAAA,MAAM,EAAE;AACPJ,IAAAA,KAAK,EACJ,cAAC,iBAAD;AACC,MAAA,IAAI,EAAGX,EAAE,CAAE,+CAAF,CADV;AAEC,MAAA,KAAK,EAAGA,EAAE,CAAE,yBAAF;AAFX,MAFM;AAOPgB,IAAAA,aAAa,EAAE;AAPR;AAPmB,CAA5B;;AAkBA,MAAMC,gBAAgB,GAAG,CAAE;AAAEC,EAAAA,KAAF;AAASC,EAAAA,SAAT;AAAoBC,EAAAA,OAApB;AAA6BC,EAAAA;AAA7B,CAAF,KAA+C;AACvE,QAAM,CAAEX,GAAF,EAAOY,MAAP,IAAkBd,QAAQ,CAAEU,KAAF,CAAhC;AACA,QAAM;AAAEK,IAAAA;AAAF,MAAwBnB,WAAW,CAAEE,YAAF,CAAzC;AAEA,QAAMkB,SAAS,GAAGjB,WAAW,CAAE,MAAM;AACpC,QAAKG,GAAG,KAAK,EAAb,EAAkB;AACjB,UAAKP,KAAK,CAAEO,GAAF,CAAV,EAAoB;AACnBW,QAAAA,QAAQ,CAAEX,GAAF,CAAR;AACA,OAFD,MAEO;AACNa,QAAAA,iBAAiB,CAChBvB,EAAE,CAAE,wCAAF,CADc,CAAjB,CADM,CAIN;;AACA,YAAKkB,KAAK,KAAK,EAAf,EAAoB;AACnBG,UAAAA,QAAQ,CAAEH,KAAF,CAAR;AACA;AACD;AACD,KAZD,MAYO,IAAKA,KAAK,KAAK,EAAf,EAAoB;AAC1B;AACAG,MAAAA,QAAQ,CAAE,EAAF,CAAR;AACA;AACD,GAjB4B,EAiB1B,CAAEX,GAAF,EAAOW,QAAP,EAAiBH,KAAjB,CAjB0B,CAA7B;;AAmBA,WAASO,aAAT,CAAwBC,UAAxB,EAAqC;AACpCJ,IAAAA,MAAM,CAAEI,UAAU,CAAChB,GAAb,CAAN;AACA;;AAED,SACC,cAAC,sBAAD;AACC,IAAA,SAAS,EAAGS,SADb;AAEC,IAAA,GAAG,EAAGT,GAFP;AAGC,IAAA,OAAO,EAAGU,OAHX;AAIC,IAAA,SAAS,EAAGI,SAJb;AAKC,IAAA,aAAa,EAAGC,aALjB;AAMC,IAAA,OAAO,EAAGhB,mBANX;AAOC,IAAA,eAAe,MAPhB;AAQC,IAAA,QAAQ;AART,IADD;AAYA,CAvCD;;AAyCA,eAAeQ,gBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tLinkSettingsNavigation,\n\tFooterMessageLink,\n} from '@wordpress/components';\nimport { isURL } from '@wordpress/url';\nimport { useDispatch } from '@wordpress/data';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { useCallback, useState } from '@wordpress/element';\n\nconst linkSettingsOptions = {\n\turl: {\n\t\tlabel: __( 'Embed link' ),\n\t\tplaceholder: __( 'Add link' ),\n\t\tautoFocus: true,\n\t\tautoFill: true,\n\t},\n\tfooter: {\n\t\tlabel: (\n\t\t\t<FooterMessageLink\n\t\t\t\thref={ __( 'https://wordpress.org/support/article/embeds/' ) }\n\t\t\t\tvalue={ __( 'Learn more about embeds' ) }\n\t\t\t/>\n\t\t),\n\t\tseparatorType: 'topFullWidth',\n\t},\n};\n\nconst EmbedBottomSheet = ( { value, isVisible, onClose, onSubmit } ) => {\n\tconst [ url, setURL ] = useState( value );\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\n\tconst onDismiss = useCallback( () => {\n\t\tif ( url !== '' ) {\n\t\t\tif ( isURL( url ) ) {\n\t\t\t\tonSubmit( url );\n\t\t\t} else {\n\t\t\t\tcreateErrorNotice(\n\t\t\t\t\t__( 'Invalid URL. Please enter a valid URL.' )\n\t\t\t\t);\n\t\t\t\t// If the URL was already defined, we submit it to stop showing the embed placeholder.\n\t\t\t\tif ( value !== '' ) {\n\t\t\t\t\tonSubmit( value );\n\t\t\t\t}\n\t\t\t}\n\t\t} else if ( value !== '' ) {\n\t\t\t// Resets the URL when new value is empty and URL was already defined.\n\t\t\tonSubmit( '' );\n\t\t}\n\t}, [ url, onSubmit, value ] );\n\n\tfunction setAttributes( attributes ) {\n\t\tsetURL( attributes.url );\n\t}\n\n\treturn (\n\t\t<LinkSettingsNavigation\n\t\t\tisVisible={ isVisible }\n\t\t\turl={ url }\n\t\t\tonClose={ onClose }\n\t\t\tonDismiss={ onDismiss }\n\t\t\tsetAttributes={ setAttributes }\n\t\t\toptions={ linkSettingsOptions }\n\t\t\twithBottomSheet\n\t\t\tshowIcon\n\t\t/>\n\t);\n};\n\nexport default EmbedBottomSheet;\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/embed/embed-bottom-sheet.native.js"],"names":["__","sprintf","LinkSettingsNavigation","FooterMessageLink","isURL","useDispatch","store","noticesStore","useCallback","useState","EmbedBottomSheet","value","label","isVisible","onClose","onSubmit","url","setURL","createErrorNotice","linkSettingsOptions","placeholder","autoFocus","autoFill","footer","separatorType","onDismiss","setAttributes","attributes"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,EAAaC,OAAb,QAA4B,iBAA5B;AACA,SACCC,sBADD,EAECC,iBAFD,QAGO,uBAHP;AAIA,SAASC,KAAT,QAAsB,gBAAtB;AACA,SAASC,WAAT,QAA4B,iBAA5B;AACA,SAASC,KAAK,IAAIC,YAAlB,QAAsC,oBAAtC;AACA,SAASC,WAAT,EAAsBC,QAAtB,QAAsC,oBAAtC;;AAEA,MAAMC,gBAAgB,GAAG,CAAE;AAAEC,EAAAA,KAAF;AAASC,EAAAA,KAAT;AAAgBC,EAAAA,SAAhB;AAA2BC,EAAAA,OAA3B;AAAoCC,EAAAA;AAApC,CAAF,KAAsD;AAC9E,QAAM,CAAEC,GAAF,EAAOC,MAAP,IAAkBR,QAAQ,CAAEE,KAAF,CAAhC;AACA,QAAM;AAAEO,IAAAA;AAAF,MAAwBb,WAAW,CAAEE,YAAF,CAAzC;AAEA,QAAMY,mBAAmB,GAAG;AAC3BH,IAAAA,GAAG,EAAE;AACJJ,MAAAA,KAAK,EAAEX,OAAO,EACb;AACAD,MAAAA,EAAE,CAAE,SAAF,CAFW,EAGbY,KAHa,CADV;AAMJQ,MAAAA,WAAW,EAAEpB,EAAE,CAAE,UAAF,CANX;AAOJqB,MAAAA,SAAS,EAAE,IAPP;AAQJC,MAAAA,QAAQ,EAAE;AARN,KADsB;AAW3BC,IAAAA,MAAM,EAAE;AACPX,MAAAA,KAAK,EACJ,cAAC,iBAAD;AACC,QAAA,IAAI,EAAGZ,EAAE,CACR,+CADQ,CADV;AAIC,QAAA,KAAK,EAAGA,EAAE,CAAE,yBAAF;AAJX,QAFM;AASPwB,MAAAA,aAAa,EAAE;AATR;AAXmB,GAA5B;AAwBA,QAAMC,SAAS,GAAGjB,WAAW,CAAE,MAAM;AACpC,QAAKQ,GAAG,KAAK,EAAb,EAAkB;AACjB,UAAKZ,KAAK,CAAEY,GAAF,CAAV,EAAoB;AACnBD,QAAAA,QAAQ,CAAEC,GAAF,CAAR;AACA,OAFD,MAEO;AACNE,QAAAA,iBAAiB,CAChBlB,EAAE,CAAE,wCAAF,CADc,CAAjB,CADM,CAIN;;AACAe,QAAAA,QAAQ,CAAEJ,KAAF,CAAR;AACA;AACD,KAVD,MAUO;AACN;AACAI,MAAAA,QAAQ,CAAE,EAAF,CAAR;AACA;AACD,GAf4B,EAe1B,CAAEC,GAAF,EAAOD,QAAP,EAAiBJ,KAAjB,CAf0B,CAA7B;;AAiBA,WAASe,aAAT,CAAwBC,UAAxB,EAAqC;AACpCV,IAAAA,MAAM,CAAEU,UAAU,CAACX,GAAb,CAAN;AACA;;AAED,SACC,cAAC,sBAAD;AACC,IAAA,SAAS,EAAGH,SADb;AAEC,IAAA,GAAG,EAAGG,GAFP;AAGC,IAAA,OAAO,EAAGF,OAHX;AAIC,IAAA,SAAS,EAAGW,SAJb;AAKC,IAAA,aAAa,EAAGC,aALjB;AAMC,IAAA,OAAO,EAAGP,mBANX;AAOC,IAAA,MAAM,EAAC,sBAPR;AAQC,IAAA,eAAe,MARhB;AASC,IAAA,QAAQ;AATT,IADD;AAaA,CA9DD;;AAgEA,eAAeT,gBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tLinkSettingsNavigation,\n\tFooterMessageLink,\n} from '@wordpress/components';\nimport { isURL } from '@wordpress/url';\nimport { useDispatch } from '@wordpress/data';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { useCallback, useState } from '@wordpress/element';\n\nconst EmbedBottomSheet = ( { value, label, isVisible, onClose, onSubmit } ) => {\n\tconst [ url, setURL ] = useState( value );\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\n\tconst linkSettingsOptions = {\n\t\turl: {\n\t\t\tlabel: sprintf(\n\t\t\t\t// translators: %s: embed block variant's label e.g: \"Twitter\".\n\t\t\t\t__( '%s link' ),\n\t\t\t\tlabel\n\t\t\t),\n\t\t\tplaceholder: __( 'Add link' ),\n\t\t\tautoFocus: true,\n\t\t\tautoFill: true,\n\t\t},\n\t\tfooter: {\n\t\t\tlabel: (\n\t\t\t\t<FooterMessageLink\n\t\t\t\t\thref={ __(\n\t\t\t\t\t\t'https://wordpress.org/support/article/embeds/'\n\t\t\t\t\t) }\n\t\t\t\t\tvalue={ __( 'Learn more about embeds' ) }\n\t\t\t\t/>\n\t\t\t),\n\t\t\tseparatorType: 'topFullWidth',\n\t\t},\n\t};\n\n\tconst onDismiss = useCallback( () => {\n\t\tif ( url !== '' ) {\n\t\t\tif ( isURL( url ) ) {\n\t\t\t\tonSubmit( url );\n\t\t\t} else {\n\t\t\t\tcreateErrorNotice(\n\t\t\t\t\t__( 'Invalid URL. Please enter a valid URL.' )\n\t\t\t\t);\n\t\t\t\t// If the URL was already defined, we submit it to stop showing the embed placeholder.\n\t\t\t\tonSubmit( value );\n\t\t\t}\n\t\t} else {\n\t\t\t// Resets the URL when new value is empty\n\t\t\tonSubmit( '' );\n\t\t}\n\t}, [ url, onSubmit, value ] );\n\n\tfunction setAttributes( attributes ) {\n\t\tsetURL( attributes.url );\n\t}\n\n\treturn (\n\t\t<LinkSettingsNavigation\n\t\t\tisVisible={ isVisible }\n\t\t\turl={ url }\n\t\t\tonClose={ onClose }\n\t\t\tonDismiss={ onDismiss }\n\t\t\tsetAttributes={ setAttributes }\n\t\t\toptions={ linkSettingsOptions }\n\t\t\ttestID=\"embed-edit-url-modal\"\n\t\t\twithBottomSheet\n\t\t\tshowIcon\n\t\t/>\n\t);\n};\n\nexport default EmbedBottomSheet;\n"]}

package/build-module/embed/embed-controls.js

@@ -8,12 +8,15 @@ import { ToolbarButton, PanelBody, ToggleControl, ToolbarGroup } from '@wordpres
 import { BlockControls, InspectorControls } from '@wordpress/block-editor';
 import { edit } from '@wordpress/icons';
 
+function getResponsiveHelp(checked) {
+  return checked ? __('This embed will preserve its aspect ratio when the browser is resized.') : __('This embed may not preserve its aspect ratio when the browser is resized.');
+}
+
 const EmbedControls = ({
   blockSupportsResponsive,
   showEditButton,
   themeSupportsResponsive,
   allowResponsive,
-  getResponsiveHelp,
   toggleResponsive,
   switchBackToURLInput
 }) => createElement(Fragment, null, createElement(BlockControls, null, createElement(ToolbarGroup, null, showEditButton && createElement(ToolbarButton, {

package/build-module/embed/embed-controls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/embed/embed-controls.js"],"names":["__","ToolbarButton","PanelBody","ToggleControl","ToolbarGroup","BlockControls","InspectorControls","edit","EmbedControls","blockSupportsResponsive","showEditButton","themeSupportsResponsive","allowResponsive","getResponsiveHelp","toggleResponsive","switchBackToURLInput"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SACCC,aADD,EAECC,SAFD,EAGCC,aAHD,EAICC,YAJD,QAKO,uBALP;AAMA,SAASC,aAAT,EAAwBC,iBAAxB,QAAiD,yBAAjD;AACA,SAASC,IAAT,QAAqB,kBAArB;;AAEA,MAAMC,aAAa,GAAG,CAAE;AACvBC,EAAAA,uBADuB;AAEvBC,EAAAA,cAFuB;AAGvBC,EAAAA,uBAHuB;AAIvBC,EAAAA,eAJuB;AAKvBC,EAAAA,iBALuB;AAMvBC,EAAAA,gBANuB;AAOvBC,EAAAA;AAPuB,CAAF,KASrB,8BACC,cAAC,aAAD,QACC,cAAC,YAAD,QACGL,cAAc,IACf,cAAC,aAAD;AACC,EAAA,SAAS,EAAC,6BADX;AAEC,EAAA,KAAK,EAAGV,EAAE,CAAE,UAAF,CAFX;AAGC,EAAA,IAAI,EAAGO,IAHR;AAIC,EAAA,OAAO,EAAGQ;AAJX,EAFF,CADD,CADD,EAaGJ,uBAAuB,IAAIF,uBAA3B,IACD,cAAC,iBAAD,QACC,cAAC,SAAD;AACC,EAAA,KAAK,EAAGT,EAAE,CAAE,gBAAF,CADX;AAEC,EAAA,SAAS,EAAC;AAFX,GAIC,cAAC,aAAD;AACC,EAAA,KAAK,EAAGA,EAAE,CAAE,4BAAF,CADX;AAEC,EAAA,OAAO,EAAGY,eAFX;AAGC,EAAA,IAAI,EAAGC,iBAHR;AAIC,EAAA,QAAQ,EAAGC;AAJZ,EAJD,CADD,CAdF,CATD;;AAwCA,eAAeN,aAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tToolbarButton,\n\tPanelBody,\n\tToggleControl,\n\tToolbarGroup,\n} from '@wordpress/components';\nimport { BlockControls, InspectorControls } from '@wordpress/block-editor';\nimport { edit } from '@wordpress/icons';\n\nconst EmbedControls = ( {\n\tblockSupportsResponsive,\n\tshowEditButton,\n\tthemeSupportsResponsive,\n\tallowResponsive,\n\tgetResponsiveHelp,\n\ttoggleResponsive,\n\tswitchBackToURLInput,\n} ) => (\n\t<>\n\t\t<BlockControls>\n\t\t\t<ToolbarGroup>\n\t\t\t\t{ showEditButton && (\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tclassName=\"components-toolbar__control\"\n\t\t\t\t\t\tlabel={ __( 'Edit URL' ) }\n\t\t\t\t\t\ticon={ edit }\n\t\t\t\t\t\tonClick={ switchBackToURLInput }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</ToolbarGroup>\n\t\t</BlockControls>\n\t\t{ themeSupportsResponsive && blockSupportsResponsive && (\n\t\t\t<InspectorControls>\n\t\t\t\t<PanelBody\n\t\t\t\t\ttitle={ __( 'Media settings' ) }\n\t\t\t\t\tclassName=\"blocks-responsive\"\n\t\t\t\t>\n\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Resize for smaller devices' ) }\n\t\t\t\t\t\tchecked={ allowResponsive }\n\t\t\t\t\t\thelp={ getResponsiveHelp }\n\t\t\t\t\t\tonChange={ toggleResponsive }\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t</InspectorControls>\n\t\t) }\n\t</>\n);\n\nexport default EmbedControls;\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/embed/embed-controls.js"],"names":["__","ToolbarButton","PanelBody","ToggleControl","ToolbarGroup","BlockControls","InspectorControls","edit","getResponsiveHelp","checked","EmbedControls","blockSupportsResponsive","showEditButton","themeSupportsResponsive","allowResponsive","toggleResponsive","switchBackToURLInput"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SACCC,aADD,EAECC,SAFD,EAGCC,aAHD,EAICC,YAJD,QAKO,uBALP;AAMA,SAASC,aAAT,EAAwBC,iBAAxB,QAAiD,yBAAjD;AACA,SAASC,IAAT,QAAqB,kBAArB;;AAEA,SAASC,iBAAT,CAA4BC,OAA5B,EAAsC;AACrC,SAAOA,OAAO,GACXT,EAAE,CACF,wEADE,CADS,GAIXA,EAAE,CACF,2EADE,CAJL;AAOA;;AAED,MAAMU,aAAa,GAAG,CAAE;AACvBC,EAAAA,uBADuB;AAEvBC,EAAAA,cAFuB;AAGvBC,EAAAA,uBAHuB;AAIvBC,EAAAA,eAJuB;AAKvBC,EAAAA,gBALuB;AAMvBC,EAAAA;AANuB,CAAF,KAQrB,8BACC,cAAC,aAAD,QACC,cAAC,YAAD,QACGJ,cAAc,IACf,cAAC,aAAD;AACC,EAAA,SAAS,EAAC,6BADX;AAEC,EAAA,KAAK,EAAGZ,EAAE,CAAE,UAAF,CAFX;AAGC,EAAA,IAAI,EAAGO,IAHR;AAIC,EAAA,OAAO,EAAGS;AAJX,EAFF,CADD,CADD,EAaGH,uBAAuB,IAAIF,uBAA3B,IACD,cAAC,iBAAD,QACC,cAAC,SAAD;AACC,EAAA,KAAK,EAAGX,EAAE,CAAE,gBAAF,CADX;AAEC,EAAA,SAAS,EAAC;AAFX,GAIC,cAAC,aAAD;AACC,EAAA,KAAK,EAAGA,EAAE,CAAE,4BAAF,CADX;AAEC,EAAA,OAAO,EAAGc,eAFX;AAGC,EAAA,IAAI,EAAGN,iBAHR;AAIC,EAAA,QAAQ,EAAGO;AAJZ,EAJD,CADD,CAdF,CARD;;AAuCA,eAAeL,aAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tToolbarButton,\n\tPanelBody,\n\tToggleControl,\n\tToolbarGroup,\n} from '@wordpress/components';\nimport { BlockControls, InspectorControls } from '@wordpress/block-editor';\nimport { edit } from '@wordpress/icons';\n\nfunction getResponsiveHelp( checked ) {\n\treturn checked\n\t\t? __(\n\t\t\t\t'This embed will preserve its aspect ratio when the browser is resized.'\n\t\t  )\n\t\t: __(\n\t\t\t\t'This embed may not preserve its aspect ratio when the browser is resized.'\n\t\t  );\n}\n\nconst EmbedControls = ( {\n\tblockSupportsResponsive,\n\tshowEditButton,\n\tthemeSupportsResponsive,\n\tallowResponsive,\n\ttoggleResponsive,\n\tswitchBackToURLInput,\n} ) => (\n\t<>\n\t\t<BlockControls>\n\t\t\t<ToolbarGroup>\n\t\t\t\t{ showEditButton && (\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tclassName=\"components-toolbar__control\"\n\t\t\t\t\t\tlabel={ __( 'Edit URL' ) }\n\t\t\t\t\t\ticon={ edit }\n\t\t\t\t\t\tonClick={ switchBackToURLInput }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</ToolbarGroup>\n\t\t</BlockControls>\n\t\t{ themeSupportsResponsive && blockSupportsResponsive && (\n\t\t\t<InspectorControls>\n\t\t\t\t<PanelBody\n\t\t\t\t\ttitle={ __( 'Media settings' ) }\n\t\t\t\t\tclassName=\"blocks-responsive\"\n\t\t\t\t>\n\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Resize for smaller devices' ) }\n\t\t\t\t\t\tchecked={ allowResponsive }\n\t\t\t\t\t\thelp={ getResponsiveHelp }\n\t\t\t\t\t\tonChange={ toggleResponsive }\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t</InspectorControls>\n\t\t) }\n\t</>\n);\n\nexport default EmbedControls;\n"]}

package/build-module/embed/embed-no-preview.native.js

@@ -9,7 +9,7 @@ import { TouchableOpacity, TouchableWithoutFeedback, Text } from 'react-native';
  */
 
 import { View } from '@wordpress/primitives';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useRef, useState } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { requestPreview } from '@wordpress/react-native-bridge';
@@ -17,6 +17,7 @@ import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
 import { BottomSheet, Icon, TextControl } from '@wordpress/components';
 import { help } from '@wordpress/icons';
+import { BlockIcon } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
@@ -27,7 +28,9 @@ const EmbedNoPreview = ({
   label,
   icon,
   isSelected,
-  onPress
+  onPress,
+  previewable,
+  isDefaultEmbedInfo
 }) => {
   const shouldRequestReview = useRef(false);
   const [isSheetVisible, setIsSheetVisible] = useState(false);
@@ -38,7 +41,6 @@ const EmbedNoPreview = ({
   }));
   const containerStyle = usePreferredColorSchemeStyle(styles.embed__container, styles['embed__container--dark']);
   const labelStyle = usePreferredColorSchemeStyle(styles.embed__label, styles['embed__label--dark']);
-  const embedIconStyle = usePreferredColorSchemeStyle(styles.embed__icon, styles['embed__icon--dark']);
   const descriptionStyle = usePreferredColorSchemeStyle(styles.embed__description, styles['embed__description--dark']);
   const helpIconStyle = usePreferredColorSchemeStyle(styles['embed-no-preview__help-icon'], styles['embed-no-preview__help-icon--dark']);
   const sheetIconStyle = usePreferredColorSchemeStyle(styles['embed-no-preview__sheet-icon'], styles['embed-no-preview__sheet-icon--dark']);
@@ -47,7 +49,9 @@ const EmbedNoPreview = ({
   const sheetButtonStyle = usePreferredColorSchemeStyle(styles['embed-no-preview__sheet-button'], styles['embed-no-preview__sheet-button--dark']);
   const previewButtonA11yHint = postType === 'page' ? __('Double tap to preview page.') : __('Double tap to preview post.');
   const previewButtonText = postType === 'page' ? __('Preview page') : __('Preview post');
-  const comingSoonDescription = postType === 'page' ? __('We’re working hard on adding support for embed previews. In the meantime, you can preview the embedded content on the page.') : __('We’re working hard on adding support for embed previews. In the meantime, you can preview the embedded content on the post.');
+  const comingSoonDescription = postType === 'page' ? sprintf( // translators: %s: embed block variant's label e.g: "Twitter".
+  __('We’re working hard on adding support for %s previews. In the meantime, you can preview the embedded content on the page.'), label) : sprintf( // translators: %s: embed block variant's label e.g: "Twitter".
+  __('We’re working hard on adding support for %s previews. In the meantime, you can preview the embedded content on the post.'), label);
 
   function onOpenSheet() {
     setIsSheetVisible(true);
@@ -76,21 +80,21 @@ const EmbedNoPreview = ({
     onPressContainer();
   }
 
-  return createElement(Fragment, null, createElement(TouchableWithoutFeedback, {
+  const embedNoProviderPreview = createElement(Fragment, null, createElement(TouchableWithoutFeedback, {
     accessibilityRole: 'button',
     accessibilityHint: previewButtonA11yHint,
     disabled: !isSelected,
     onPress: onPressContainer
   }, createElement(View, {
     style: containerStyle
-  }, createElement(Icon, {
-    icon: icon,
-    fill: embedIconStyle.fill
+  }, createElement(BlockIcon, {
+    icon: icon
   }), createElement(Text, {
     style: labelStyle
   }, label), createElement(Text, {
     style: descriptionStyle
-  }, __('Embed previews not yet available')), createElement(Text, {
+  }, sprintf( // translators: %s: embed block variant's label e.g: "Twitter".
+  __('%s previews not yet available'), label)), createElement(Text, {
     style: styles.embed__action
   }, previewButtonText.toUpperCase()), createElement(TouchableOpacity, {
     accessibilityHint: __('Tap here to show help'),
@@ -107,7 +111,8 @@ const EmbedNoPreview = ({
     isVisible: isSheetVisible,
     hideHeader: true,
     onDismiss: onDismissSheet,
-    onClose: onCloseSheet
+    onClose: onCloseSheet,
+    testID: "embed-no-preview-modal"
   }, createElement(View, {
     style: styles['embed-no-preview__container']
   }, createElement(View, {
@@ -118,7 +123,8 @@ const EmbedNoPreview = ({
     size: sheetIconStyle.width
   })), createElement(Text, {
     style: sheetTitleStyle
-  }, __('Embed block previews are coming soon')), createElement(Text, {
+  }, isDefaultEmbedInfo ? __('Embed block previews are coming soon') : sprintf( // translators: %s: embed block variant's label e.g: "Twitter".
+  __('%s embed block previews are coming soon'), label)), createElement(Text, {
     style: sheetDescriptionStyle
   }, comingSoonDescription)), createElement(TextControl, {
     label: previewButtonText,
@@ -134,6 +140,13 @@ const EmbedNoPreview = ({
     onPress: onCloseSheet,
     labelStyle: sheetButtonStyle
   })));
+  return createElement(Fragment, null, previewable ? embedNoProviderPreview : createElement(View, {
+    style: containerStyle
+  }, createElement(BlockIcon, {
+    icon: icon
+  }), createElement(Text, {
+    style: labelStyle
+  }, __('No preview available'))));
 };
 
 export default EmbedNoPreview;

package/build-module/embed/embed-no-preview.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/embed/embed-no-preview.native.js"],"names":["TouchableOpacity","TouchableWithoutFeedback","Text","View","__","useRef","useState","usePreferredColorSchemeStyle","requestPreview","useSelect","store","editorStore","BottomSheet","Icon","TextControl","help","styles","EmbedNoPreview","label","icon","isSelected","onPress","shouldRequestReview","isSheetVisible","setIsSheetVisible","postType","select","getEditedPostAttribute","containerStyle","embed__container","labelStyle","embed__label","embedIconStyle","embed__icon","descriptionStyle","embed__description","helpIconStyle","sheetIconStyle","sheetTitleStyle","sheetDescriptionStyle","sheetButtonStyle","previewButtonA11yHint","previewButtonText","comingSoonDescription","onOpenSheet","onCloseSheet","onDismissSheet","current","onPressContainer","onPressHelp","fill","embed__action","toUpperCase","width"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { TouchableOpacity, TouchableWithoutFeedback, Text } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { View } from '@wordpress/primitives';\n\nimport { __ } from '@wordpress/i18n';\nimport { useRef, useState } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { requestPreview } from '@wordpress/react-native-bridge';\nimport { useSelect } from '@wordpress/data';\nimport { store as editorStore } from '@wordpress/editor';\nimport { BottomSheet, Icon, TextControl } from '@wordpress/components';\nimport { help } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport styles from './styles.scss';\n\nconst EmbedNoPreview = ( { label, icon, isSelected, onPress } ) => {\n\tconst shouldRequestReview = useRef( false );\n\tconst [ isSheetVisible, setIsSheetVisible ] = useState( false );\n\n\tconst { postType } = useSelect( ( select ) => ( {\n\t\tpostType: select( editorStore ).getEditedPostAttribute( 'type' ),\n\t} ) );\n\n\tconst containerStyle = usePreferredColorSchemeStyle(\n\t\tstyles.embed__container,\n\t\tstyles[ 'embed__container--dark' ]\n\t);\n\tconst labelStyle = usePreferredColorSchemeStyle(\n\t\tstyles.embed__label,\n\t\tstyles[ 'embed__label--dark' ]\n\t);\n\tconst embedIconStyle = usePreferredColorSchemeStyle(\n\t\tstyles.embed__icon,\n\t\tstyles[ 'embed__icon--dark' ]\n\t);\n\tconst descriptionStyle = usePreferredColorSchemeStyle(\n\t\tstyles.embed__description,\n\t\tstyles[ 'embed__description--dark' ]\n\t);\n\tconst helpIconStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'embed-no-preview__help-icon' ],\n\t\tstyles[ 'embed-no-preview__help-icon--dark' ]\n\t);\n\n\tconst sheetIconStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'embed-no-preview__sheet-icon' ],\n\t\tstyles[ 'embed-no-preview__sheet-icon--dark' ]\n\t);\n\tconst sheetTitleStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'embed-no-preview__sheet-title' ],\n\t\tstyles[ 'embed-no-preview__sheet-title--dark' ]\n\t);\n\tconst sheetDescriptionStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'embed-no-preview__sheet-description' ],\n\t\tstyles[ 'embed-no-preview__sheet-description--dark' ]\n\t);\n\tconst sheetButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'embed-no-preview__sheet-button' ],\n\t\tstyles[ 'embed-no-preview__sheet-button--dark' ]\n\t);\n\n\tconst previewButtonA11yHint =\n\t\tpostType === 'page'\n\t\t\t? __( 'Double tap to preview page.' )\n\t\t\t: __( 'Double tap to preview post.' );\n\tconst previewButtonText =\n\t\tpostType === 'page' ? __( 'Preview page' ) : __( 'Preview post' );\n\tconst comingSoonDescription =\n\t\tpostType === 'page'\n\t\t\t? __(\n\t\t\t\t\t'We’re working hard on adding support for embed previews. In the meantime, you can preview the embedded content on the page.'\n\t\t\t  )\n\t\t\t: __(\n\t\t\t\t\t'We’re working hard on adding support for embed previews. In the meantime, you can preview the embedded content on the post.'\n\t\t\t  );\n\n\tfunction onOpenSheet() {\n\t\tsetIsSheetVisible( true );\n\t}\n\n\tfunction onCloseSheet() {\n\t\tsetIsSheetVisible( false );\n\t}\n\n\tfunction onDismissSheet() {\n\t\t// The preview request has to be done after the bottom sheet modal is dismissed,\n\t\t// otherwise the preview native modal is not displayed.\n\t\tif ( shouldRequestReview.current ) {\n\t\t\trequestPreview();\n\t\t}\n\t\tshouldRequestReview.current = false;\n\t}\n\n\tfunction onPressContainer() {\n\t\tonPress();\n\t\tonOpenSheet();\n\t}\n\n\tfunction onPressHelp() {\n\t\tonPressContainer();\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<TouchableWithoutFeedback\n\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\taccessibilityHint={ previewButtonA11yHint }\n\t\t\t\tdisabled={ ! isSelected }\n\t\t\t\tonPress={ onPressContainer }\n\t\t\t>\n\t\t\t\t<View style={ containerStyle }>\n\t\t\t\t\t<Icon icon={ icon } fill={ embedIconStyle.fill } />\n\t\t\t\t\t<Text style={ labelStyle }>{ label }</Text>\n\t\t\t\t\t<Text style={ descriptionStyle }>\n\t\t\t\t\t\t{ __( 'Embed previews not yet available' ) }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<Text style={ styles.embed__action }>\n\t\t\t\t\t\t{ previewButtonText.toUpperCase() }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<TouchableOpacity\n\t\t\t\t\t\taccessibilityHint={ __( 'Tap here to show help' ) }\n\t\t\t\t\t\taccessibilityLabel={ __( 'Help button' ) }\n\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\tdisabled={ ! isSelected }\n\t\t\t\t\t\tonPress={ onPressHelp }\n\t\t\t\t\t\tstyle={ helpIconStyle }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ help }\n\t\t\t\t\t\t\tfill={ helpIconStyle.fill }\n\t\t\t\t\t\t\tsize={ helpIconStyle.width }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</TouchableOpacity>\n\t\t\t\t</View>\n\t\t\t</TouchableWithoutFeedback>\n\t\t\t<BottomSheet\n\t\t\t\tisVisible={ isSheetVisible }\n\t\t\t\thideHeader\n\t\t\t\tonDismiss={ onDismissSheet }\n\t\t\t\tonClose={ onCloseSheet }\n\t\t\t>\n\t\t\t\t<View style={ styles[ 'embed-no-preview__container' ] }>\n\t\t\t\t\t<View style={ sheetIconStyle }>\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ help }\n\t\t\t\t\t\t\tfill={ sheetIconStyle.fill }\n\t\t\t\t\t\t\tsize={ sheetIconStyle.width }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</View>\n\t\t\t\t\t<Text style={ sheetTitleStyle }>\n\t\t\t\t\t\t{ __( 'Embed block previews are coming soon' ) }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<Text style={ sheetDescriptionStyle }>\n\t\t\t\t\t\t{ comingSoonDescription }\n\t\t\t\t\t</Text>\n\t\t\t\t</View>\n\t\t\t\t<TextControl\n\t\t\t\t\tlabel={ previewButtonText }\n\t\t\t\t\tseparatorType=\"topFullWidth\"\n\t\t\t\t\tonPress={ () => {\n\t\t\t\t\t\tshouldRequestReview.current = true;\n\t\t\t\t\t\tonCloseSheet();\n\t\t\t\t\t} }\n\t\t\t\t\tlabelStyle={ sheetButtonStyle }\n\t\t\t\t/>\n\t\t\t\t<TextControl\n\t\t\t\t\tlabel={ __( 'Dismiss' ) }\n\t\t\t\t\tseparatorType=\"topFullWidth\"\n\t\t\t\t\tonPress={ onCloseSheet }\n\t\t\t\t\tlabelStyle={ sheetButtonStyle }\n\t\t\t\t/>\n\t\t\t</BottomSheet>\n\t\t</>\n\t);\n};\n\nexport default EmbedNoPreview;\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/embed/embed-no-preview.native.js"],"names":["TouchableOpacity","TouchableWithoutFeedback","Text","View","__","sprintf","useRef","useState","usePreferredColorSchemeStyle","requestPreview","useSelect","store","editorStore","BottomSheet","Icon","TextControl","help","BlockIcon","styles","EmbedNoPreview","label","icon","isSelected","onPress","previewable","isDefaultEmbedInfo","shouldRequestReview","isSheetVisible","setIsSheetVisible","postType","select","getEditedPostAttribute","containerStyle","embed__container","labelStyle","embed__label","descriptionStyle","embed__description","helpIconStyle","sheetIconStyle","sheetTitleStyle","sheetDescriptionStyle","sheetButtonStyle","previewButtonA11yHint","previewButtonText","comingSoonDescription","onOpenSheet","onCloseSheet","onDismissSheet","current","onPressContainer","onPressHelp","embedNoProviderPreview","embed__action","toUpperCase","fill","width"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { TouchableOpacity, TouchableWithoutFeedback, Text } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { View } from '@wordpress/primitives';\n\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useRef, useState } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { requestPreview } from '@wordpress/react-native-bridge';\nimport { useSelect } from '@wordpress/data';\nimport { store as editorStore } from '@wordpress/editor';\nimport { BottomSheet, Icon, TextControl } from '@wordpress/components';\nimport { help } from '@wordpress/icons';\nimport { BlockIcon } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport styles from './styles.scss';\n\nconst EmbedNoPreview = ( {\n\tlabel,\n\ticon,\n\tisSelected,\n\tonPress,\n\tpreviewable,\n\tisDefaultEmbedInfo,\n} ) => {\n\tconst shouldRequestReview = useRef( false );\n\tconst [ isSheetVisible, setIsSheetVisible ] = useState( false );\n\n\tconst { postType } = useSelect( ( select ) => ( {\n\t\tpostType: select( editorStore ).getEditedPostAttribute( 'type' ),\n\t} ) );\n\n\tconst containerStyle = usePreferredColorSchemeStyle(\n\t\tstyles.embed__container,\n\t\tstyles[ 'embed__container--dark' ]\n\t);\n\tconst labelStyle = usePreferredColorSchemeStyle(\n\t\tstyles.embed__label,\n\t\tstyles[ 'embed__label--dark' ]\n\t);\n\tconst descriptionStyle = usePreferredColorSchemeStyle(\n\t\tstyles.embed__description,\n\t\tstyles[ 'embed__description--dark' ]\n\t);\n\tconst helpIconStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'embed-no-preview__help-icon' ],\n\t\tstyles[ 'embed-no-preview__help-icon--dark' ]\n\t);\n\n\tconst sheetIconStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'embed-no-preview__sheet-icon' ],\n\t\tstyles[ 'embed-no-preview__sheet-icon--dark' ]\n\t);\n\tconst sheetTitleStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'embed-no-preview__sheet-title' ],\n\t\tstyles[ 'embed-no-preview__sheet-title--dark' ]\n\t);\n\tconst sheetDescriptionStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'embed-no-preview__sheet-description' ],\n\t\tstyles[ 'embed-no-preview__sheet-description--dark' ]\n\t);\n\tconst sheetButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'embed-no-preview__sheet-button' ],\n\t\tstyles[ 'embed-no-preview__sheet-button--dark' ]\n\t);\n\n\tconst previewButtonA11yHint =\n\t\tpostType === 'page'\n\t\t\t? __( 'Double tap to preview page.' )\n\t\t\t: __( 'Double tap to preview post.' );\n\tconst previewButtonText =\n\t\tpostType === 'page' ? __( 'Preview page' ) : __( 'Preview post' );\n\tconst comingSoonDescription =\n\t\tpostType === 'page'\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: embed block variant's label e.g: \"Twitter\".\n\t\t\t\t\t__(\n\t\t\t\t\t\t'We’re working hard on adding support for %s previews. In the meantime, you can preview the embedded content on the page.'\n\t\t\t\t\t),\n\t\t\t\t\tlabel\n\t\t\t  )\n\t\t\t: sprintf(\n\t\t\t\t\t// translators: %s: embed block variant's label e.g: \"Twitter\".\n\t\t\t\t\t__(\n\t\t\t\t\t\t'We’re working hard on adding support for %s previews. In the meantime, you can preview the embedded content on the post.'\n\t\t\t\t\t),\n\t\t\t\t\tlabel\n\t\t\t  );\n\n\tfunction onOpenSheet() {\n\t\tsetIsSheetVisible( true );\n\t}\n\n\tfunction onCloseSheet() {\n\t\tsetIsSheetVisible( false );\n\t}\n\n\tfunction onDismissSheet() {\n\t\t// The preview request has to be done after the bottom sheet modal is dismissed,\n\t\t// otherwise the preview native modal is not displayed.\n\t\tif ( shouldRequestReview.current ) {\n\t\t\trequestPreview();\n\t\t}\n\t\tshouldRequestReview.current = false;\n\t}\n\n\tfunction onPressContainer() {\n\t\tonPress();\n\t\tonOpenSheet();\n\t}\n\n\tfunction onPressHelp() {\n\t\tonPressContainer();\n\t}\n\n\tconst embedNoProviderPreview = (\n\t\t<>\n\t\t\t<TouchableWithoutFeedback\n\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\taccessibilityHint={ previewButtonA11yHint }\n\t\t\t\tdisabled={ ! isSelected }\n\t\t\t\tonPress={ onPressContainer }\n\t\t\t>\n\t\t\t\t<View style={ containerStyle }>\n\t\t\t\t\t<BlockIcon icon={ icon } />\n\t\t\t\t\t<Text style={ labelStyle }>{ label }</Text>\n\t\t\t\t\t<Text style={ descriptionStyle }>\n\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t// translators: %s: embed block variant's label e.g: \"Twitter\".\n\t\t\t\t\t\t\t__( '%s previews not yet available' ),\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<Text style={ styles.embed__action }>\n\t\t\t\t\t\t{ previewButtonText.toUpperCase() }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<TouchableOpacity\n\t\t\t\t\t\taccessibilityHint={ __( 'Tap here to show help' ) }\n\t\t\t\t\t\taccessibilityLabel={ __( 'Help button' ) }\n\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\tdisabled={ ! isSelected }\n\t\t\t\t\t\tonPress={ onPressHelp }\n\t\t\t\t\t\tstyle={ helpIconStyle }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ help }\n\t\t\t\t\t\t\tfill={ helpIconStyle.fill }\n\t\t\t\t\t\t\tsize={ helpIconStyle.width }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</TouchableOpacity>\n\t\t\t\t</View>\n\t\t\t</TouchableWithoutFeedback>\n\t\t\t<BottomSheet\n\t\t\t\tisVisible={ isSheetVisible }\n\t\t\t\thideHeader\n\t\t\t\tonDismiss={ onDismissSheet }\n\t\t\t\tonClose={ onCloseSheet }\n\t\t\t\ttestID=\"embed-no-preview-modal\"\n\t\t\t>\n\t\t\t\t<View style={ styles[ 'embed-no-preview__container' ] }>\n\t\t\t\t\t<View style={ sheetIconStyle }>\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ help }\n\t\t\t\t\t\t\tfill={ sheetIconStyle.fill }\n\t\t\t\t\t\t\tsize={ sheetIconStyle.width }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</View>\n\t\t\t\t\t<Text style={ sheetTitleStyle }>\n\t\t\t\t\t\t{ isDefaultEmbedInfo\n\t\t\t\t\t\t\t? __( 'Embed block previews are coming soon' )\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t// translators: %s: embed block variant's label e.g: \"Twitter\".\n\t\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t\t'%s embed block previews are coming soon'\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t</Text>\n\t\t\t\t\t<Text style={ sheetDescriptionStyle }>\n\t\t\t\t\t\t{ comingSoonDescription }\n\t\t\t\t\t</Text>\n\t\t\t\t</View>\n\t\t\t\t<TextControl\n\t\t\t\t\tlabel={ previewButtonText }\n\t\t\t\t\tseparatorType=\"topFullWidth\"\n\t\t\t\t\tonPress={ () => {\n\t\t\t\t\t\tshouldRequestReview.current = true;\n\t\t\t\t\t\tonCloseSheet();\n\t\t\t\t\t} }\n\t\t\t\t\tlabelStyle={ sheetButtonStyle }\n\t\t\t\t/>\n\t\t\t\t<TextControl\n\t\t\t\t\tlabel={ __( 'Dismiss' ) }\n\t\t\t\t\tseparatorType=\"topFullWidth\"\n\t\t\t\t\tonPress={ onCloseSheet }\n\t\t\t\t\tlabelStyle={ sheetButtonStyle }\n\t\t\t\t/>\n\t\t\t</BottomSheet>\n\t\t</>\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ previewable ? (\n\t\t\t\tembedNoProviderPreview\n\t\t\t) : (\n\t\t\t\t<View style={ containerStyle }>\n\t\t\t\t\t<BlockIcon icon={ icon } />\n\t\t\t\t\t<Text style={ labelStyle }>\n\t\t\t\t\t\t{ __( 'No preview available' ) }\n\t\t\t\t\t</Text>\n\t\t\t\t</View>\n\t\t\t) }\n\t\t</>\n\t);\n};\n\nexport default EmbedNoPreview;\n"]}

package/build-module/embed/embed-placeholder.native.js

@@ -4,13 +4,16 @@ import { createElement, Fragment } from "@wordpress/element";
  * External dependencies
  */
 import { View, Text, TouchableWithoutFeedback } from 'react-native';
+import { compact } from 'lodash';
 /**
  * WordPress dependencies
  */
 
 import { __ } from '@wordpress/i18n';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { Icon } from '@wordpress/components';
+import { Icon, Picker } from '@wordpress/components';
+import { BlockIcon } from '@wordpress/block-editor';
+import { useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -23,19 +26,53 @@ const EmbedPlaceholder = ({
   isSelected,
   label,
   onPress,
-  cannotEmbed
+  cannotEmbed,
+  fallback,
+  tryAgain
 }) => {
   const containerStyle = usePreferredColorSchemeStyle(styles.embed__container, styles['embed__container--dark']);
   const labelStyle = usePreferredColorSchemeStyle(styles.embed__label, styles['embed__label--dark']);
   const descriptionStyle = styles.embed__description;
   const descriptionErrorStyle = styles['embed__description--error'];
   const actionStyle = usePreferredColorSchemeStyle(styles.embed__action, styles['embed__action--dark']);
-  const embedIconStyle = usePreferredColorSchemeStyle(styles.embed__icon, styles['embed__icon--dark']);
   const embedIconErrorStyle = styles['embed__icon--error'];
+  const cannotEmbedMenuPickerRef = useRef();
+  const errorPickerOptions = {
+    retry: {
+      id: 'retryOption',
+      label: __('Retry'),
+      value: 'retryOption',
+      onSelect: tryAgain
+    },
+    convertToLink: {
+      id: 'convertToLinkOption',
+      label: __('Convert to link'),
+      value: 'convertToLinkOption',
+      onSelect: fallback
+    }
+  };
+  const options = compact([cannotEmbed && errorPickerOptions.retry, cannotEmbed && errorPickerOptions.convertToLink]);
+
+  function onPickerSelect(value) {
+    const selectedItem = options.find(item => item.value === value);
+    selectedItem.onSelect();
+  } // When the content cannot be embedded the onPress should trigger the Picker instead of the onPress prop.
+
+
+  function resolveOnPressEvent() {
+    if (cannotEmbed) {
+      var _cannotEmbedMenuPicke;
+
+      (_cannotEmbedMenuPicke = cannotEmbedMenuPickerRef.current) === null || _cannotEmbedMenuPicke === void 0 ? void 0 : _cannotEmbedMenuPicke.presentPicker();
+    } else {
+      onPress();
+    }
+  }
+
   return createElement(Fragment, null, createElement(TouchableWithoutFeedback, {
     accessibilityRole: 'button',
-    accessibilityHint: __('Double tap to add a link.'),
-    onPress: onPress,
+    accessibilityHint: cannotEmbed ? __('Double tap to view embed options.') : __('Double tap to add a link.'),
+    onPress: resolveOnPressEvent,
     disabled: !isSelected
   }, createElement(View, {
     style: containerStyle
@@ -47,9 +84,15 @@ const EmbedPlaceholder = ({
     style: [descriptionStyle, descriptionErrorStyle]
   }, __('Unable to embed media')), createElement(Text, {
     style: actionStyle
-  }, __('EDIT LINK'))) : createElement(Fragment, null, createElement(Icon, {
-    icon: icon,
-    fill: embedIconStyle.fill
+  }, __('More options')), createElement(Picker, {
+    title: __('Embed options'),
+    ref: cannotEmbedMenuPickerRef,
+    options: options,
+    onChange: onPickerSelect,
+    hideCancelButton: true,
+    leftAlign: true
+  })) : createElement(Fragment, null, createElement(BlockIcon, {
+    icon: icon
   }), createElement(Text, {
     style: labelStyle
   }, label), createElement(Text, {

package/build-module/embed/embed-placeholder.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/embed/embed-placeholder.native.js"],"names":["View","Text","TouchableWithoutFeedback","__","usePreferredColorSchemeStyle","Icon","styles","noticeOutline","EmbedPlaceholder","icon","isSelected","label","onPress","cannotEmbed","containerStyle","embed__container","labelStyle","embed__label","descriptionStyle","embed__description","descriptionErrorStyle","actionStyle","embed__action","embedIconStyle","embed__icon","embedIconErrorStyle","fill"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,IAAf,EAAqBC,wBAArB,QAAqD,cAArD;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,4BAAT,QAA6C,oBAA7C;AACA,SAASC,IAAT,QAAqB,uBAArB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,eAAnB;AACA,SAASC,aAAT,QAA8B,0CAA9B;;AAEA,MAAMC,gBAAgB,GAAG,CAAE;AAC1BC,EAAAA,IAD0B;AAE1BC,EAAAA,UAF0B;AAG1BC,EAAAA,KAH0B;AAI1BC,EAAAA,OAJ0B;AAK1BC,EAAAA;AAL0B,CAAF,KAMlB;AACN,QAAMC,cAAc,GAAGV,4BAA4B,CAClDE,MAAM,CAACS,gBAD2C,EAElDT,MAAM,CAAE,wBAAF,CAF4C,CAAnD;AAIA,QAAMU,UAAU,GAAGZ,4BAA4B,CAC9CE,MAAM,CAACW,YADuC,EAE9CX,MAAM,CAAE,oBAAF,CAFwC,CAA/C;AAIA,QAAMY,gBAAgB,GAAGZ,MAAM,CAACa,kBAAhC;AACA,QAAMC,qBAAqB,GAAGd,MAAM,CAAE,2BAAF,CAApC;AACA,QAAMe,WAAW,GAAGjB,4BAA4B,CAC/CE,MAAM,CAACgB,aADwC,EAE/ChB,MAAM,CAAE,qBAAF,CAFyC,CAAhD;AAIA,QAAMiB,cAAc,GAAGnB,4BAA4B,CAClDE,MAAM,CAACkB,WAD2C,EAElDlB,MAAM,CAAE,mBAAF,CAF4C,CAAnD;AAIA,QAAMmB,mBAAmB,GAAGnB,MAAM,CAAE,oBAAF,CAAlC;AAEA,SACC,8BACC,cAAC,wBAAD;AACC,IAAA,iBAAiB,EAAG,QADrB;AAEC,IAAA,iBAAiB,EAAGH,EAAE,CAAE,2BAAF,CAFvB;AAGC,IAAA,OAAO,EAAGS,OAHX;AAIC,IAAA,QAAQ,EAAG,CAAEF;AAJd,KAMC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGI;AAAd,KACGD,WAAW,GACZ,8BACC,cAAC,IAAD;AACC,IAAA,IAAI,EAAGN,aADR;AAEC,IAAA,IAAI,EAAGkB,mBAAmB,CAACC,IAF5B;AAGC,IAAA,KAAK,EAAGD;AAHT,IADD,EAMC,cAAC,IAAD;AACC,IAAA,KAAK,EAAG,CACPP,gBADO,EAEPE,qBAFO;AADT,KAMGjB,EAAE,CAAE,uBAAF,CANL,CAND,EAcC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGkB;AAAd,KACGlB,EAAE,CAAE,WAAF,CADL,CAdD,CADY,GAoBZ,8BACC,cAAC,IAAD;AAAM,IAAA,IAAI,EAAGM,IAAb;AAAoB,IAAA,IAAI,EAAGc,cAAc,CAACG;AAA1C,IADD,EAEC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGV;AAAd,KAA6BL,KAA7B,CAFD,EAGC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGU;AAAd,KACGlB,EAAE,CAAE,UAAF,CADL,CAHD,CArBF,CAND,CADD,CADD;AAyCA,CApED;;AAsEA,eAAeK,gBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View, Text, TouchableWithoutFeedback } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { Icon } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport styles from './styles.scss';\nimport { noticeOutline } from '../../../components/src/mobile/gridicons';\n\nconst EmbedPlaceholder = ( {\n\ticon,\n\tisSelected,\n\tlabel,\n\tonPress,\n\tcannotEmbed,\n} ) => {\n\tconst containerStyle = usePreferredColorSchemeStyle(\n\t\tstyles.embed__container,\n\t\tstyles[ 'embed__container--dark' ]\n\t);\n\tconst labelStyle = usePreferredColorSchemeStyle(\n\t\tstyles.embed__label,\n\t\tstyles[ 'embed__label--dark' ]\n\t);\n\tconst descriptionStyle = styles.embed__description;\n\tconst descriptionErrorStyle = styles[ 'embed__description--error' ];\n\tconst actionStyle = usePreferredColorSchemeStyle(\n\t\tstyles.embed__action,\n\t\tstyles[ 'embed__action--dark' ]\n\t);\n\tconst embedIconStyle = usePreferredColorSchemeStyle(\n\t\tstyles.embed__icon,\n\t\tstyles[ 'embed__icon--dark' ]\n\t);\n\tconst embedIconErrorStyle = styles[ 'embed__icon--error' ];\n\n\treturn (\n\t\t<>\n\t\t\t<TouchableWithoutFeedback\n\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\taccessibilityHint={ __( 'Double tap to add a link.' ) }\n\t\t\t\tonPress={ onPress }\n\t\t\t\tdisabled={ ! isSelected }\n\t\t\t>\n\t\t\t\t<View style={ containerStyle }>\n\t\t\t\t\t{ cannotEmbed ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ noticeOutline }\n\t\t\t\t\t\t\t\tfill={ embedIconErrorStyle.fill }\n\t\t\t\t\t\t\t\tstyle={ embedIconErrorStyle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\tdescriptionStyle,\n\t\t\t\t\t\t\t\t\tdescriptionErrorStyle,\n\t\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Unable to embed media' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Text style={ actionStyle }>\n\t\t\t\t\t\t\t\t{ __( 'EDIT LINK' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Icon icon={ icon } fill={ embedIconStyle.fill } />\n\t\t\t\t\t\t\t<Text style={ labelStyle }>{ label }</Text>\n\t\t\t\t\t\t\t<Text style={ actionStyle }>\n\t\t\t\t\t\t\t\t{ __( 'ADD LINK' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</View>\n\t\t\t</TouchableWithoutFeedback>\n\t\t</>\n\t);\n};\n\nexport default EmbedPlaceholder;\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/embed/embed-placeholder.native.js"],"names":["View","Text","TouchableWithoutFeedback","compact","__","usePreferredColorSchemeStyle","Icon","Picker","BlockIcon","useRef","styles","noticeOutline","EmbedPlaceholder","icon","isSelected","label","onPress","cannotEmbed","fallback","tryAgain","containerStyle","embed__container","labelStyle","embed__label","descriptionStyle","embed__description","descriptionErrorStyle","actionStyle","embed__action","embedIconErrorStyle","cannotEmbedMenuPickerRef","errorPickerOptions","retry","id","value","onSelect","convertToLink","options","onPickerSelect","selectedItem","find","item","resolveOnPressEvent","current","presentPicker","fill"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { View, Text, TouchableWithoutFeedback } from 'react-native';\nimport { compact } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { Icon, Picker } from '@wordpress/components';\nimport { BlockIcon } from '@wordpress/block-editor';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './styles.scss';\nimport { noticeOutline } from '../../../components/src/mobile/gridicons';\n\nconst EmbedPlaceholder = ( {\n\ticon,\n\tisSelected,\n\tlabel,\n\tonPress,\n\tcannotEmbed,\n\tfallback,\n\ttryAgain,\n} ) => {\n\tconst containerStyle = usePreferredColorSchemeStyle(\n\t\tstyles.embed__container,\n\t\tstyles[ 'embed__container--dark' ]\n\t);\n\tconst labelStyle = usePreferredColorSchemeStyle(\n\t\tstyles.embed__label,\n\t\tstyles[ 'embed__label--dark' ]\n\t);\n\tconst descriptionStyle = styles.embed__description;\n\tconst descriptionErrorStyle = styles[ 'embed__description--error' ];\n\tconst actionStyle = usePreferredColorSchemeStyle(\n\t\tstyles.embed__action,\n\t\tstyles[ 'embed__action--dark' ]\n\t);\n\tconst embedIconErrorStyle = styles[ 'embed__icon--error' ];\n\n\tconst cannotEmbedMenuPickerRef = useRef();\n\n\tconst errorPickerOptions = {\n\t\tretry: {\n\t\t\tid: 'retryOption',\n\t\t\tlabel: __( 'Retry' ),\n\t\t\tvalue: 'retryOption',\n\t\t\tonSelect: tryAgain,\n\t\t},\n\t\tconvertToLink: {\n\t\t\tid: 'convertToLinkOption',\n\t\t\tlabel: __( 'Convert to link' ),\n\t\t\tvalue: 'convertToLinkOption',\n\t\t\tonSelect: fallback,\n\t\t},\n\t};\n\n\tconst options = compact( [\n\t\tcannotEmbed && errorPickerOptions.retry,\n\t\tcannotEmbed && errorPickerOptions.convertToLink,\n\t] );\n\n\tfunction onPickerSelect( value ) {\n\t\tconst selectedItem = options.find( ( item ) => item.value === value );\n\t\tselectedItem.onSelect();\n\t}\n\n\t// When the content cannot be embedded the onPress should trigger the Picker instead of the onPress prop.\n\tfunction resolveOnPressEvent() {\n\t\tif ( cannotEmbed ) {\n\t\t\tcannotEmbedMenuPickerRef.current?.presentPicker();\n\t\t} else {\n\t\t\tonPress();\n\t\t}\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<TouchableWithoutFeedback\n\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\taccessibilityHint={\n\t\t\t\t\tcannotEmbed\n\t\t\t\t\t\t? __( 'Double tap to view embed options.' )\n\t\t\t\t\t\t: __( 'Double tap to add a link.' )\n\t\t\t\t}\n\t\t\t\tonPress={ resolveOnPressEvent }\n\t\t\t\tdisabled={ ! isSelected }\n\t\t\t>\n\t\t\t\t<View style={ containerStyle }>\n\t\t\t\t\t{ cannotEmbed ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ noticeOutline }\n\t\t\t\t\t\t\t\tfill={ embedIconErrorStyle.fill }\n\t\t\t\t\t\t\t\tstyle={ embedIconErrorStyle }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\t\tdescriptionStyle,\n\t\t\t\t\t\t\t\t\tdescriptionErrorStyle,\n\t\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Unable to embed media' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Text style={ actionStyle }>\n\t\t\t\t\t\t\t\t{ __( 'More options' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t<Picker\n\t\t\t\t\t\t\t\ttitle={ __( 'Embed options' ) }\n\t\t\t\t\t\t\t\tref={ cannotEmbedMenuPickerRef }\n\t\t\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\t\t\tonChange={ onPickerSelect }\n\t\t\t\t\t\t\t\thideCancelButton\n\t\t\t\t\t\t\t\tleftAlign\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\t\t<>\n\t\t\t\t\t\t\t<BlockIcon icon={ icon } />\n\t\t\t\t\t\t\t<Text style={ labelStyle }>{ label }</Text>\n\t\t\t\t\t\t\t<Text style={ actionStyle }>\n\t\t\t\t\t\t\t\t{ __( 'ADD LINK' ) }\n\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</View>\n\t\t\t</TouchableWithoutFeedback>\n\t\t</>\n\t);\n};\n\nexport default EmbedPlaceholder;\n"]}

package/build-module/embed/embed-preview.native.js

@@ -11,18 +11,22 @@ import classnames from 'classnames/dedupe';
  */
 
 import { View } from '@wordpress/primitives';
-import { BlockCaption } from '@wordpress/block-editor';
+import { BlockCaption, store as blockEditorStore } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { memo, useState } from '@wordpress/element';
 import { SandBox } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
 
 import { getPhotoHtml } from './util';
 import EmbedNoPreview from './embed-no-preview';
+import WpEmbedPreview from './wp-embed-preview';
+import styles from './styles.scss';
 
 const EmbedPreview = ({
+  align,
   className,
   clientId,
   icon,
@@ -32,10 +36,18 @@ const EmbedPreview = ({
   onFocus,
   preview,
   previewable,
+  isProviderPreviewable,
   type,
-  url
+  url,
+  isDefaultEmbedInfo
 }) => {
   const [isCaptionSelected, setIsCaptionSelected] = useState(false);
+  const {
+    locale
+  } = useSelect(blockEditorStore).getSettings();
+  const wrapperStyle = styles['embed-preview__wrapper'];
+  const wrapperAlignStyle = styles[`embed-preview__wrapper--align-${align}`];
+  const sandboxAlignStyle = styles[`embed-preview__sandbox--align-${align}`];
 
   function accessibilityLabelCreator(caption) {
     return isEmpty(caption) ?
@@ -68,9 +80,8 @@ const EmbedPreview = ({
   const iframeTitle = sprintf( // translators: %s: host providing embed content e.g: www.youtube.com
   __('Embedded content from %s'), parsedHostBaseUrl);
   const sandboxClassnames = classnames(type, className, 'wp-block-embed__wrapper');
-  const embedWrapper =
-  /* We should render here: <WpEmbedPreview html={ html } /> */
-  'wp-embed' === type ? null : createElement(Fragment, null, createElement(TouchableWithoutFeedback, {
+  const PreviewContent = 'wp-embed' === type ? WpEmbedPreview : SandBox;
+  const embedWrapper = createElement(Fragment, null, createElement(TouchableWithoutFeedback, {
     onPress: () => {
       if (onFocus) {
         onFocus();
@@ -81,24 +92,28 @@ const EmbedPreview = ({
       }
     }
   }, createElement(View, {
-    pointerEvents: "box-only"
-  }, createElement(SandBox, {
+    pointerEvents: "box-only",
+    style: [wrapperStyle, wrapperAlignStyle]
+  }, createElement(PreviewContent, {
     html: html,
+    lang: locale,
     title: iframeTitle,
     type: sandboxClassnames,
     providerUrl: providerUrl,
-    url: url
+    url: url,
+    containerStyle: sandboxAlignStyle
   }))));
   return createElement(TouchableWithoutFeedback, {
     accessible: !isSelected,
     onPress: onEmbedPreviewPress,
     disabled: !isSelected
-  }, createElement(View, null, // eslint-disable-next-line no-undef
-  __DEV__ && previewable ? embedWrapper : createElement(EmbedNoPreview, {
+  }, createElement(View, null, isProviderPreviewable && previewable ? embedWrapper : createElement(EmbedNoPreview, {
     label: label,
     icon: icon,
     isSelected: isSelected,
-    onPress: () => setIsCaptionSelected(false)
+    onPress: () => setIsCaptionSelected(false),
+    previewable: previewable,
+    isDefaultEmbedInfo: isDefaultEmbedInfo
   }), createElement(BlockCaption, {
     accessibilityLabelCreator: accessibilityLabelCreator,
     accessible: true,

package/build-module/embed/embed-preview.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/embed/embed-preview.native.js"],"names":["TouchableWithoutFeedback","isEmpty","classnames","View","BlockCaption","__","sprintf","memo","useState","SandBox","getPhotoHtml","EmbedNoPreview","EmbedPreview","className","clientId","icon","insertBlocksAfter","isSelected","label","onFocus","preview","previewable","type","url","isCaptionSelected","setIsCaptionSelected","accessibilityLabelCreator","caption","onEmbedPreviewPress","onFocusCaption","provider_url","providerUrl","html","parsedHost","URL","host","split","parsedHostBaseUrl","splice","length","join","iframeTitle","sandboxClassnames","embedWrapper","__DEV__"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { TouchableWithoutFeedback } from 'react-native';\nimport { isEmpty } from 'lodash';\nimport classnames from 'classnames/dedupe';\n\n/**\n * WordPress dependencies\n */\nimport { View } from '@wordpress/primitives';\n\nimport { BlockCaption } from '@wordpress/block-editor';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { memo, useState } from '@wordpress/element';\nimport { SandBox } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { getPhotoHtml } from './util';\nimport EmbedNoPreview from './embed-no-preview';\n\nconst EmbedPreview = ( {\n\tclassName,\n\tclientId,\n\ticon,\n\tinsertBlocksAfter,\n\tisSelected,\n\tlabel,\n\tonFocus,\n\tpreview,\n\tpreviewable,\n\ttype,\n\turl,\n} ) => {\n\tconst [ isCaptionSelected, setIsCaptionSelected ] = useState( false );\n\n\tfunction accessibilityLabelCreator( caption ) {\n\t\treturn isEmpty( caption )\n\t\t\t? /* translators: accessibility text. Empty Embed caption. */\n\t\t\t  __( 'Embed caption. Empty' )\n\t\t\t: sprintf(\n\t\t\t\t\t/* translators: accessibility text. %s: Embed caption. */\n\t\t\t\t\t__( 'Embed caption. %s' ),\n\t\t\t\t\tcaption\n\t\t\t  );\n\t}\n\n\tfunction onEmbedPreviewPress() {\n\t\tsetIsCaptionSelected( false );\n\t}\n\n\tfunction onFocusCaption() {\n\t\tif ( onFocus ) {\n\t\t\tonFocus();\n\t\t}\n\t\tif ( ! isCaptionSelected ) {\n\t\t\tsetIsCaptionSelected( true );\n\t\t}\n\t}\n\n\tconst { provider_url: providerUrl } = preview;\n\tconst html = 'photo' === type ? getPhotoHtml( preview ) : preview.html;\n\tconst parsedHost = new URL( url ).host.split( '.' );\n\tconst parsedHostBaseUrl = parsedHost\n\t\t.splice( parsedHost.length - 2, parsedHost.length - 1 )\n\t\t.join( '.' );\n\tconst iframeTitle = sprintf(\n\t\t// translators: %s: host providing embed content e.g: www.youtube.com\n\t\t__( 'Embedded content from %s' ),\n\t\tparsedHostBaseUrl\n\t);\n\tconst sandboxClassnames = classnames(\n\t\ttype,\n\t\tclassName,\n\t\t'wp-block-embed__wrapper'\n\t);\n\n\tconst embedWrapper =\n\t\t/* We should render here: <WpEmbedPreview html={ html } /> */\n\t\t'wp-embed' === type ? null : (\n\t\t\t<>\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ () => {\n\t\t\t\t\t\tif ( onFocus ) {\n\t\t\t\t\t\t\tonFocus();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif ( isCaptionSelected ) {\n\t\t\t\t\t\t\tsetIsCaptionSelected( false );\n\t\t\t\t\t\t}\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<View pointerEvents=\"box-only\">\n\t\t\t\t\t\t<SandBox\n\t\t\t\t\t\t\thtml={ html }\n\t\t\t\t\t\t\ttitle={ iframeTitle }\n\t\t\t\t\t\t\ttype={ sandboxClassnames }\n\t\t\t\t\t\t\tproviderUrl={ providerUrl }\n\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t</>\n\t\t);\n\n\treturn (\n\t\t<TouchableWithoutFeedback\n\t\t\taccessible={ ! isSelected }\n\t\t\tonPress={ onEmbedPreviewPress }\n\t\t\tdisabled={ ! isSelected }\n\t\t>\n\t\t\t<View>\n\t\t\t\t{\n\t\t\t\t\t// eslint-disable-next-line no-undef\n\t\t\t\t\t__DEV__ && previewable ? (\n\t\t\t\t\t\tembedWrapper\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<EmbedNoPreview\n\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\t\tonPress={ () => setIsCaptionSelected( false ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t\t<BlockCaption\n\t\t\t\t\taccessibilityLabelCreator={ accessibilityLabelCreator }\n\t\t\t\t\taccessible\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\tinsertBlocksAfter={ insertBlocksAfter }\n\t\t\t\t\tisSelected={ isCaptionSelected }\n\t\t\t\t\tonFocus={ onFocusCaption }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</TouchableWithoutFeedback>\n\t);\n};\n\nexport default memo( EmbedPreview );\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/embed/embed-preview.native.js"],"names":["TouchableWithoutFeedback","isEmpty","classnames","View","BlockCaption","store","blockEditorStore","__","sprintf","memo","useState","SandBox","useSelect","getPhotoHtml","EmbedNoPreview","WpEmbedPreview","styles","EmbedPreview","align","className","clientId","icon","insertBlocksAfter","isSelected","label","onFocus","preview","previewable","isProviderPreviewable","type","url","isDefaultEmbedInfo","isCaptionSelected","setIsCaptionSelected","locale","getSettings","wrapperStyle","wrapperAlignStyle","sandboxAlignStyle","accessibilityLabelCreator","caption","onEmbedPreviewPress","onFocusCaption","provider_url","providerUrl","html","parsedHost","URL","host","split","parsedHostBaseUrl","splice","length","join","iframeTitle","sandboxClassnames","PreviewContent","embedWrapper"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { TouchableWithoutFeedback } from 'react-native';\nimport { isEmpty } from 'lodash';\nimport classnames from 'classnames/dedupe';\n\n/**\n * WordPress dependencies\n */\nimport { View } from '@wordpress/primitives';\nimport {\n\tBlockCaption,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { memo, useState } from '@wordpress/element';\nimport { SandBox } from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { getPhotoHtml } from './util';\nimport EmbedNoPreview from './embed-no-preview';\nimport WpEmbedPreview from './wp-embed-preview';\nimport styles from './styles.scss';\n\nconst EmbedPreview = ( {\n\talign,\n\tclassName,\n\tclientId,\n\ticon,\n\tinsertBlocksAfter,\n\tisSelected,\n\tlabel,\n\tonFocus,\n\tpreview,\n\tpreviewable,\n\tisProviderPreviewable,\n\ttype,\n\turl,\n\tisDefaultEmbedInfo,\n} ) => {\n\tconst [ isCaptionSelected, setIsCaptionSelected ] = useState( false );\n\tconst { locale } = useSelect( blockEditorStore ).getSettings();\n\n\tconst wrapperStyle = styles[ 'embed-preview__wrapper' ];\n\tconst wrapperAlignStyle =\n\t\tstyles[ `embed-preview__wrapper--align-${ align }` ];\n\tconst sandboxAlignStyle =\n\t\tstyles[ `embed-preview__sandbox--align-${ align }` ];\n\n\tfunction accessibilityLabelCreator( caption ) {\n\t\treturn isEmpty( caption )\n\t\t\t? /* translators: accessibility text. Empty Embed caption. */\n\t\t\t  __( 'Embed caption. Empty' )\n\t\t\t: sprintf(\n\t\t\t\t\t/* translators: accessibility text. %s: Embed caption. */\n\t\t\t\t\t__( 'Embed caption. %s' ),\n\t\t\t\t\tcaption\n\t\t\t  );\n\t}\n\n\tfunction onEmbedPreviewPress() {\n\t\tsetIsCaptionSelected( false );\n\t}\n\n\tfunction onFocusCaption() {\n\t\tif ( onFocus ) {\n\t\t\tonFocus();\n\t\t}\n\t\tif ( ! isCaptionSelected ) {\n\t\t\tsetIsCaptionSelected( true );\n\t\t}\n\t}\n\n\tconst { provider_url: providerUrl } = preview;\n\tconst html = 'photo' === type ? getPhotoHtml( preview ) : preview.html;\n\tconst parsedHost = new URL( url ).host.split( '.' );\n\tconst parsedHostBaseUrl = parsedHost\n\t\t.splice( parsedHost.length - 2, parsedHost.length - 1 )\n\t\t.join( '.' );\n\tconst iframeTitle = sprintf(\n\t\t// translators: %s: host providing embed content e.g: www.youtube.com\n\t\t__( 'Embedded content from %s' ),\n\t\tparsedHostBaseUrl\n\t);\n\tconst sandboxClassnames = classnames(\n\t\ttype,\n\t\tclassName,\n\t\t'wp-block-embed__wrapper'\n\t);\n\n\tconst PreviewContent = 'wp-embed' === type ? WpEmbedPreview : SandBox;\n\tconst embedWrapper = (\n\t\t<>\n\t\t\t<TouchableWithoutFeedback\n\t\t\t\tonPress={ () => {\n\t\t\t\t\tif ( onFocus ) {\n\t\t\t\t\t\tonFocus();\n\t\t\t\t\t}\n\t\t\t\t\tif ( isCaptionSelected ) {\n\t\t\t\t\t\tsetIsCaptionSelected( false );\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<View\n\t\t\t\t\tpointerEvents=\"box-only\"\n\t\t\t\t\tstyle={ [ wrapperStyle, wrapperAlignStyle ] }\n\t\t\t\t>\n\t\t\t\t\t<PreviewContent\n\t\t\t\t\t\thtml={ html }\n\t\t\t\t\t\tlang={ locale }\n\t\t\t\t\t\ttitle={ iframeTitle }\n\t\t\t\t\t\ttype={ sandboxClassnames }\n\t\t\t\t\t\tproviderUrl={ providerUrl }\n\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\tcontainerStyle={ sandboxAlignStyle }\n\t\t\t\t\t/>\n\t\t\t\t</View>\n\t\t\t</TouchableWithoutFeedback>\n\t\t</>\n\t);\n\treturn (\n\t\t<TouchableWithoutFeedback\n\t\t\taccessible={ ! isSelected }\n\t\t\tonPress={ onEmbedPreviewPress }\n\t\t\tdisabled={ ! isSelected }\n\t\t>\n\t\t\t<View>\n\t\t\t\t{ isProviderPreviewable && previewable ? (\n\t\t\t\t\tembedWrapper\n\t\t\t\t) : (\n\t\t\t\t\t<EmbedNoPreview\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\tonPress={ () => setIsCaptionSelected( false ) }\n\t\t\t\t\t\tpreviewable={ previewable }\n\t\t\t\t\t\tisDefaultEmbedInfo={ isDefaultEmbedInfo }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<BlockCaption\n\t\t\t\t\taccessibilityLabelCreator={ accessibilityLabelCreator }\n\t\t\t\t\taccessible\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\tinsertBlocksAfter={ insertBlocksAfter }\n\t\t\t\t\tisSelected={ isCaptionSelected }\n\t\t\t\t\tonFocus={ onFocusCaption }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</TouchableWithoutFeedback>\n\t);\n};\n\nexport default memo( EmbedPreview );\n"]}

package/build-module/embed/icons.js

@@ -137,4 +137,17 @@ export const embedDailymotionIcon = createElement(SVG, {
   d: "m12.1479 18.5957c-2.4949 0-4.28131-1.7558-4.28131-4.0658 0-2.2176 1.78641-4.0965 4.09651-4.0965 2.2793 0 4.0349 1.7864 4.0349 4.1581 0 2.2794-1.7556 4.0042-3.8501 4.0042zm8.3521-18.5957-4.5329 1v7c-1.1088-1.41691-2.8028-1.8787-4.8049-1.8787-2.09443 0-3.97329.76993-5.5133 2.27917-1.72483 1.66323-2.6489 3.78863-2.6489 6.16033 0 2.5873.98562 4.8049 2.89526 6.499 1.44763 1.2936 3.17251 1.9402 5.17454 1.9402 1.9713 0 3.4498-.5236 4.8973-1.9402v1.9402h4.5329c0-7.6359 0-15.3641 0-23z",
   fill: "#333436"
 }));
+export const embedPinterestIcon = createElement(SVG, {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  version: "1.1"
+}, createElement(Path, {
+  d: "M12.289,2C6.617,2,3.606,5.648,3.606,9.622c0,1.846,1.025,4.146,2.666,4.878c0.25,0.111,0.381,0.063,0.439-0.169 c0.044-0.175,0.267-1.029,0.365-1.428c0.032-0.128,0.017-0.237-0.091-0.362C6.445,11.911,6.01,10.75,6.01,9.668 c0-2.777,2.194-5.464,5.933-5.464c3.23,0,5.49,2.108,5.49,5.122c0,3.407-1.794,5.768-4.13,5.768c-1.291,0-2.257-1.021-1.948-2.277 c0.372-1.495,1.089-3.112,1.089-4.191c0-0.967-0.542-1.775-1.663-1.775c-1.319,0-2.379,1.309-2.379,3.059 c0,1.115,0.394,1.869,0.394,1.869s-1.302,5.279-1.54,6.261c-0.405,1.666,0.053,4.368,0.094,4.604 c0.021,0.126,0.167,0.169,0.25,0.063c0.129-0.165,1.699-2.419,2.142-4.051c0.158-0.59,0.817-2.995,0.817-2.995 c0.43,0.784,1.681,1.446,3.013,1.446c3.963,0,6.822-3.494,6.822-7.833C20.394,5.112,16.849,2,12.289,2"
+}));
+export const embedWolframIcon = createElement(SVG, {
+  viewBox: "0 0 44 44"
+}, createElement(Path, {
+  d: "M32.59521,22.001l4.31885-4.84473-6.34131-1.38379.646-6.459-5.94336,2.61035L22,6.31934l-3.27344,5.60351L12.78418,9.3125l.645,6.458L7.08643,17.15234,11.40479,21.999,7.08594,26.84375l6.34131,1.38379-.64551,6.458,5.94287-2.60938L22,37.68066l3.27344-5.60351,5.94287,2.61035-.64551-6.458,6.34277-1.38183Zm.44385,2.75244L30.772,23.97827l-1.59558-2.07391,1.97888.735Zm-8.82147,6.1579L22.75,33.424V30.88977l1.52228-2.22168ZM18.56226,13.48816,19.819,15.09534l-2.49219-.88642L15.94037,12.337Zm6.87719.00116,2.62043-1.15027-1.38654,1.86981L24.183,15.0946Zm3.59357,2.6029-1.22546,1.7381.07525-2.73486,1.44507-1.94867ZM22,29.33008l-2.16406-3.15686L22,23.23688l2.16406,2.93634Zm-4.25458-9.582-.10528-3.836,3.60986,1.284v3.73242Zm5.00458-2.552,3.60986-1.284-.10528,3.836L22.75,20.92853Zm-7.78174-1.10559-.29352-2.94263,1.44245,1.94739.07519,2.73321Zm2.30982,5.08319,3.50817,1.18164-2.16247,2.9342-3.678-1.08447Zm2.4486,7.49285L21.25,30.88977v2.53485L19.78052,30.91Zm3.48707-6.31121,3.50817-1.18164,2.33228,3.03137-3.678,1.08447Zm10.87219-4.28113-2.714,3.04529L28.16418,19.928l1.92176-2.72565ZM24.06036,12.81769l-2.06012,2.6322-2.059-2.63318L22,9.292ZM9.91455,18.07227l4.00079-.87195,1.921,2.72735-3.20794,1.19019Zm2.93024,4.565,1.9801-.73462L13.228,23.97827l-2.26838.77429Zm-1.55591,3.58819L13.701,25.4021l2.64935.78058-2.14447.67853Zm3.64868,1.977L18.19,27.17334l.08313,3.46332L14.52979,32.2793Zm10.7876,2.43549.08447-3.464,3.25165,1.03052.407,4.07684Zm4.06824-3.77478-2.14545-.68,2.65063-.781,2.41266.825Z"
+}));
 //# sourceMappingURL=icons.js.map