@wordpress/block-library 7.4.0 → 7.7.0

package/build/media-text/transforms.js

@@ -45,24 +45,72 @@ const transforms = {
         anchor
       });
     }
+  }, {
+    type: 'block',
+    blocks: ['core/cover'],
+    transform: (_ref3, innerBlocks) => {
+      let {
+        align,
+        alt,
+        anchor,
+        backgroundType,
+        customGradient,
+        customOverlayColor,
+        gradient,
+        id,
+        overlayColor,
+        url
+      } = _ref3;
+      let additionalAttributes = {};
+
+      if (customGradient) {
+        additionalAttributes = {
+          style: {
+            color: {
+              gradient: customGradient
+            }
+          }
+        };
+      } else if (customOverlayColor) {
+        additionalAttributes = {
+          style: {
+            color: {
+              background: customOverlayColor
+            }
+          }
+        };
+      }
+
+      return (0, _blocks.createBlock)('core/media-text', {
+        align,
+        anchor,
+        backgroundColor: overlayColor,
+        gradient,
+        mediaAlt: alt,
+        mediaId: id,
+        mediaType: backgroundType,
+        mediaUrl: url,
+        ...additionalAttributes
+      }, innerBlocks);
+    }
   }],
   to: [{
     type: 'block',
     blocks: ['core/image'],
-    isMatch: _ref3 => {
+    isMatch: _ref4 => {
       let {
         mediaType,
         mediaUrl
-      } = _ref3;
+      } = _ref4;
       return !mediaUrl || mediaType === 'image';
     },
-    transform: _ref4 => {
+    transform: _ref5 => {
       let {
         mediaAlt,
         mediaId,
         mediaUrl,
         anchor
-      } = _ref4;
+      } = _ref5;
       return (0, _blocks.createBlock)('core/image', {
         alt: mediaAlt,
         id: mediaId,
@@ -73,25 +121,106 @@ const transforms = {
   }, {
     type: 'block',
     blocks: ['core/video'],
-    isMatch: _ref5 => {
+    isMatch: _ref6 => {
       let {
         mediaType,
         mediaUrl
-      } = _ref5;
+      } = _ref6;
       return !mediaUrl || mediaType === 'video';
     },
-    transform: _ref6 => {
+    transform: _ref7 => {
       let {
         mediaId,
         mediaUrl,
         anchor
-      } = _ref6;
+      } = _ref7;
       return (0, _blocks.createBlock)('core/video', {
         id: mediaId,
         src: mediaUrl,
         anchor
       });
     }
+  }, {
+    type: 'block',
+    blocks: ['core/cover'],
+    transform: (_ref8, innerBlocks) => {
+      var _style$color, _style$color2, _style$color3;
+
+      let {
+        align,
+        anchor,
+        backgroundColor,
+        focalPoint,
+        gradient,
+        mediaAlt,
+        mediaId,
+        mediaType,
+        mediaUrl,
+        style,
+        textColor
+      } = _ref8;
+      const additionalAttributes = {};
+
+      if (style !== null && style !== void 0 && (_style$color = style.color) !== null && _style$color !== void 0 && _style$color.gradient) {
+        additionalAttributes.customGradient = style.color.gradient;
+      } else if (style !== null && style !== void 0 && (_style$color2 = style.color) !== null && _style$color2 !== void 0 && _style$color2.background) {
+        additionalAttributes.customOverlayColor = style.color.background;
+      }
+
+      const coverAttributes = {
+        align,
+        alt: mediaAlt,
+        anchor,
+        backgroundType: mediaType,
+        dimRatio: !!mediaUrl ? 50 : 100,
+        focalPoint,
+        gradient,
+        id: mediaId,
+        overlayColor: backgroundColor,
+        url: mediaUrl,
+        ...additionalAttributes
+      };
+      const customTextColor = style === null || style === void 0 ? void 0 : (_style$color3 = style.color) === null || _style$color3 === void 0 ? void 0 : _style$color3.text; // Attempt to maintain any text color selection.
+      // Cover block's do not opt into color block support so we
+      // cannot directly copy the color attributes across.
+
+      if (!textColor && !customTextColor) {
+        return (0, _blocks.createBlock)('core/cover', coverAttributes, innerBlocks);
+      }
+
+      const coloredInnerBlocks = innerBlocks.map(innerBlock => {
+        var _innerStyle$color;
+
+        const {
+          attributes: {
+            style: innerStyle
+          }
+        } = innerBlock; // Only apply the media and text color if the inner block
+        // doesn't set its own color block support selection.
+
+        if (innerBlock.attributes.textColor || innerStyle !== null && innerStyle !== void 0 && (_innerStyle$color = innerStyle.color) !== null && _innerStyle$color !== void 0 && _innerStyle$color.text) {
+          return innerBlock;
+        }
+
+        const newAttributes = {
+          textColor
+        }; // Only add or extend inner block's style object if we have
+        // a custom text color from the media & text block.
+
+        if (customTextColor) {
+          newAttributes.style = { ...innerStyle,
+            color: { ...(innerStyle === null || innerStyle === void 0 ? void 0 : innerStyle.color),
+              text: customTextColor
+            }
+          };
+        }
+
+        return (0, _blocks.createBlock)(innerBlock.name, { ...innerBlock.attributes,
+          ...newAttributes
+        }, innerBlock.innerBlocks);
+      });
+      return (0, _blocks.createBlock)('core/cover', coverAttributes, coloredInnerBlocks);
+    }
   }]
 };
 var _default = transforms;

package/build/media-text/transforms.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/media-text/transforms.js"],"names":["transforms","from","type","blocks","transform","alt","url","id","anchor","mediaAlt","mediaId","mediaUrl","mediaType","src","to","isMatch"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,UAAU,GAAG;AAClBC,EAAAA,IAAI,EAAE,CACL;AACCC,IAAAA,IAAI,EAAE,OADP;AAECC,IAAAA,MAAM,EAAE,CAAE,YAAF,CAFT;AAGCC,IAAAA,SAAS,EAAE;AAAA,UAAE;AAAEC,QAAAA,GAAF;AAAOC,QAAAA,GAAP;AAAYC,QAAAA,EAAZ;AAAgBC,QAAAA;AAAhB,OAAF;AAAA,aACV,yBAAa,iBAAb,EAAgC;AAC/BC,QAAAA,QAAQ,EAAEJ,GADqB;AAE/BK,QAAAA,OAAO,EAAEH,EAFsB;AAG/BI,QAAAA,QAAQ,EAAEL,GAHqB;AAI/BM,QAAAA,SAAS,EAAE,OAJoB;AAK/BJ,QAAAA;AAL+B,OAAhC,CADU;AAAA;AAHZ,GADK,EAaL;AACCN,IAAAA,IAAI,EAAE,OADP;AAECC,IAAAA,MAAM,EAAE,CAAE,YAAF,CAFT;AAGCC,IAAAA,SAAS,EAAE;AAAA,UAAE;AAAES,QAAAA,GAAF;AAAON,QAAAA,EAAP;AAAWC,QAAAA;AAAX,OAAF;AAAA,aACV,yBAAa,iBAAb,EAAgC;AAC/BE,QAAAA,OAAO,EAAEH,EADsB;AAE/BI,QAAAA,QAAQ,EAAEE,GAFqB;AAG/BD,QAAAA,SAAS,EAAE,OAHoB;AAI/BJ,QAAAA;AAJ+B,OAAhC,CADU;AAAA;AAHZ,GAbK,CADY;AA0BlBM,EAAAA,EAAE,EAAE,CACH;AACCZ,IAAAA,IAAI,EAAE,OADP;AAECC,IAAAA,MAAM,EAAE,CAAE,YAAF,CAFT;AAGCY,IAAAA,OAAO,EAAE,SAA+B;AAAA,UAA7B;AAAEH,QAAAA,SAAF;AAAaD,QAAAA;AAAb,OAA6B;AACvC,aAAO,CAAEA,QAAF,IAAcC,SAAS,KAAK,OAAnC;AACA,KALF;AAMCR,IAAAA,SAAS,EAAE,SAA+C;AAAA,UAA7C;AAAEK,QAAAA,QAAF;AAAYC,QAAAA,OAAZ;AAAqBC,QAAAA,QAArB;AAA+BH,QAAAA;AAA/B,OAA6C;AACzD,aAAO,yBAAa,YAAb,EAA2B;AACjCH,QAAAA,GAAG,EAAEI,QAD4B;AAEjCF,QAAAA,EAAE,EAAEG,OAF6B;AAGjCJ,QAAAA,GAAG,EAAEK,QAH4B;AAIjCH,QAAAA;AAJiC,OAA3B,CAAP;AAMA;AAbF,GADG,EAgBH;AACCN,IAAAA,IAAI,EAAE,OADP;AAECC,IAAAA,MAAM,EAAE,CAAE,YAAF,CAFT;AAGCY,IAAAA,OAAO,EAAE,SAA+B;AAAA,UAA7B;AAAEH,QAAAA,SAAF;AAAaD,QAAAA;AAAb,OAA6B;AACvC,aAAO,CAAEA,QAAF,IAAcC,SAAS,KAAK,OAAnC;AACA,KALF;AAMCR,IAAAA,SAAS,EAAE,SAAqC;AAAA,UAAnC;AAAEM,QAAAA,OAAF;AAAWC,QAAAA,QAAX;AAAqBH,QAAAA;AAArB,OAAmC;AAC/C,aAAO,yBAAa,YAAb,EAA2B;AACjCD,QAAAA,EAAE,EAAEG,OAD6B;AAEjCG,QAAAA,GAAG,EAAEF,QAF4B;AAGjCH,QAAAA;AAHiC,OAA3B,CAAP;AAKA;AAZF,GAhBG;AA1Bc,CAAnB;eA2DeR,U","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createBlock } from '@wordpress/blocks';\n\nconst transforms = {\n\tfrom: [\n\t\t{\n\t\t\ttype: 'block',\n\t\t\tblocks: [ 'core/image' ],\n\t\t\ttransform: ( { alt, url, id, anchor } ) =>\n\t\t\t\tcreateBlock( 'core/media-text', {\n\t\t\t\t\tmediaAlt: alt,\n\t\t\t\t\tmediaId: id,\n\t\t\t\t\tmediaUrl: url,\n\t\t\t\t\tmediaType: 'image',\n\t\t\t\t\tanchor,\n\t\t\t\t} ),\n\t\t},\n\t\t{\n\t\t\ttype: 'block',\n\t\t\tblocks: [ 'core/video' ],\n\t\t\ttransform: ( { src, id, anchor } ) =>\n\t\t\t\tcreateBlock( 'core/media-text', {\n\t\t\t\t\tmediaId: id,\n\t\t\t\t\tmediaUrl: src,\n\t\t\t\t\tmediaType: 'video',\n\t\t\t\t\tanchor,\n\t\t\t\t} ),\n\t\t},\n\t],\n\tto: [\n\t\t{\n\t\t\ttype: 'block',\n\t\t\tblocks: [ 'core/image' ],\n\t\t\tisMatch: ( { mediaType, mediaUrl } ) => {\n\t\t\t\treturn ! mediaUrl || mediaType === 'image';\n\t\t\t},\n\t\t\ttransform: ( { mediaAlt, mediaId, mediaUrl, anchor } ) => {\n\t\t\t\treturn createBlock( 'core/image', {\n\t\t\t\t\talt: mediaAlt,\n\t\t\t\t\tid: mediaId,\n\t\t\t\t\turl: mediaUrl,\n\t\t\t\t\tanchor,\n\t\t\t\t} );\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\ttype: 'block',\n\t\t\tblocks: [ 'core/video' ],\n\t\t\tisMatch: ( { mediaType, mediaUrl } ) => {\n\t\t\t\treturn ! mediaUrl || mediaType === 'video';\n\t\t\t},\n\t\t\ttransform: ( { mediaId, mediaUrl, anchor } ) => {\n\t\t\t\treturn createBlock( 'core/video', {\n\t\t\t\t\tid: mediaId,\n\t\t\t\t\tsrc: mediaUrl,\n\t\t\t\t\tanchor,\n\t\t\t\t} );\n\t\t\t},\n\t\t},\n\t],\n};\n\nexport default transforms;\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/media-text/transforms.js"],"names":["transforms","from","type","blocks","transform","alt","url","id","anchor","mediaAlt","mediaId","mediaUrl","mediaType","src","innerBlocks","align","backgroundType","customGradient","customOverlayColor","gradient","overlayColor","additionalAttributes","style","color","background","backgroundColor","to","isMatch","focalPoint","textColor","coverAttributes","dimRatio","customTextColor","text","coloredInnerBlocks","map","innerBlock","attributes","innerStyle","newAttributes","name"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,UAAU,GAAG;AAClBC,EAAAA,IAAI,EAAE,CACL;AACCC,IAAAA,IAAI,EAAE,OADP;AAECC,IAAAA,MAAM,EAAE,CAAE,YAAF,CAFT;AAGCC,IAAAA,SAAS,EAAE;AAAA,UAAE;AAAEC,QAAAA,GAAF;AAAOC,QAAAA,GAAP;AAAYC,QAAAA,EAAZ;AAAgBC,QAAAA;AAAhB,OAAF;AAAA,aACV,yBAAa,iBAAb,EAAgC;AAC/BC,QAAAA,QAAQ,EAAEJ,GADqB;AAE/BK,QAAAA,OAAO,EAAEH,EAFsB;AAG/BI,QAAAA,QAAQ,EAAEL,GAHqB;AAI/BM,QAAAA,SAAS,EAAE,OAJoB;AAK/BJ,QAAAA;AAL+B,OAAhC,CADU;AAAA;AAHZ,GADK,EAaL;AACCN,IAAAA,IAAI,EAAE,OADP;AAECC,IAAAA,MAAM,EAAE,CAAE,YAAF,CAFT;AAGCC,IAAAA,SAAS,EAAE;AAAA,UAAE;AAAES,QAAAA,GAAF;AAAON,QAAAA,EAAP;AAAWC,QAAAA;AAAX,OAAF;AAAA,aACV,yBAAa,iBAAb,EAAgC;AAC/BE,QAAAA,OAAO,EAAEH,EADsB;AAE/BI,QAAAA,QAAQ,EAAEE,GAFqB;AAG/BD,QAAAA,SAAS,EAAE,OAHoB;AAI/BJ,QAAAA;AAJ+B,OAAhC,CADU;AAAA;AAHZ,GAbK,EAwBL;AACCN,IAAAA,IAAI,EAAE,OADP;AAECC,IAAAA,MAAM,EAAE,CAAE,YAAF,CAFT;AAGCC,IAAAA,SAAS,EAAE,QAaVU,WAbU,KAcN;AAAA,UAbJ;AACCC,QAAAA,KADD;AAECV,QAAAA,GAFD;AAGCG,QAAAA,MAHD;AAICQ,QAAAA,cAJD;AAKCC,QAAAA,cALD;AAMCC,QAAAA,kBAND;AAOCC,QAAAA,QAPD;AAQCZ,QAAAA,EARD;AASCa,QAAAA,YATD;AAUCd,QAAAA;AAVD,OAaI;AACJ,UAAIe,oBAAoB,GAAG,EAA3B;;AAEA,UAAKJ,cAAL,EAAsB;AACrBI,QAAAA,oBAAoB,GAAG;AACtBC,UAAAA,KAAK,EAAE;AACNC,YAAAA,KAAK,EAAE;AACNJ,cAAAA,QAAQ,EAAEF;AADJ;AADD;AADe,SAAvB;AAOA,OARD,MAQO,IAAKC,kBAAL,EAA0B;AAChCG,QAAAA,oBAAoB,GAAG;AACtBC,UAAAA,KAAK,EAAE;AACNC,YAAAA,KAAK,EAAE;AACNC,cAAAA,UAAU,EAAEN;AADN;AADD;AADe,SAAvB;AAOA;;AAED,aAAO,yBACN,iBADM,EAEN;AACCH,QAAAA,KADD;AAECP,QAAAA,MAFD;AAGCiB,QAAAA,eAAe,EAAEL,YAHlB;AAICD,QAAAA,QAJD;AAKCV,QAAAA,QAAQ,EAAEJ,GALX;AAMCK,QAAAA,OAAO,EAAEH,EANV;AAOCK,QAAAA,SAAS,EAAEI,cAPZ;AAQCL,QAAAA,QAAQ,EAAEL,GARX;AASC,WAAGe;AATJ,OAFM,EAaNP,WAbM,CAAP;AAeA;AArDF,GAxBK,CADY;AAiFlBY,EAAAA,EAAE,EAAE,CACH;AACCxB,IAAAA,IAAI,EAAE,OADP;AAECC,IAAAA,MAAM,EAAE,CAAE,YAAF,CAFT;AAGCwB,IAAAA,OAAO,EAAE,SAA+B;AAAA,UAA7B;AAAEf,QAAAA,SAAF;AAAaD,QAAAA;AAAb,OAA6B;AACvC,aAAO,CAAEA,QAAF,IAAcC,SAAS,KAAK,OAAnC;AACA,KALF;AAMCR,IAAAA,SAAS,EAAE,SAA+C;AAAA,UAA7C;AAAEK,QAAAA,QAAF;AAAYC,QAAAA,OAAZ;AAAqBC,QAAAA,QAArB;AAA+BH,QAAAA;AAA/B,OAA6C;AACzD,aAAO,yBAAa,YAAb,EAA2B;AACjCH,QAAAA,GAAG,EAAEI,QAD4B;AAEjCF,QAAAA,EAAE,EAAEG,OAF6B;AAGjCJ,QAAAA,GAAG,EAAEK,QAH4B;AAIjCH,QAAAA;AAJiC,OAA3B,CAAP;AAMA;AAbF,GADG,EAgBH;AACCN,IAAAA,IAAI,EAAE,OADP;AAECC,IAAAA,MAAM,EAAE,CAAE,YAAF,CAFT;AAGCwB,IAAAA,OAAO,EAAE,SAA+B;AAAA,UAA7B;AAAEf,QAAAA,SAAF;AAAaD,QAAAA;AAAb,OAA6B;AACvC,aAAO,CAAEA,QAAF,IAAcC,SAAS,KAAK,OAAnC;AACA,KALF;AAMCR,IAAAA,SAAS,EAAE,SAAqC;AAAA,UAAnC;AAAEM,QAAAA,OAAF;AAAWC,QAAAA,QAAX;AAAqBH,QAAAA;AAArB,OAAmC;AAC/C,aAAO,yBAAa,YAAb,EAA2B;AACjCD,QAAAA,EAAE,EAAEG,OAD6B;AAEjCG,QAAAA,GAAG,EAAEF,QAF4B;AAGjCH,QAAAA;AAHiC,OAA3B,CAAP;AAKA;AAZF,GAhBG,EA8BH;AACCN,IAAAA,IAAI,EAAE,OADP;AAECC,IAAAA,MAAM,EAAE,CAAE,YAAF,CAFT;AAGCC,IAAAA,SAAS,EAAE,QAcVU,WAdU,KAeN;AAAA;;AAAA,UAdJ;AACCC,QAAAA,KADD;AAECP,QAAAA,MAFD;AAGCiB,QAAAA,eAHD;AAICG,QAAAA,UAJD;AAKCT,QAAAA,QALD;AAMCV,QAAAA,QAND;AAOCC,QAAAA,OAPD;AAQCE,QAAAA,SARD;AASCD,QAAAA,QATD;AAUCW,QAAAA,KAVD;AAWCO,QAAAA;AAXD,OAcI;AACJ,YAAMR,oBAAoB,GAAG,EAA7B;;AAEA,UAAKC,KAAL,aAAKA,KAAL,+BAAKA,KAAK,CAAEC,KAAZ,yCAAK,aAAcJ,QAAnB,EAA8B;AAC7BE,QAAAA,oBAAoB,CAACJ,cAArB,GAAsCK,KAAK,CAACC,KAAN,CAAYJ,QAAlD;AACA,OAFD,MAEO,IAAKG,KAAL,aAAKA,KAAL,gCAAKA,KAAK,CAAEC,KAAZ,0CAAK,cAAcC,UAAnB,EAAgC;AACtCH,QAAAA,oBAAoB,CAACH,kBAArB,GACCI,KAAK,CAACC,KAAN,CAAYC,UADb;AAEA;;AAED,YAAMM,eAAe,GAAG;AACvBf,QAAAA,KADuB;AAEvBV,QAAAA,GAAG,EAAEI,QAFkB;AAGvBD,QAAAA,MAHuB;AAIvBQ,QAAAA,cAAc,EAAEJ,SAJO;AAKvBmB,QAAAA,QAAQ,EAAE,CAAC,CAAEpB,QAAH,GAAc,EAAd,GAAmB,GALN;AAMvBiB,QAAAA,UANuB;AAOvBT,QAAAA,QAPuB;AAQvBZ,QAAAA,EAAE,EAAEG,OARmB;AASvBU,QAAAA,YAAY,EAAEK,eATS;AAUvBnB,QAAAA,GAAG,EAAEK,QAVkB;AAWvB,WAAGU;AAXoB,OAAxB;AAaA,YAAMW,eAAe,GAAGV,KAAH,aAAGA,KAAH,wCAAGA,KAAK,CAAEC,KAAV,kDAAG,cAAcU,IAAtC,CAvBI,CAyBJ;AACA;AACA;;AACA,UAAK,CAAEJ,SAAF,IAAe,CAAEG,eAAtB,EAAwC;AACvC,eAAO,yBACN,YADM,EAENF,eAFM,EAGNhB,WAHM,CAAP;AAKA;;AAED,YAAMoB,kBAAkB,GAAGpB,WAAW,CAACqB,GAAZ,CAAmBC,UAAF,IAAkB;AAAA;;AAC7D,cAAM;AACLC,UAAAA,UAAU,EAAE;AAAEf,YAAAA,KAAK,EAAEgB;AAAT;AADP,YAEFF,UAFJ,CAD6D,CAK7D;AACA;;AACA,YACCA,UAAU,CAACC,UAAX,CAAsBR,SAAtB,IACAS,UADA,aACAA,UADA,oCACAA,UAAU,CAAEf,KADZ,8CACA,kBAAmBU,IAFpB,EAGE;AACD,iBAAOG,UAAP;AACA;;AAED,cAAMG,aAAa,GAAG;AAAEV,UAAAA;AAAF,SAAtB,CAd6D,CAgB7D;AACA;;AACA,YAAKG,eAAL,EAAuB;AACtBO,UAAAA,aAAa,CAACjB,KAAd,GAAsB,EACrB,GAAGgB,UADkB;AAErBf,YAAAA,KAAK,EAAE,EACN,IAAGe,UAAH,aAAGA,UAAH,uBAAGA,UAAU,CAAEf,KAAf,CADM;AAENU,cAAAA,IAAI,EAAED;AAFA;AAFc,WAAtB;AAOA;;AAED,eAAO,yBACNI,UAAU,CAACI,IADL,EAEN,EACC,GAAGJ,UAAU,CAACC,UADf;AAEC,aAAGE;AAFJ,SAFM,EAMNH,UAAU,CAACtB,WANL,CAAP;AAQA,OApC0B,CAA3B;AAsCA,aAAO,yBACN,YADM,EAENgB,eAFM,EAGNI,kBAHM,CAAP;AAKA;AAjGF,GA9BG;AAjFc,CAAnB;eAqNelC,U","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createBlock } from '@wordpress/blocks';\n\nconst transforms = {\n\tfrom: [\n\t\t{\n\t\t\ttype: 'block',\n\t\t\tblocks: [ 'core/image' ],\n\t\t\ttransform: ( { alt, url, id, anchor } ) =>\n\t\t\t\tcreateBlock( 'core/media-text', {\n\t\t\t\t\tmediaAlt: alt,\n\t\t\t\t\tmediaId: id,\n\t\t\t\t\tmediaUrl: url,\n\t\t\t\t\tmediaType: 'image',\n\t\t\t\t\tanchor,\n\t\t\t\t} ),\n\t\t},\n\t\t{\n\t\t\ttype: 'block',\n\t\t\tblocks: [ 'core/video' ],\n\t\t\ttransform: ( { src, id, anchor } ) =>\n\t\t\t\tcreateBlock( 'core/media-text', {\n\t\t\t\t\tmediaId: id,\n\t\t\t\t\tmediaUrl: src,\n\t\t\t\t\tmediaType: 'video',\n\t\t\t\t\tanchor,\n\t\t\t\t} ),\n\t\t},\n\t\t{\n\t\t\ttype: 'block',\n\t\t\tblocks: [ 'core/cover' ],\n\t\t\ttransform: (\n\t\t\t\t{\n\t\t\t\t\talign,\n\t\t\t\t\talt,\n\t\t\t\t\tanchor,\n\t\t\t\t\tbackgroundType,\n\t\t\t\t\tcustomGradient,\n\t\t\t\t\tcustomOverlayColor,\n\t\t\t\t\tgradient,\n\t\t\t\t\tid,\n\t\t\t\t\toverlayColor,\n\t\t\t\t\turl,\n\t\t\t\t},\n\t\t\t\tinnerBlocks\n\t\t\t) => {\n\t\t\t\tlet additionalAttributes = {};\n\n\t\t\t\tif ( customGradient ) {\n\t\t\t\t\tadditionalAttributes = {\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tcolor: {\n\t\t\t\t\t\t\t\tgradient: customGradient,\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} else if ( customOverlayColor ) {\n\t\t\t\t\tadditionalAttributes = {\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tcolor: {\n\t\t\t\t\t\t\t\tbackground: customOverlayColor,\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}\n\n\t\t\t\treturn createBlock(\n\t\t\t\t\t'core/media-text',\n\t\t\t\t\t{\n\t\t\t\t\t\talign,\n\t\t\t\t\t\tanchor,\n\t\t\t\t\t\tbackgroundColor: overlayColor,\n\t\t\t\t\t\tgradient,\n\t\t\t\t\t\tmediaAlt: alt,\n\t\t\t\t\t\tmediaId: id,\n\t\t\t\t\t\tmediaType: backgroundType,\n\t\t\t\t\t\tmediaUrl: url,\n\t\t\t\t\t\t...additionalAttributes,\n\t\t\t\t\t},\n\t\t\t\t\tinnerBlocks\n\t\t\t\t);\n\t\t\t},\n\t\t},\n\t],\n\tto: [\n\t\t{\n\t\t\ttype: 'block',\n\t\t\tblocks: [ 'core/image' ],\n\t\t\tisMatch: ( { mediaType, mediaUrl } ) => {\n\t\t\t\treturn ! mediaUrl || mediaType === 'image';\n\t\t\t},\n\t\t\ttransform: ( { mediaAlt, mediaId, mediaUrl, anchor } ) => {\n\t\t\t\treturn createBlock( 'core/image', {\n\t\t\t\t\talt: mediaAlt,\n\t\t\t\t\tid: mediaId,\n\t\t\t\t\turl: mediaUrl,\n\t\t\t\t\tanchor,\n\t\t\t\t} );\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\ttype: 'block',\n\t\t\tblocks: [ 'core/video' ],\n\t\t\tisMatch: ( { mediaType, mediaUrl } ) => {\n\t\t\t\treturn ! mediaUrl || mediaType === 'video';\n\t\t\t},\n\t\t\ttransform: ( { mediaId, mediaUrl, anchor } ) => {\n\t\t\t\treturn createBlock( 'core/video', {\n\t\t\t\t\tid: mediaId,\n\t\t\t\t\tsrc: mediaUrl,\n\t\t\t\t\tanchor,\n\t\t\t\t} );\n\t\t\t},\n\t\t},\n\t\t{\n\t\t\ttype: 'block',\n\t\t\tblocks: [ 'core/cover' ],\n\t\t\ttransform: (\n\t\t\t\t{\n\t\t\t\t\talign,\n\t\t\t\t\tanchor,\n\t\t\t\t\tbackgroundColor,\n\t\t\t\t\tfocalPoint,\n\t\t\t\t\tgradient,\n\t\t\t\t\tmediaAlt,\n\t\t\t\t\tmediaId,\n\t\t\t\t\tmediaType,\n\t\t\t\t\tmediaUrl,\n\t\t\t\t\tstyle,\n\t\t\t\t\ttextColor,\n\t\t\t\t},\n\t\t\t\tinnerBlocks\n\t\t\t) => {\n\t\t\t\tconst additionalAttributes = {};\n\n\t\t\t\tif ( style?.color?.gradient ) {\n\t\t\t\t\tadditionalAttributes.customGradient = style.color.gradient;\n\t\t\t\t} else if ( style?.color?.background ) {\n\t\t\t\t\tadditionalAttributes.customOverlayColor =\n\t\t\t\t\t\tstyle.color.background;\n\t\t\t\t}\n\n\t\t\t\tconst coverAttributes = {\n\t\t\t\t\talign,\n\t\t\t\t\talt: mediaAlt,\n\t\t\t\t\tanchor,\n\t\t\t\t\tbackgroundType: mediaType,\n\t\t\t\t\tdimRatio: !! mediaUrl ? 50 : 100,\n\t\t\t\t\tfocalPoint,\n\t\t\t\t\tgradient,\n\t\t\t\t\tid: mediaId,\n\t\t\t\t\toverlayColor: backgroundColor,\n\t\t\t\t\turl: mediaUrl,\n\t\t\t\t\t...additionalAttributes,\n\t\t\t\t};\n\t\t\t\tconst customTextColor = style?.color?.text;\n\n\t\t\t\t// Attempt to maintain any text color selection.\n\t\t\t\t// Cover block's do not opt into color block support so we\n\t\t\t\t// cannot directly copy the color attributes across.\n\t\t\t\tif ( ! textColor && ! customTextColor ) {\n\t\t\t\t\treturn createBlock(\n\t\t\t\t\t\t'core/cover',\n\t\t\t\t\t\tcoverAttributes,\n\t\t\t\t\t\tinnerBlocks\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tconst coloredInnerBlocks = innerBlocks.map( ( innerBlock ) => {\n\t\t\t\t\tconst {\n\t\t\t\t\t\tattributes: { style: innerStyle },\n\t\t\t\t\t} = innerBlock;\n\n\t\t\t\t\t// Only apply the media and text color if the inner block\n\t\t\t\t\t// doesn't set its own color block support selection.\n\t\t\t\t\tif (\n\t\t\t\t\t\tinnerBlock.attributes.textColor ||\n\t\t\t\t\t\tinnerStyle?.color?.text\n\t\t\t\t\t) {\n\t\t\t\t\t\treturn innerBlock;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst newAttributes = { textColor };\n\n\t\t\t\t\t// Only add or extend inner block's style object if we have\n\t\t\t\t\t// a custom text color from the media & text block.\n\t\t\t\t\tif ( customTextColor ) {\n\t\t\t\t\t\tnewAttributes.style = {\n\t\t\t\t\t\t\t...innerStyle,\n\t\t\t\t\t\t\tcolor: {\n\t\t\t\t\t\t\t\t...innerStyle?.color,\n\t\t\t\t\t\t\t\ttext: customTextColor,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\n\t\t\t\t\treturn createBlock(\n\t\t\t\t\t\tinnerBlock.name,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t...innerBlock.attributes,\n\t\t\t\t\t\t\t...newAttributes,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tinnerBlock.innerBlocks\n\t\t\t\t\t);\n\t\t\t\t} );\n\n\t\t\t\treturn createBlock(\n\t\t\t\t\t'core/cover',\n\t\t\t\t\tcoverAttributes,\n\t\t\t\t\tcoloredInnerBlocks\n\t\t\t\t);\n\t\t\t},\n\t\t},\n\t],\n};\n\nexport default transforms;\n"]}

package/build/navigation/edit/index.js

@@ -11,8 +11,6 @@ var _element = require("@wordpress/element");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _lodash = require("lodash");
-
 var _blockEditor = require("@wordpress/block-editor");
 
 var _coreData = require("@wordpress/core-data");
@@ -106,9 +104,6 @@ function Navigation(_ref) {
     setOverlayBackgroundColor,
     overlayTextColor,
     setOverlayTextColor,
-    context: {
-      navigationArea
-    },
     // These props are used by the navigation editor to override specific
     // navigation block settings.
     hasSubmenuIndicatorSetting = true,
@@ -126,27 +121,15 @@ function Navigation(_ref) {
     } = {},
     hasIcon
   } = attributes;
-  let areaMenu,
-      setAreaMenu = _lodash.noop; // Navigation areas are deprecated and on their way out. Let's not perform
-  // the request unless we're in an environment where the endpoint exists.
-
-  if (process.env.IS_GUTENBERG_PLUGIN) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    [areaMenu, setAreaMenu] = (0, _coreData.useEntityProp)('root', 'navigationArea', 'navigation', navigationArea);
-  }
-
-  const navigationAreaMenu = areaMenu === 0 ? undefined : areaMenu;
-  const ref = navigationArea ? navigationAreaMenu : attributes.ref;
+  const ref = attributes.ref;
   const registry = (0, _data.useRegistry)();
-  const setRef = (0, _element.useCallback)(postId => {
+
+  const setRef = postId => {
     setAttributes({
       ref: postId
     });
+  };
 
-    if (navigationArea) {
-      setAreaMenu(postId);
-    }
-  }, [navigationArea]);
   const [hasAlreadyRendered, RecursionProvider] = (0, _blockEditor.__experimentalUseNoRecursiveRenders)(`navigationMenu/${ref}`); // Preload classic menus, so that they don't suddenly pop-in when viewing
   // the Select Menu dropdown.
 
@@ -216,7 +199,6 @@ function Navigation(_ref) {
     __unstableMarkNextChangeAsNotPersistent
   } = (0, _data.useDispatch)(_blockEditor.store);
   const [hasSavedUnsavedInnerBlocks, setHasSavedUnsavedInnerBlocks] = (0, _element.useState)(false);
-  const isWithinUnassignedArea = !!navigationArea && !ref;
   const [isResponsiveMenuOpen, setResponsiveMenuVisibility] = (0, _element.useState)(false);
   const [overlayMenuPreview, setOverlayMenuPreview] = (0, _element.useState)(false);
   const {
@@ -258,9 +240,8 @@ function Navigation(_ref) {
   // - there is no classic menu conversion process in progress.
   // - there is no menu creation process in progress.
   // - there are no uncontrolled blocks.
-  // - (legacy) there is a Navigation Area without a ref attribute pointing to a Navigation Post.
 
-  const isPlaceholder = !ref && !isCreatingNavigationMenu && !isConvertingClassicMenu && hasResolvedNavigationMenus && (!hasUncontrolledInnerBlocks || isWithinUnassignedArea);
+  const isPlaceholder = !ref && !isCreatingNavigationMenu && !isConvertingClassicMenu && hasResolvedNavigationMenus && !hasUncontrolledInnerBlocks;
   const isEntityAvailable = !isNavigationMenuMissing && isNavigationMenuResolved; // "loading" state:
   // - there is a menu creation process in progress.
   // - there is a classic menu conversion process in progress.
@@ -270,6 +251,7 @@ function Navigation(_ref) {
 
   const isLoading = !hasResolvedNavigationMenus || isCreatingNavigationMenu || isConvertingClassicMenu || !!(ref && !isEntityAvailable && !isConvertingClassicMenu);
   const textDecoration = (_attributes$style = attributes.style) === null || _attributes$style === void 0 ? void 0 : (_attributes$style$typ = _attributes$style.typography) === null || _attributes$style$typ === void 0 ? void 0 : _attributes$style$typ.textDecoration;
+  const hasBlockOverlay = (0, _blockEditor.__experimentalUseBlockOverlayActive)(clientId);
   const blockProps = (0, _blockEditor.useBlockProps)({
     ref: navRef,
     className: (0, _classnames.default)(className, {
@@ -284,12 +266,15 @@ function Navigation(_ref) {
       [(0, _blockEditor.getColorClassName)('color', textColor === null || textColor === void 0 ? void 0 : textColor.slug)]: !!(textColor !== null && textColor !== void 0 && textColor.slug),
       'has-background': !!backgroundColor.color || backgroundColor.class,
       [(0, _blockEditor.getColorClassName)('background-color', backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.slug)]: !!(backgroundColor !== null && backgroundColor !== void 0 && backgroundColor.slug),
-      [`has-text-decoration-${textDecoration}`]: textDecoration
+      [`has-text-decoration-${textDecoration}`]: textDecoration,
+      'block-editor-block-content-overlay': hasBlockOverlay
     }),
     style: {
       color: !(textColor !== null && textColor !== void 0 && textColor.slug) && (textColor === null || textColor === void 0 ? void 0 : textColor.color),
       backgroundColor: !(backgroundColor !== null && backgroundColor !== void 0 && backgroundColor.slug) && (backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.color)
     }
+  }, {
+    __unstableIsDisabled: hasBlockOverlay
   });
   const overlayClassnames = (0, _classnames.default)({
     'has-text-color': !!overlayTextColor.color || !!(overlayTextColor !== null && overlayTextColor !== void 0 && overlayTextColor.class),
@@ -411,10 +396,6 @@ function Navigation(_ref) {
   }, [isDraftNavigationMenu, isEntityAvailable, shouldFocusNavigationSelector]);
   const resetToEmptyBlock = (0, _element.useCallback)(() => {
     registry.batch(() => {
-      if (navigationArea) {
-        setAreaMenu(0);
-      }
-
       setAttributes({
         ref: undefined
       });
@@ -423,89 +404,12 @@ function Navigation(_ref) {
         replaceInnerBlocks(clientId, []);
       }
     });
-  }, [clientId, ref]); // If the block has inner blocks, but no menu id, then these blocks are either:
-  // - inserted via a pattern.
-  // - inserted directly via Code View (or otherwise).
-  // - from an older version of navigation block added before the block used a wp_navigation entity.
-  // Consider this state as 'unsaved' and offer an uncontrolled version of inner blocks,
-  // that automatically saves the menu as an entity when changes are made to the inner blocks.
-
-  const hasUnsavedBlocks = hasUncontrolledInnerBlocks && !isEntityAvailable;
-
-  if (hasUnsavedBlocks) {
-    return (0, _element.createElement)(TagName, blockProps, (0, _element.createElement)(_responsiveWrapper.default, {
-      id: clientId,
-      onToggle: setResponsiveMenuVisibility,
-      isOpen: isResponsiveMenuOpen,
-      isResponsive: 'never' !== overlayMenu,
-      isHiddenByDefault: 'always' === overlayMenu,
-      classNames: overlayClassnames,
-      styles: overlayStyles
-    }, (0, _element.createElement)(_unsavedInnerBlocks.default, {
-      blockProps: blockProps,
-      blocks: uncontrolledInnerBlocks,
-      clientId: clientId,
-      navigationMenus: navigationMenus,
-      hasSelection: isSelected || isInnerBlockSelected,
-      hasSavedUnsavedInnerBlocks: hasSavedUnsavedInnerBlocks,
-      onSave: post => {
-        // Set some state used as a guard to prevent the creation of multiple posts.
-        setHasSavedUnsavedInnerBlocks(true); // Switch to using the wp_navigation entity.
-
-        setRef(post.id);
-        showNavigationMenuCreateNotice((0, _i18n.__)(`New Navigation Menu created.`));
-      }
-    })));
-  } // Show a warning if the selected menu is no longer available.
-  // TODO - the user should be able to select a new one?
-
-
-  if (ref && isNavigationMenuMissing) {
-    return (0, _element.createElement)("div", blockProps, (0, _element.createElement)(_blockEditor.Warning, null, (0, _i18n.__)('Navigation menu has been deleted or is unavailable. '), (0, _element.createElement)(_components.Button, {
-      onClick: resetToEmptyBlock,
-      variant: "link"
-    }, (0, _i18n.__)('Create a new menu?'))));
-  }
-
-  if (isEntityAvailable && hasAlreadyRendered) {
-    return (0, _element.createElement)("div", blockProps, (0, _element.createElement)(_blockEditor.Warning, null, (0, _i18n.__)('Block cannot be rendered inside itself.')));
-  }
-
-  const PlaceholderComponent = CustomPlaceholder ? CustomPlaceholder : _placeholder.default;
+  }, [clientId, ref]);
   const isResponsive = 'never' !== overlayMenu;
   const overlayMenuPreviewClasses = (0, _classnames.default)('wp-block-navigation__overlay-menu-preview', {
     open: overlayMenuPreview
   });
-
-  if (isPlaceholder) {
-    return (0, _element.createElement)(TagName, blockProps, (0, _element.createElement)(PlaceholderComponent, {
-      isSelected: isSelected,
-      currentMenuId: ref,
-      clientId: clientId,
-      canUserCreateNavigationMenu: canUserCreateNavigationMenu,
-      isResolvingCanUserCreateNavigationMenu: isResolvingCanUserCreateNavigationMenu,
-      onFinish: handleSelectNavigation,
-      onCreateEmpty: () => createNavigationMenu('', [])
-    }));
-  }
-
-  return (0, _element.createElement)(_coreData.EntityProvider, {
-    kind: "postType",
-    type: "wp_navigation",
-    id: ref
-  }, (0, _element.createElement)(RecursionProvider, null, (0, _element.createElement)(_blockEditor.BlockControls, null, !isDraftNavigationMenu && isEntityAvailable && (0, _element.createElement)(_components.ToolbarGroup, {
-    className: "wp-block-navigation__toolbar-menu-selector"
-  }, (0, _element.createElement)(_navigationMenuSelector.default, {
-    ref: navigationSelectorRef,
-    currentMenuId: ref,
-    clientId: clientId,
-    onSelect: handleSelectNavigation,
-    onCreateNew: resetToEmptyBlock
-    /* translators: %s: The name of a menu. */
-    ,
-    actionLabel: (0, _i18n.__)("Switch to '%s'"),
-    showManageActions: true
-  }))), (0, _element.createElement)(_blockEditor.InspectorControls, null, hasSubmenuIndicatorSetting && (0, _element.createElement)(_components.PanelBody, {
+  const stylingInspectorControls = (0, _element.createElement)(_blockEditor.InspectorControls, null, hasSubmenuIndicatorSetting && (0, _element.createElement)(_components.PanelBody, {
     title: (0, _i18n.__)('Display')
   }, isResponsive && (0, _element.createElement)(_components.Button, {
     className: overlayMenuPreviewClasses,
@@ -586,7 +490,85 @@ function Navigation(_ref) {
   }), (0, _element.createElement)(_blockEditor.ContrastChecker, {
     backgroundColor: detectedOverlayBackgroundColor,
     textColor: detectedOverlayColor
-  })))), isEntityAvailable && (0, _element.createElement)(_blockEditor.InspectorControls, {
+  })))); // If the block has inner blocks, but no menu id, then these blocks are either:
+  // - inserted via a pattern.
+  // - inserted directly via Code View (or otherwise).
+  // - from an older version of navigation block added before the block used a wp_navigation entity.
+  // Consider this state as 'unsaved' and offer an uncontrolled version of inner blocks,
+  // that automatically saves the menu as an entity when changes are made to the inner blocks.
+
+  const hasUnsavedBlocks = hasUncontrolledInnerBlocks && !isEntityAvailable;
+
+  if (hasUnsavedBlocks) {
+    return (0, _element.createElement)(TagName, blockProps, stylingInspectorControls, (0, _element.createElement)(_responsiveWrapper.default, {
+      id: clientId,
+      onToggle: setResponsiveMenuVisibility,
+      isOpen: isResponsiveMenuOpen,
+      isResponsive: 'never' !== overlayMenu,
+      isHiddenByDefault: 'always' === overlayMenu,
+      classNames: overlayClassnames,
+      styles: overlayStyles
+    }, (0, _element.createElement)(_unsavedInnerBlocks.default, {
+      blockProps: blockProps,
+      blocks: uncontrolledInnerBlocks,
+      clientId: clientId,
+      navigationMenus: navigationMenus,
+      hasSelection: isSelected || isInnerBlockSelected,
+      hasSavedUnsavedInnerBlocks: hasSavedUnsavedInnerBlocks,
+      onSave: post => {
+        // Set some state used as a guard to prevent the creation of multiple posts.
+        setHasSavedUnsavedInnerBlocks(true); // Switch to using the wp_navigation entity.
+
+        setRef(post.id);
+        showNavigationMenuCreateNotice((0, _i18n.__)(`New Navigation Menu created.`));
+      }
+    })));
+  } // Show a warning if the selected menu is no longer available.
+  // TODO - the user should be able to select a new one?
+
+
+  if (ref && isNavigationMenuMissing) {
+    return (0, _element.createElement)("div", blockProps, (0, _element.createElement)(_blockEditor.Warning, null, (0, _i18n.__)('Navigation menu has been deleted or is unavailable. '), (0, _element.createElement)(_components.Button, {
+      onClick: resetToEmptyBlock,
+      variant: "link"
+    }, (0, _i18n.__)('Create a new menu?'))));
+  }
+
+  if (isEntityAvailable && hasAlreadyRendered) {
+    return (0, _element.createElement)("div", blockProps, (0, _element.createElement)(_blockEditor.Warning, null, (0, _i18n.__)('Block cannot be rendered inside itself.')));
+  }
+
+  const PlaceholderComponent = CustomPlaceholder ? CustomPlaceholder : _placeholder.default;
+
+  if (isPlaceholder) {
+    return (0, _element.createElement)(TagName, blockProps, (0, _element.createElement)(PlaceholderComponent, {
+      isSelected: isSelected,
+      currentMenuId: ref,
+      clientId: clientId,
+      canUserCreateNavigationMenu: canUserCreateNavigationMenu,
+      isResolvingCanUserCreateNavigationMenu: isResolvingCanUserCreateNavigationMenu,
+      onFinish: handleSelectNavigation,
+      onCreateEmpty: () => createNavigationMenu('', [])
+    }));
+  }
+
+  return (0, _element.createElement)(_coreData.EntityProvider, {
+    kind: "postType",
+    type: "wp_navigation",
+    id: ref
+  }, (0, _element.createElement)(RecursionProvider, null, (0, _element.createElement)(_blockEditor.BlockControls, null, !isDraftNavigationMenu && isEntityAvailable && (0, _element.createElement)(_components.ToolbarGroup, {
+    className: "wp-block-navigation__toolbar-menu-selector"
+  }, (0, _element.createElement)(_navigationMenuSelector.default, {
+    ref: navigationSelectorRef,
+    currentMenuId: ref,
+    clientId: clientId,
+    onSelect: handleSelectNavigation,
+    onCreateNew: resetToEmptyBlock
+    /* translators: %s: The name of a menu. */
+    ,
+    actionLabel: (0, _i18n.__)("Switch to '%s'"),
+    showManageActions: true
+  }))), stylingInspectorControls, isEntityAvailable && (0, _element.createElement)(_blockEditor.InspectorControls, {
     __experimentalGroup: "advanced"
   }, hasResolvedCanUserUpdateNavigationMenu && canUserUpdateNavigationMenu && (0, _element.createElement)(_navigationMenuNameControl.default, null), hasResolvedCanUserDeleteNavigationMenu && canUserDeleteNavigationMenu && (0, _element.createElement)(_navigationMenuDeleteControl.default, {
     onDelete: function () {