@wordpress/block-editor 7.0.1 → 8.0.0

package/build/components/duotone-control/index.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,15 +13,9 @@ var _i18n = require("@wordpress/i18n");
 
 var _keycodes = require("@wordpress/keycodes");
 
-var _duotonePickerPopover = _interopRequireDefault(require("./duotone-picker-popover"));
-
 /**
  * WordPress dependencies
  */
-
-/**
- * Internal dependencies
- */
 function DuotoneControl({
   colorPalette,
   duotonePalette,
@@ -32,38 +24,48 @@ function DuotoneControl({
   value,
   onChange
 }) {
-  const [isOpen, setIsOpen] = (0, _element.useState)(false);
-
-  const onToggle = () => {
-    setIsOpen(prev => !prev);
-  };
-
-  const openOnArrowDown = event => {
-    if (!isOpen && event.keyCode === _keycodes.DOWN) {
-      event.preventDefault();
-      onToggle();
-    }
-  };
+  return (0, _element.createElement)(_components.Dropdown, {
+    popoverProps: {
+      className: 'block-editor-duotone-control__popover',
+      headerTitle: (0, _i18n.__)('Duotone'),
+      isAlternate: true
+    },
+    renderToggle: ({
+      isOpen,
+      onToggle
+    }) => {
+      const openOnArrowDown = event => {
+        if (!isOpen && event.keyCode === _keycodes.DOWN) {
+          event.preventDefault();
+          onToggle();
+        }
+      };
 
-  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.ToolbarButton, {
-    showTooltip: true,
-    onClick: onToggle,
-    "aria-haspopup": "true",
-    "aria-expanded": isOpen,
-    onKeyDown: openOnArrowDown,
-    label: (0, _i18n.__)('Apply duotone filter'),
-    icon: (0, _element.createElement)(_components.DuotoneSwatch, {
-      values: value
-    })
-  }), isOpen && (0, _element.createElement)(_duotonePickerPopover.default, {
-    value: value,
-    onChange: onChange,
-    onToggle: onToggle,
-    duotonePalette: duotonePalette,
-    colorPalette: colorPalette,
-    disableCustomColors: disableCustomColors,
-    disableCustomDuotone: disableCustomDuotone
-  }));
+      return (0, _element.createElement)(_components.ToolbarButton, {
+        showTooltip: true,
+        onClick: onToggle,
+        "aria-haspopup": "true",
+        "aria-expanded": isOpen,
+        onKeyDown: openOnArrowDown,
+        label: (0, _i18n.__)('Apply duotone filter'),
+        icon: (0, _element.createElement)(_components.DuotoneSwatch, {
+          values: value
+        })
+      });
+    },
+    renderContent: () => (0, _element.createElement)(_components.MenuGroup, {
+      label: (0, _i18n.__)('Duotone')
+    }, (0, _element.createElement)("div", {
+      className: "block-editor-duotone-control__description"
+    }, (0, _i18n.__)('Create a two-tone color effect without losing your original image.')), (0, _element.createElement)(_components.DuotonePicker, {
+      colorPalette: colorPalette,
+      duotonePalette: duotonePalette,
+      disableCustomColors: disableCustomColors,
+      disableCustomDuotone: disableCustomDuotone,
+      value: value,
+      onChange: onChange
+    }))
+  });
 }
 
 var _default = DuotoneControl;

package/build/components/duotone-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/duotone-control/index.js"],"names":["DuotoneControl","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","isOpen","setIsOpen","onToggle","prev","openOnArrowDown","event","keyCode","DOWN","preventDefault"],"mappings":";;;;;;;;;AAIA;;AADA;;AAEA;;AACA;;AAKA;;AAXA;AACA;AACA;;AAMA;AACA;AACA;AAGA,SAASA,cAAT,CAAyB;AACxBC,EAAAA,YADwB;AAExBC,EAAAA,cAFwB;AAGxBC,EAAAA,mBAHwB;AAIxBC,EAAAA,oBAJwB;AAKxBC,EAAAA,KALwB;AAMxBC,EAAAA;AANwB,CAAzB,EAOI;AACH,QAAM,CAAEC,MAAF,EAAUC,SAAV,IAAwB,uBAAU,KAAV,CAA9B;;AAEA,QAAMC,QAAQ,GAAG,MAAM;AACtBD,IAAAA,SAAS,CAAIE,IAAF,IAAY,CAAEA,IAAhB,CAAT;AACA,GAFD;;AAIA,QAAMC,eAAe,GAAKC,KAAF,IAAa;AACpC,QAAK,CAAEL,MAAF,IAAYK,KAAK,CAACC,OAAN,KAAkBC,cAAnC,EAA0C;AACzCF,MAAAA,KAAK,CAACG,cAAN;AACAN,MAAAA,QAAQ;AACR;AACD,GALD;;AAOA,SACC,qDACC,4BAAC,yBAAD;AACC,IAAA,WAAW,MADZ;AAEC,IAAA,OAAO,EAAGA,QAFX;AAGC,qBAAc,MAHf;AAIC,qBAAgBF,MAJjB;AAKC,IAAA,SAAS,EAAGI,eALb;AAMC,IAAA,KAAK,EAAG,cAAI,sBAAJ,CANT;AAOC,IAAA,IAAI,EAAG,4BAAC,yBAAD;AAAe,MAAA,MAAM,EAAGN;AAAxB;AAPR,IADD,EAUGE,MAAM,IACP,4BAAC,6BAAD;AACC,IAAA,KAAK,EAAGF,KADT;AAEC,IAAA,QAAQ,EAAGC,QAFZ;AAGC,IAAA,QAAQ,EAAGG,QAHZ;AAIC,IAAA,cAAc,EAAGP,cAJlB;AAKC,IAAA,YAAY,EAAGD,YALhB;AAMC,IAAA,mBAAmB,EAAGE,mBANvB;AAOC,IAAA,oBAAoB,EAAGC;AAPxB,IAXF,CADD;AAwBA;;eAEcJ,c","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToolbarButton, DuotoneSwatch } from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { DOWN } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport DuotonePickerPopover from './duotone-picker-popover';\n\nfunction DuotoneControl( {\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n} ) {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\n\tconst onToggle = () => {\n\t\tsetIsOpen( ( prev ) => ! prev );\n\t};\n\n\tconst openOnArrowDown = ( event ) => {\n\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\tevent.preventDefault();\n\t\t\tonToggle();\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ToolbarButton\n\t\t\t\tshowTooltip\n\t\t\t\tonClick={ onToggle }\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\tlabel={ __( 'Apply duotone filter' ) }\n\t\t\t\ticon={ <DuotoneSwatch values={ value } /> }\n\t\t\t/>\n\t\t\t{ isOpen && (\n\t\t\t\t<DuotonePickerPopover\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tonToggle={ onToggle }\n\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\tcolorPalette={ colorPalette }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tdisableCustomDuotone={ disableCustomDuotone }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default DuotoneControl;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/duotone-control/index.js"],"names":["DuotoneControl","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","className","headerTitle","isAlternate","isOpen","onToggle","openOnArrowDown","event","keyCode","DOWN","preventDefault"],"mappings":";;;;;;;;;AAGA;;AAOA;;AACA;;AAXA;AACA;AACA;AAWA,SAASA,cAAT,CAAyB;AACxBC,EAAAA,YADwB;AAExBC,EAAAA,cAFwB;AAGxBC,EAAAA,mBAHwB;AAIxBC,EAAAA,oBAJwB;AAKxBC,EAAAA,KALwB;AAMxBC,EAAAA;AANwB,CAAzB,EAOI;AACH,SACC,4BAAC,oBAAD;AACC,IAAA,YAAY,EAAG;AACdC,MAAAA,SAAS,EAAE,uCADG;AAEdC,MAAAA,WAAW,EAAE,cAAI,SAAJ,CAFC;AAGdC,MAAAA,WAAW,EAAE;AAHC,KADhB;AAMC,IAAA,YAAY,EAAG,CAAE;AAAEC,MAAAA,MAAF;AAAUC,MAAAA;AAAV,KAAF,KAA4B;AAC1C,YAAMC,eAAe,GAAKC,KAAF,IAAa;AACpC,YAAK,CAAEH,MAAF,IAAYG,KAAK,CAACC,OAAN,KAAkBC,cAAnC,EAA0C;AACzCF,UAAAA,KAAK,CAACG,cAAN;AACAL,UAAAA,QAAQ;AACR;AACD,OALD;;AAMA,aACC,4BAAC,yBAAD;AACC,QAAA,WAAW,MADZ;AAEC,QAAA,OAAO,EAAGA,QAFX;AAGC,yBAAc,MAHf;AAIC,yBAAgBD,MAJjB;AAKC,QAAA,SAAS,EAAGE,eALb;AAMC,QAAA,KAAK,EAAG,cAAI,sBAAJ,CANT;AAOC,QAAA,IAAI,EAAG,4BAAC,yBAAD;AAAe,UAAA,MAAM,EAAGP;AAAxB;AAPR,QADD;AAWA,KAxBF;AAyBC,IAAA,aAAa,EAAG,MACf,4BAAC,qBAAD;AAAW,MAAA,KAAK,EAAG,cAAI,SAAJ;AAAnB,OACC;AAAK,MAAA,SAAS,EAAC;AAAf,OACG,cACD,oEADC,CADH,CADD,EAMC,4BAAC,yBAAD;AACC,MAAA,YAAY,EAAGJ,YADhB;AAEC,MAAA,cAAc,EAAGC,cAFlB;AAGC,MAAA,mBAAmB,EAAGC,mBAHvB;AAIC,MAAA,oBAAoB,EAAGC,oBAJxB;AAKC,MAAA,KAAK,EAAGC,KALT;AAMC,MAAA,QAAQ,EAAGC;AANZ,MAND;AA1BF,IADD;AA6CA;;eAEcN,c","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tDropdown,\n\tDuotonePicker,\n\tDuotoneSwatch,\n\tMenuGroup,\n\tToolbarButton,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { DOWN } from '@wordpress/keycodes';\n\nfunction DuotoneControl( {\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n} ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ {\n\t\t\t\tclassName: 'block-editor-duotone-control__popover',\n\t\t\t\theaderTitle: __( 'Duotone' ),\n\t\t\t\tisAlternate: true,\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\tconst openOnArrowDown = ( event ) => {\n\t\t\t\t\tif ( ! isOpen && event.keyCode === DOWN ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t\treturn (\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tonKeyDown={ openOnArrowDown }\n\t\t\t\t\t\tlabel={ __( 'Apply duotone filter' ) }\n\t\t\t\t\t\ticon={ <DuotoneSwatch values={ value } /> }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<MenuGroup label={ __( 'Duotone' ) }>\n\t\t\t\t\t<div className=\"block-editor-duotone-control__description\">\n\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t'Create a two-tone color effect without losing your original image.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t</div>\n\t\t\t\t\t<DuotonePicker\n\t\t\t\t\t\tcolorPalette={ colorPalette }\n\t\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\tdisableCustomDuotone={ disableCustomDuotone }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</MenuGroup>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default DuotoneControl;\n"]}

package/build/components/editor-styles/index.js

@@ -9,7 +9,11 @@ exports.default = EditorStyles;
 
 var _element = require("@wordpress/element");
 
-var _tinycolor = _interopRequireDefault(require("tinycolor2"));
+var _colord = require("colord");
+
+var _names = _interopRequireDefault(require("colord/plugins/names"));
+
+var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
 
 var _transformStyles = _interopRequireDefault(require("../../utils/transform-styles"));
 
@@ -25,6 +29,7 @@ var _transformStyles = _interopRequireDefault(require("../../utils/transform-sty
  * Internal dependencies
  */
 const EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';
+(0, _colord.extend)([_names.default, _a11y.default]);
 
 function useDarkThemeBodyClassName(styles) {
   return (0, _element.useCallback)(node => {
@@ -53,10 +58,11 @@ function useDarkThemeBodyClassName(styles) {
       body.removeChild(tempCanvas);
     } else {
       backgroundColor = defaultView.getComputedStyle(canvas, null).getPropertyValue('background-color');
-    } // If background is transparent, it should be treated as light color.
+    }
 
+    const colordBackgroundColor = (0, _colord.colord)(backgroundColor); // If background is transparent, it should be treated as light color.
 
-    if ((0, _tinycolor.default)(backgroundColor).getLuminance() > 0.5 || (0, _tinycolor.default)(backgroundColor).getAlpha() === 0) {
+    if (colordBackgroundColor.luminance() > 0.5 || colordBackgroundColor.alpha() === 0) {
       body.classList.remove('is-dark-theme');
     } else {
       body.classList.add('is-dark-theme');

package/build/components/editor-styles/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/editor-styles/index.js"],"names":["EDITOR_STYLES_SELECTOR","useDarkThemeBodyClassName","styles","node","ownerDocument","defaultView","body","canvas","querySelector","backgroundColor","tempCanvas","createElement","classList","add","appendChild","getComputedStyle","getPropertyValue","removeChild","getLuminance","getAlpha","remove","EditorStyles","transformedStyles","map","css","index"],"mappings":";;;;;;;;;AAQA;;AALA;;AAUA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAGA,MAAMA,sBAAsB,GAAG,wBAA/B;;AAEA,SAASC,yBAAT,CAAoCC,MAApC,EAA6C;AAC5C,SAAO,0BACJC,IAAF,IAAY;AACX,QAAK,CAAEA,IAAP,EAAc;AACb;AACA;;AAED,UAAM;AAAEC,MAAAA;AAAF,QAAoBD,IAA1B;AACA,UAAM;AAAEE,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAAwBF,aAA9B;AACA,UAAMG,MAAM,GAAGH,aAAa,CAACI,aAAd,CACdR,sBADc,CAAf;AAIA,QAAIS,eAAJ;;AAEA,QAAK,CAAEF,MAAP,EAAgB;AACf;AACA;AACA;AACA,YAAMG,UAAU,GAAGN,aAAa,CAACO,aAAd,CAA6B,KAA7B,CAAnB;AACAD,MAAAA,UAAU,CAACE,SAAX,CAAqBC,GAArB,CAA0B,uBAA1B;AACAP,MAAAA,IAAI,CAACQ,WAAL,CAAkBJ,UAAlB;AAEAD,MAAAA,eAAe,GAAGJ,WAAW,CAC3BU,gBADgB,CACEL,UADF,EACc,IADd,EAEhBM,gBAFgB,CAEE,kBAFF,CAAlB;AAIAV,MAAAA,IAAI,CAACW,WAAL,CAAkBP,UAAlB;AACA,KAbD,MAaO;AACND,MAAAA,eAAe,GAAGJ,WAAW,CAC3BU,gBADgB,CACER,MADF,EACU,IADV,EAEhBS,gBAFgB,CAEE,kBAFF,CAAlB;AAGA,KA9BU,CAgCX;;;AACA,QACC,wBAAWP,eAAX,EAA6BS,YAA7B,KAA8C,GAA9C,IACA,wBAAWT,eAAX,EAA6BU,QAA7B,OAA4C,CAF7C,EAGE;AACDb,MAAAA,IAAI,CAACM,SAAL,CAAeQ,MAAf,CAAuB,eAAvB;AACA,KALD,MAKO;AACNd,MAAAA,IAAI,CAACM,SAAL,CAAeC,GAAf,CAAoB,eAApB;AACA;AACD,GA1CK,EA2CN,CAAEX,MAAF,CA3CM,CAAP;AA6CA;;AAEc,SAASmB,YAAT,CAAuB;AAAEnB,EAAAA;AAAF,CAAvB,EAAoC;AAClD,QAAMoB,iBAAiB,GAAG,sBACzB,MAAM,8BAAiBpB,MAAjB,EAAyBF,sBAAzB,CADmB,EAEzB,CAAEE,MAAF,CAFyB,CAA1B;AAIA,SACC,qDAGC;AAAO,IAAA,GAAG,EAAGD,yBAAyB,CAAEC,MAAF;AAAtC,IAHD,EAIGoB,iBAAiB,CAACC,GAAlB,CAAuB,CAAEC,GAAF,EAAOC,KAAP,KACxB;AAAO,IAAA,GAAG,EAAGA;AAAb,KAAuBD,GAAvB,CADC,CAJH,CADD;AAUA","sourcesContent":["/**\n * External dependencies\n */\nimport tinycolor from 'tinycolor2';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport transformStyles from '../../utils/transform-styles';\n\nconst EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';\n\nfunction useDarkThemeBodyClassName( styles ) {\n\treturn useCallback(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst { ownerDocument } = node;\n\t\t\tconst { defaultView, body } = ownerDocument;\n\t\t\tconst canvas = ownerDocument.querySelector(\n\t\t\t\tEDITOR_STYLES_SELECTOR\n\t\t\t);\n\n\t\t\tlet backgroundColor;\n\n\t\t\tif ( ! canvas ) {\n\t\t\t\t// The real .editor-styles-wrapper element might not exist in the\n\t\t\t\t// DOM, so calculate the background color by creating a fake\n\t\t\t\t// wrapper.\n\t\t\t\tconst tempCanvas = ownerDocument.createElement( 'div' );\n\t\t\t\ttempCanvas.classList.add( 'editor-styles-wrapper' );\n\t\t\t\tbody.appendChild( tempCanvas );\n\n\t\t\t\tbackgroundColor = defaultView\n\t\t\t\t\t.getComputedStyle( tempCanvas, null )\n\t\t\t\t\t.getPropertyValue( 'background-color' );\n\n\t\t\t\tbody.removeChild( tempCanvas );\n\t\t\t} else {\n\t\t\t\tbackgroundColor = defaultView\n\t\t\t\t\t.getComputedStyle( canvas, null )\n\t\t\t\t\t.getPropertyValue( 'background-color' );\n\t\t\t}\n\n\t\t\t// If background is transparent, it should be treated as light color.\n\t\t\tif (\n\t\t\t\ttinycolor( backgroundColor ).getLuminance() > 0.5 ||\n\t\t\t\ttinycolor( backgroundColor ).getAlpha() === 0\n\t\t\t) {\n\t\t\t\tbody.classList.remove( 'is-dark-theme' );\n\t\t\t} else {\n\t\t\t\tbody.classList.add( 'is-dark-theme' );\n\t\t\t}\n\t\t},\n\t\t[ styles ]\n\t);\n}\n\nexport default function EditorStyles( { styles } ) {\n\tconst transformedStyles = useMemo(\n\t\t() => transformStyles( styles, EDITOR_STYLES_SELECTOR ),\n\t\t[ styles ]\n\t);\n\treturn (\n\t\t<>\n\t\t\t{ /* Use an empty style element to have a document reference,\n\t\t\t     but this could be any element. */ }\n\t\t\t<style ref={ useDarkThemeBodyClassName( styles ) } />\n\t\t\t{ transformedStyles.map( ( css, index ) => (\n\t\t\t\t<style key={ index }>{ css }</style>\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/editor-styles/index.js"],"names":["EDITOR_STYLES_SELECTOR","namesPlugin","a11yPlugin","useDarkThemeBodyClassName","styles","node","ownerDocument","defaultView","body","canvas","querySelector","backgroundColor","tempCanvas","createElement","classList","add","appendChild","getComputedStyle","getPropertyValue","removeChild","colordBackgroundColor","luminance","alpha","remove","EditorStyles","transformedStyles","map","css","index"],"mappings":";;;;;;;;;AAUA;;AAPA;;AACA;;AACA;;AAUA;;AAfA;AACA;AACA;;AAKA;AACA;AACA;;AAGA;AACA;AACA;AAGA,MAAMA,sBAAsB,GAAG,wBAA/B;AACA,oBAAQ,CAAEC,cAAF,EAAeC,aAAf,CAAR;;AAEA,SAASC,yBAAT,CAAoCC,MAApC,EAA6C;AAC5C,SAAO,0BACJC,IAAF,IAAY;AACX,QAAK,CAAEA,IAAP,EAAc;AACb;AACA;;AAED,UAAM;AAAEC,MAAAA;AAAF,QAAoBD,IAA1B;AACA,UAAM;AAAEE,MAAAA,WAAF;AAAeC,MAAAA;AAAf,QAAwBF,aAA9B;AACA,UAAMG,MAAM,GAAGH,aAAa,CAACI,aAAd,CACdV,sBADc,CAAf;AAIA,QAAIW,eAAJ;;AAEA,QAAK,CAAEF,MAAP,EAAgB;AACf;AACA;AACA;AACA,YAAMG,UAAU,GAAGN,aAAa,CAACO,aAAd,CAA6B,KAA7B,CAAnB;AACAD,MAAAA,UAAU,CAACE,SAAX,CAAqBC,GAArB,CAA0B,uBAA1B;AACAP,MAAAA,IAAI,CAACQ,WAAL,CAAkBJ,UAAlB;AAEAD,MAAAA,eAAe,GAAGJ,WAAW,CAC3BU,gBADgB,CACEL,UADF,EACc,IADd,EAEhBM,gBAFgB,CAEE,kBAFF,CAAlB;AAIAV,MAAAA,IAAI,CAACW,WAAL,CAAkBP,UAAlB;AACA,KAbD,MAaO;AACND,MAAAA,eAAe,GAAGJ,WAAW,CAC3BU,gBADgB,CACER,MADF,EACU,IADV,EAEhBS,gBAFgB,CAEE,kBAFF,CAAlB;AAGA;;AACD,UAAME,qBAAqB,GAAG,oBAAQT,eAAR,CAA9B,CA/BW,CAgCX;;AACA,QACCS,qBAAqB,CAACC,SAAtB,KAAoC,GAApC,IACAD,qBAAqB,CAACE,KAAtB,OAAkC,CAFnC,EAGE;AACDd,MAAAA,IAAI,CAACM,SAAL,CAAeS,MAAf,CAAuB,eAAvB;AACA,KALD,MAKO;AACNf,MAAAA,IAAI,CAACM,SAAL,CAAeC,GAAf,CAAoB,eAApB;AACA;AACD,GA1CK,EA2CN,CAAEX,MAAF,CA3CM,CAAP;AA6CA;;AAEc,SAASoB,YAAT,CAAuB;AAAEpB,EAAAA;AAAF,CAAvB,EAAoC;AAClD,QAAMqB,iBAAiB,GAAG,sBACzB,MAAM,8BAAiBrB,MAAjB,EAAyBJ,sBAAzB,CADmB,EAEzB,CAAEI,MAAF,CAFyB,CAA1B;AAKA,SACC,qDAGC;AAAO,IAAA,GAAG,EAAGD,yBAAyB,CAAEC,MAAF;AAAtC,IAHD,EAIGqB,iBAAiB,CAACC,GAAlB,CAAuB,CAAEC,GAAF,EAAOC,KAAP,KACxB;AAAO,IAAA,GAAG,EAAGA;AAAb,KAAuBD,GAAvB,CADC,CAJH,CADD;AAUA","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport transformStyles from '../../utils/transform-styles';\n\nconst EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction useDarkThemeBodyClassName( styles ) {\n\treturn useCallback(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst { ownerDocument } = node;\n\t\t\tconst { defaultView, body } = ownerDocument;\n\t\t\tconst canvas = ownerDocument.querySelector(\n\t\t\t\tEDITOR_STYLES_SELECTOR\n\t\t\t);\n\n\t\t\tlet backgroundColor;\n\n\t\t\tif ( ! canvas ) {\n\t\t\t\t// The real .editor-styles-wrapper element might not exist in the\n\t\t\t\t// DOM, so calculate the background color by creating a fake\n\t\t\t\t// wrapper.\n\t\t\t\tconst tempCanvas = ownerDocument.createElement( 'div' );\n\t\t\t\ttempCanvas.classList.add( 'editor-styles-wrapper' );\n\t\t\t\tbody.appendChild( tempCanvas );\n\n\t\t\t\tbackgroundColor = defaultView\n\t\t\t\t\t.getComputedStyle( tempCanvas, null )\n\t\t\t\t\t.getPropertyValue( 'background-color' );\n\n\t\t\t\tbody.removeChild( tempCanvas );\n\t\t\t} else {\n\t\t\t\tbackgroundColor = defaultView\n\t\t\t\t\t.getComputedStyle( canvas, null )\n\t\t\t\t\t.getPropertyValue( 'background-color' );\n\t\t\t}\n\t\t\tconst colordBackgroundColor = colord( backgroundColor );\n\t\t\t// If background is transparent, it should be treated as light color.\n\t\t\tif (\n\t\t\t\tcolordBackgroundColor.luminance() > 0.5 ||\n\t\t\t\tcolordBackgroundColor.alpha() === 0\n\t\t\t) {\n\t\t\t\tbody.classList.remove( 'is-dark-theme' );\n\t\t\t} else {\n\t\t\t\tbody.classList.add( 'is-dark-theme' );\n\t\t\t}\n\t\t},\n\t\t[ styles ]\n\t);\n}\n\nexport default function EditorStyles( { styles } ) {\n\tconst transformedStyles = useMemo(\n\t\t() => transformStyles( styles, EDITOR_STYLES_SELECTOR ),\n\t\t[ styles ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ /* Use an empty style element to have a document reference,\n\t\t\t     but this could be any element. */ }\n\t\t\t<style ref={ useDarkThemeBodyClassName( styles ) } />\n\t\t\t{ transformedStyles.map( ( css, index ) => (\n\t\t\t\t<style key={ index }>{ css }</style>\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n"]}

package/build/components/font-appearance-control/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = FontAppearanceControl;
+exports.getFontAppearanceLabel = void 0;
 
 var _element = require("@wordpress/element");
 
@@ -49,6 +50,26 @@ const FONT_WEIGHTS = [{
   name: (0, _i18n.__)('Black'),
   value: '900'
 }];
+/**
+ * Adjusts font appearance field label in case either font styles or weights
+ * are disabled.
+ *
+ * @param {boolean} hasFontStyles  Whether font styles are enabled and present.
+ * @param {boolean} hasFontWeights Whether font weights are enabled and present.
+ * @return {string} A label representing what font appearance is being edited.
+ */
+
+const getFontAppearanceLabel = (hasFontStyles, hasFontWeights) => {
+  if (!hasFontStyles) {
+    return (0, _i18n.__)('Font weight');
+  }
+
+  if (!hasFontWeights) {
+    return (0, _i18n.__)('Font style');
+  }
+
+  return (0, _i18n.__)('Appearance');
+};
 /**
  * Control to display unified font style and weight options.
  *
@@ -57,6 +78,9 @@ const FONT_WEIGHTS = [{
  * @return {WPElement} Font appearance control.
  */
 
+
+exports.getFontAppearanceLabel = getFontAppearanceLabel;
+
 function FontAppearanceControl(props) {
   const {
     onChange,
@@ -68,6 +92,7 @@ function FontAppearanceControl(props) {
     }
   } = props;
   const hasStylesOrWeights = hasFontStyles || hasFontWeights;
+  const label = getFontAppearanceLabel(hasFontStyles, hasFontWeights);
   const defaultOption = {
     key: 'default',
     name: (0, _i18n.__)('Default'),
@@ -148,32 +173,39 @@ function FontAppearanceControl(props) {
     }
 
     return hasFontStyles ? styleOptions() : weightOptions();
-  }, [props.options]); // Find current selection by comparing font style & weight against options.
+  }, [props.options]); // Find current selection by comparing font style & weight against options,
+  // and fall back to the Default option if there is no matching option.
 
-  const currentSelection = selectOptions.find(option => option.style.fontStyle === fontStyle && option.style.fontWeight === fontWeight); // Adjusts field label in case either styles or weights are disabled.
+  const currentSelection = selectOptions.find(option => option.style.fontStyle === fontStyle && option.style.fontWeight === fontWeight) || selectOptions[0]; // Adjusts screen reader description based on styles or weights.
+
+  const getDescribedBy = () => {
+    if (!currentSelection) {
+      return (0, _i18n.__)('No selected font appearance');
+    }
 
-  const getLabel = () => {
     if (!hasFontStyles) {
-      return (0, _i18n.__)('Font weight');
+      return (0, _i18n.sprintf)( // translators: %s: Currently selected font weight.
+      (0, _i18n.__)('Currently selected font weight: %s'), currentSelection.name);
     }
 
     if (!hasFontWeights) {
-      return (0, _i18n.__)('Font style');
+      return (0, _i18n.sprintf)( // translators: %s: Currently selected font style.
+      (0, _i18n.__)('Currently selected font style: %s'), currentSelection.name);
     }
 
-    return (0, _i18n.__)('Appearance');
+    return (0, _i18n.sprintf)( // translators: %s: Currently selected font appearance.
+    (0, _i18n.__)('Currently selected font appearance: %s'), currentSelection.name);
   };
 
-  return (0, _element.createElement)("fieldset", {
-    className: "components-font-appearance-control"
-  }, hasStylesOrWeights && (0, _element.createElement)(_components.CustomSelectControl, {
-    className: "components-font-appearance-control__select",
-    label: getLabel(),
+  return hasStylesOrWeights && (0, _element.createElement)(_components.CustomSelectControl, {
+    className: "components-font-appearance-control",
+    label: label,
+    describedBy: getDescribedBy(),
     options: selectOptions,
     value: currentSelection,
     onChange: ({
       selectedItem
     }) => onChange(selectedItem.style)
-  }));
+  });
 }
 //# sourceMappingURL=index.js.map

package/build/components/font-appearance-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/font-appearance-control/index.js"],"names":["FONT_STYLES","name","value","FONT_WEIGHTS","FontAppearanceControl","props","onChange","hasFontStyles","hasFontWeights","fontStyle","fontWeight","hasStylesOrWeights","defaultOption","key","style","undefined","combineOptions","combinedOptions","forEach","styleName","styleValue","weightName","weightValue","optionName","push","styleOptions","weightOptions","selectOptions","options","currentSelection","find","option","getLabel","selectedItem"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { CustomSelectControl } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\nconst FONT_STYLES = [\n\t{\n\t\tname: __( 'Regular' ),\n\t\tvalue: 'normal',\n\t},\n\t{\n\t\tname: __( 'Italic' ),\n\t\tvalue: 'italic',\n\t},\n];\n\nconst FONT_WEIGHTS = [\n\t{\n\t\tname: __( 'Thin' ),\n\t\tvalue: '100',\n\t},\n\t{\n\t\tname: __( 'Extra Light' ),\n\t\tvalue: '200',\n\t},\n\t{\n\t\tname: __( 'Light' ),\n\t\tvalue: '300',\n\t},\n\t{\n\t\tname: __( 'Regular' ),\n\t\tvalue: '400',\n\t},\n\t{\n\t\tname: __( 'Medium' ),\n\t\tvalue: '500',\n\t},\n\t{\n\t\tname: __( 'Semi Bold' ),\n\t\tvalue: '600',\n\t},\n\t{\n\t\tname: __( 'Bold' ),\n\t\tvalue: '700',\n\t},\n\t{\n\t\tname: __( 'Extra Bold' ),\n\t\tvalue: '800',\n\t},\n\t{\n\t\tname: __( 'Black' ),\n\t\tvalue: '900',\n\t},\n];\n\n/**\n * Control to display unified font style and weight options.\n *\n * @param {Object} props Component props.\n *\n * @return {WPElement} Font appearance control.\n */\nexport default function FontAppearanceControl( props ) {\n\tconst {\n\t\tonChange,\n\t\thasFontStyles = true,\n\t\thasFontWeights = true,\n\t\tvalue: { fontStyle, fontWeight },\n\t} = props;\n\tconst hasStylesOrWeights = hasFontStyles || hasFontWeights;\n\tconst defaultOption = {\n\t\tkey: 'default',\n\t\tname: __( 'Default' ),\n\t\tstyle: { fontStyle: undefined, fontWeight: undefined },\n\t};\n\n\t// Combines both font style and weight options into a single dropdown.\n\tconst combineOptions = () => {\n\t\tconst combinedOptions = [ defaultOption ];\n\n\t\tFONT_STYLES.forEach( ( { name: styleName, value: styleValue } ) => {\n\t\t\tFONT_WEIGHTS.forEach(\n\t\t\t\t( { name: weightName, value: weightValue } ) => {\n\t\t\t\t\tconst optionName =\n\t\t\t\t\t\tstyleValue === 'normal'\n\t\t\t\t\t\t\t? weightName\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: 1: Font weight name. 2: Font style name. */\n\t\t\t\t\t\t\t\t\t__( '%1$s %2$s' ),\n\t\t\t\t\t\t\t\t\tweightName,\n\t\t\t\t\t\t\t\t\tstyleName\n\t\t\t\t\t\t\t  );\n\n\t\t\t\t\tcombinedOptions.push( {\n\t\t\t\t\t\tkey: `${ styleValue }-${ weightValue }`,\n\t\t\t\t\t\tname: optionName,\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tfontStyle: styleValue,\n\t\t\t\t\t\t\tfontWeight: weightValue,\n\t\t\t\t\t\t},\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t);\n\t\t} );\n\n\t\treturn combinedOptions;\n\t};\n\n\t// Generates select options for font styles only.\n\tconst styleOptions = () => {\n\t\tconst combinedOptions = [ defaultOption ];\n\t\tFONT_STYLES.forEach( ( { name, value } ) => {\n\t\t\tcombinedOptions.push( {\n\t\t\t\tkey: value,\n\t\t\t\tname,\n\t\t\t\tstyle: { fontStyle: value, fontWeight: undefined },\n\t\t\t} );\n\t\t} );\n\t\treturn combinedOptions;\n\t};\n\n\t// Generates select options for font weights only.\n\tconst weightOptions = () => {\n\t\tconst combinedOptions = [ defaultOption ];\n\t\tFONT_WEIGHTS.forEach( ( { name, value } ) => {\n\t\t\tcombinedOptions.push( {\n\t\t\t\tkey: value,\n\t\t\t\tname,\n\t\t\t\tstyle: { fontStyle: undefined, fontWeight: value },\n\t\t\t} );\n\t\t} );\n\t\treturn combinedOptions;\n\t};\n\n\t// Map font styles and weights to select options.\n\tconst selectOptions = useMemo( () => {\n\t\tif ( hasFontStyles && hasFontWeights ) {\n\t\t\treturn combineOptions();\n\t\t}\n\n\t\treturn hasFontStyles ? styleOptions() : weightOptions();\n\t}, [ props.options ] );\n\n\t// Find current selection by comparing font style & weight against options.\n\tconst currentSelection = selectOptions.find(\n\t\t( option ) =>\n\t\t\toption.style.fontStyle === fontStyle &&\n\t\t\toption.style.fontWeight === fontWeight\n\t);\n\n\t// Adjusts field label in case either styles or weights are disabled.\n\tconst getLabel = () => {\n\t\tif ( ! hasFontStyles ) {\n\t\t\treturn __( 'Font weight' );\n\t\t}\n\n\t\tif ( ! hasFontWeights ) {\n\t\t\treturn __( 'Font style' );\n\t\t}\n\n\t\treturn __( 'Appearance' );\n\t};\n\n\treturn (\n\t\t<fieldset className=\"components-font-appearance-control\">\n\t\t\t{ hasStylesOrWeights && (\n\t\t\t\t<CustomSelectControl\n\t\t\t\t\tclassName=\"components-font-appearance-control__select\"\n\t\t\t\t\tlabel={ getLabel() }\n\t\t\t\t\toptions={ selectOptions }\n\t\t\t\t\tvalue={ currentSelection }\n\t\t\t\t\tonChange={ ( { selectedItem } ) =>\n\t\t\t\t\t\tonChange( selectedItem.style )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t</fieldset>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/font-appearance-control/index.js"],"names":["FONT_STYLES","name","value","FONT_WEIGHTS","getFontAppearanceLabel","hasFontStyles","hasFontWeights","FontAppearanceControl","props","onChange","fontStyle","fontWeight","hasStylesOrWeights","label","defaultOption","key","style","undefined","combineOptions","combinedOptions","forEach","styleName","styleValue","weightName","weightValue","optionName","push","styleOptions","weightOptions","selectOptions","options","currentSelection","find","option","getDescribedBy","selectedItem"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { CustomSelectControl } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\nconst FONT_STYLES = [\n\t{\n\t\tname: __( 'Regular' ),\n\t\tvalue: 'normal',\n\t},\n\t{\n\t\tname: __( 'Italic' ),\n\t\tvalue: 'italic',\n\t},\n];\n\nconst FONT_WEIGHTS = [\n\t{\n\t\tname: __( 'Thin' ),\n\t\tvalue: '100',\n\t},\n\t{\n\t\tname: __( 'Extra Light' ),\n\t\tvalue: '200',\n\t},\n\t{\n\t\tname: __( 'Light' ),\n\t\tvalue: '300',\n\t},\n\t{\n\t\tname: __( 'Regular' ),\n\t\tvalue: '400',\n\t},\n\t{\n\t\tname: __( 'Medium' ),\n\t\tvalue: '500',\n\t},\n\t{\n\t\tname: __( 'Semi Bold' ),\n\t\tvalue: '600',\n\t},\n\t{\n\t\tname: __( 'Bold' ),\n\t\tvalue: '700',\n\t},\n\t{\n\t\tname: __( 'Extra Bold' ),\n\t\tvalue: '800',\n\t},\n\t{\n\t\tname: __( 'Black' ),\n\t\tvalue: '900',\n\t},\n];\n\n/**\n * Adjusts font appearance field label in case either font styles or weights\n * are disabled.\n *\n * @param {boolean} hasFontStyles  Whether font styles are enabled and present.\n * @param {boolean} hasFontWeights Whether font weights are enabled and present.\n * @return {string} A label representing what font appearance is being edited.\n */\nexport const getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {\n\tif ( ! hasFontStyles ) {\n\t\treturn __( 'Font weight' );\n\t}\n\n\tif ( ! hasFontWeights ) {\n\t\treturn __( 'Font style' );\n\t}\n\n\treturn __( 'Appearance' );\n};\n\n/**\n * Control to display unified font style and weight options.\n *\n * @param {Object} props Component props.\n *\n * @return {WPElement} Font appearance control.\n */\nexport default function FontAppearanceControl( props ) {\n\tconst {\n\t\tonChange,\n\t\thasFontStyles = true,\n\t\thasFontWeights = true,\n\t\tvalue: { fontStyle, fontWeight },\n\t} = props;\n\tconst hasStylesOrWeights = hasFontStyles || hasFontWeights;\n\tconst label = getFontAppearanceLabel( hasFontStyles, hasFontWeights );\n\tconst defaultOption = {\n\t\tkey: 'default',\n\t\tname: __( 'Default' ),\n\t\tstyle: { fontStyle: undefined, fontWeight: undefined },\n\t};\n\n\t// Combines both font style and weight options into a single dropdown.\n\tconst combineOptions = () => {\n\t\tconst combinedOptions = [ defaultOption ];\n\n\t\tFONT_STYLES.forEach( ( { name: styleName, value: styleValue } ) => {\n\t\t\tFONT_WEIGHTS.forEach(\n\t\t\t\t( { name: weightName, value: weightValue } ) => {\n\t\t\t\t\tconst optionName =\n\t\t\t\t\t\tstyleValue === 'normal'\n\t\t\t\t\t\t\t? weightName\n\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: 1: Font weight name. 2: Font style name. */\n\t\t\t\t\t\t\t\t\t__( '%1$s %2$s' ),\n\t\t\t\t\t\t\t\t\tweightName,\n\t\t\t\t\t\t\t\t\tstyleName\n\t\t\t\t\t\t\t  );\n\n\t\t\t\t\tcombinedOptions.push( {\n\t\t\t\t\t\tkey: `${ styleValue }-${ weightValue }`,\n\t\t\t\t\t\tname: optionName,\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tfontStyle: styleValue,\n\t\t\t\t\t\t\tfontWeight: weightValue,\n\t\t\t\t\t\t},\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t);\n\t\t} );\n\n\t\treturn combinedOptions;\n\t};\n\n\t// Generates select options for font styles only.\n\tconst styleOptions = () => {\n\t\tconst combinedOptions = [ defaultOption ];\n\t\tFONT_STYLES.forEach( ( { name, value } ) => {\n\t\t\tcombinedOptions.push( {\n\t\t\t\tkey: value,\n\t\t\t\tname,\n\t\t\t\tstyle: { fontStyle: value, fontWeight: undefined },\n\t\t\t} );\n\t\t} );\n\t\treturn combinedOptions;\n\t};\n\n\t// Generates select options for font weights only.\n\tconst weightOptions = () => {\n\t\tconst combinedOptions = [ defaultOption ];\n\t\tFONT_WEIGHTS.forEach( ( { name, value } ) => {\n\t\t\tcombinedOptions.push( {\n\t\t\t\tkey: value,\n\t\t\t\tname,\n\t\t\t\tstyle: { fontStyle: undefined, fontWeight: value },\n\t\t\t} );\n\t\t} );\n\t\treturn combinedOptions;\n\t};\n\n\t// Map font styles and weights to select options.\n\tconst selectOptions = useMemo( () => {\n\t\tif ( hasFontStyles && hasFontWeights ) {\n\t\t\treturn combineOptions();\n\t\t}\n\n\t\treturn hasFontStyles ? styleOptions() : weightOptions();\n\t}, [ props.options ] );\n\n\t// Find current selection by comparing font style & weight against options,\n\t// and fall back to the Default option if there is no matching option.\n\tconst currentSelection =\n\t\tselectOptions.find(\n\t\t\t( option ) =>\n\t\t\t\toption.style.fontStyle === fontStyle &&\n\t\t\t\toption.style.fontWeight === fontWeight\n\t\t) || selectOptions[ 0 ];\n\n\t// Adjusts screen reader description based on styles or weights.\n\tconst getDescribedBy = () => {\n\t\tif ( ! currentSelection ) {\n\t\t\treturn __( 'No selected font appearance' );\n\t\t}\n\n\t\tif ( ! hasFontStyles ) {\n\t\t\treturn sprintf(\n\t\t\t\t// translators: %s: Currently selected font weight.\n\t\t\t\t__( 'Currently selected font weight: %s' ),\n\t\t\t\tcurrentSelection.name\n\t\t\t);\n\t\t}\n\n\t\tif ( ! hasFontWeights ) {\n\t\t\treturn sprintf(\n\t\t\t\t// translators: %s: Currently selected font style.\n\t\t\t\t__( 'Currently selected font style: %s' ),\n\t\t\t\tcurrentSelection.name\n\t\t\t);\n\t\t}\n\n\t\treturn sprintf(\n\t\t\t// translators: %s: Currently selected font appearance.\n\t\t\t__( 'Currently selected font appearance: %s' ),\n\t\t\tcurrentSelection.name\n\t\t);\n\t};\n\n\treturn (\n\t\thasStylesOrWeights && (\n\t\t\t<CustomSelectControl\n\t\t\t\tclassName=\"components-font-appearance-control\"\n\t\t\t\tlabel={ label }\n\t\t\t\tdescribedBy={ getDescribedBy() }\n\t\t\t\toptions={ selectOptions }\n\t\t\t\tvalue={ currentSelection }\n\t\t\t\tonChange={ ( { selectedItem } ) =>\n\t\t\t\t\tonChange( selectedItem.style )\n\t\t\t\t}\n\t\t\t/>\n\t\t)\n\t);\n}\n"]}

package/build/components/font-sizes/index.native.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,6 +17,28 @@ Object.defineProperty(exports, "getFontSizeClass", {
     return _utils.getFontSizeClass;
   }
 });
+Object.defineProperty(exports, "getFontSizeObjectByValue", {
+  enumerable: true,
+  get: function () {
+    return _utils.getFontSizeObjectByValue;
+  }
+});
+Object.defineProperty(exports, "FontSizePicker", {
+  enumerable: true,
+  get: function () {
+    return _fontSizePicker.default;
+  }
+});
+Object.defineProperty(exports, "withFontSizes", {
+  enumerable: true,
+  get: function () {
+    return _withFontSizes.default;
+  }
+});
 
 var _utils = require("./utils");
+
+var _fontSizePicker = _interopRequireDefault(require("./font-size-picker"));
+
+var _withFontSizes = _interopRequireDefault(require("./with-font-sizes"));
 //# sourceMappingURL=index.native.js.map

package/build/components/font-sizes/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/font-sizes/index.native.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA","sourcesContent":["export { getFontSize, getFontSizeClass } from './utils';\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/font-sizes/index.native.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAKA;;AACA","sourcesContent":["export {\n\tgetFontSize,\n\tgetFontSizeClass,\n\tgetFontSizeObjectByValue,\n} from './utils';\nexport { default as FontSizePicker } from './font-size-picker';\nexport { default as withFontSizes } from './with-font-sizes';\n"]}

package/build/components/iframe/index.js

@@ -11,6 +11,8 @@ var _element = require("@wordpress/element");
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _i18n = require("@wordpress/i18n");
 
 var _compose = require("@wordpress/compose");
@@ -21,6 +23,10 @@ var _blockSelectionClearer = require("../block-selection-clearer");
 
 var _writingFlow = require("../writing-flow");
 
+/**
+ * External dependencies
+ */
+
 /**
  * WordPress dependencies
  */
@@ -80,7 +86,7 @@ function styleSheetsCompat(doc) {
 
     if (isMatch && !doc.getElementById(ownerNode.id)) {
       // eslint-disable-next-line no-console
-      console.error(`Stylesheet ${ownerNode.id} was not properly added.
+      console.warn(`Stylesheet ${ownerNode.id} was not properly added.
 For blocks, use the block API's style (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style) or editorStyle (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-style).
 For themes, use add_editor_style (https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#editor-styles).`, ownerNode.outerHTML);
       doc.head.appendChild(ownerNode.cloneNode(true)); // Add inline styles belonging to the stylesheet.
@@ -138,39 +144,12 @@ function bubbleEvents(doc) {
     }
   }
 
-  const eventTypes = ['keydown', 'keypress', 'dragover'];
+  const eventTypes = ['dragover'];
 
   for (const name of eventTypes) {
     doc.addEventListener(name, bubbleEvent);
   }
 }
-/**
- * Sets the document direction.
- *
- * Sets the `editor-styles-wrapper` class name on the body.
- *
- * Copies the `admin-color-*` class name to the body so that the admin color
- * scheme applies to components in the iframe.
- *
- * @param {Document} doc Document to add class name to.
- */
-
-
-function setBodyClassName(doc) {
-  doc.dir = document.dir;
-  doc.body.className = BODY_CLASS_NAME;
-
-  for (const name of document.body.classList) {
-    if (name.startsWith('admin-color-')) {
-      doc.body.classList.add(name);
-    } else if (name === 'wp-embed-responsive') {
-      // Ideally ALL classes that are added through get_body_class should
-      // be added in the editor too, which we'll somehow have to get from
-      // the server in the future (which will run the PHP filters).
-      doc.body.classList.add('wp-embed-responsive');
-    }
-  }
-}
 
 function useParsedAssets(html) {
   return (0, _element.useMemo)(() => {
@@ -180,12 +159,12 @@ function useParsedAssets(html) {
   }, [html]);
 }
 
-async function loadScript(doc, {
+async function loadScript(head, {
   id,
   src
 }) {
   return new Promise((resolve, reject) => {
-    const script = doc.createElement('script');
+    const script = head.ownerDocument.createElement('script');
     script.id = id;
 
     if (src) {
@@ -198,7 +177,7 @@ async function loadScript(doc, {
       resolve();
     }
 
-    doc.head.appendChild(script);
+    head.appendChild(script);
   });
 }
 
@@ -206,26 +185,26 @@ function Iframe({
   contentRef,
   children,
   head,
+  tabIndex = 0,
   ...props
 }, ref) {
+  var _window$__editorAsset, _window$__editorAsset2;
+
   const [, forceRender] = (0, _element.useReducer)(() => ({}));
   const [iframeDocument, setIframeDocument] = (0, _element.useState)();
-  const styles = useParsedAssets(window.__editorAssets.styles);
-  const scripts = useParsedAssets(window.__editorAssets.scripts);
+  const [bodyClasses, setBodyClasses] = (0, _element.useState)([]);
+  const styles = useParsedAssets((_window$__editorAsset = window.__editorAssets) === null || _window$__editorAsset === void 0 ? void 0 : _window$__editorAsset.styles);
+  const scripts = useParsedAssets((_window$__editorAsset2 = window.__editorAssets) === null || _window$__editorAsset2 === void 0 ? void 0 : _window$__editorAsset2.scripts);
   const clearerRef = (0, _blockSelectionClearer.useBlockSelectionClearer)();
   const [before, writingFlowRef, after] = (0, _writingFlow.useWritingFlow)();
-  const setRef = (0, _element.useCallback)(node => {
-    if (!node) {
-      return;
-    }
-
+  const setRef = (0, _compose.useRefEffect)(node => {
     function setDocumentIfReady() {
       const {
-        contentDocument
+        contentDocument,
+        ownerDocument
       } = node;
       const {
         readyState,
-        body,
         documentElement
       } = contentDocument;
 
@@ -233,24 +212,16 @@ function Iframe({
         return false;
       }
 
-      if (typeof contentRef === 'function') {
-        contentRef(body);
-      } else if (contentRef) {
-        contentRef.current = body;
-      }
-
-      setBodyClassName(contentDocument);
       bubbleEvents(contentDocument);
-      setBodyClassName(contentDocument);
       setIframeDocument(contentDocument);
-      clearerRef(documentElement);
-      clearerRef(body);
-      writingFlowRef(body);
-      scripts.reduce((promise, script) => promise.then(() => loadScript(contentDocument, script)), Promise.resolve()).finally(() => {
-        // When script are loaded, re-render blocks to allow them
-        // to initialise.
-        forceRender();
-      });
+      clearerRef(documentElement); // Ideally ALL classes that are added through get_body_class should
+      // be added in the editor too, which we'll somehow have to get from
+      // the server in the future (which will run the PHP filters).
+
+      setBodyClasses(Array.from(ownerDocument.body.classList).filter(name => name.startsWith('admin-color-') || name === 'wp-embed-responsive'));
+      contentDocument.dir = ownerDocument.dir;
+      documentElement.removeChild(contentDocument.head);
+      documentElement.removeChild(contentDocument.body);
       return true;
     }
 
@@ -263,6 +234,14 @@ function Iframe({
       setDocumentIfReady();
     });
   }, []);
+  const headRef = (0, _compose.useRefEffect)(element => {
+    scripts.reduce((promise, script) => promise.then(() => loadScript(element, script)), Promise.resolve()).finally(() => {
+      // When script are loaded, re-render blocks to allow them
+      // to initialise.
+      forceRender();
+    });
+  }, []);
+  const bodyRef = (0, _compose.useMergeRefs)([contentRef, clearerRef, writingFlowRef]);
   (0, _element.useEffect)(() => {
     if (iframeDocument) {
       styleSheetsCompat(iframeDocument);
@@ -293,14 +272,18 @@ function Iframe({
       key: id
     });
   }), head);
-  return (0, _element.createElement)(_element.Fragment, null, before, (0, _element.createElement)("iframe", (0, _extends2.default)({}, props, {
+  return (0, _element.createElement)(_element.Fragment, null, tabIndex >= 0 && before, (0, _element.createElement)("iframe", (0, _extends2.default)({}, props, {
     ref: (0, _compose.useMergeRefs)([ref, setRef]),
-    tabIndex: "0",
-    title: (0, _i18n.__)('Editor canvas'),
-    name: "editor-canvas"
-  }), iframeDocument && (0, _element.createPortal)((0, _element.createElement)(_components.__experimentalStyleProvider, {
+    tabIndex: tabIndex,
+    title: (0, _i18n.__)('Editor canvas')
+  }), iframeDocument && (0, _element.createPortal)((0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("head", {
+    ref: headRef
+  }, head), (0, _element.createElement)("body", {
+    ref: bodyRef,
+    className: (0, _classnames.default)(BODY_CLASS_NAME, ...bodyClasses)
+  }, (0, _element.createElement)(_components.__experimentalStyleProvider, {
     document: iframeDocument
-  }, children), iframeDocument.body), iframeDocument && (0, _element.createPortal)(head, iframeDocument.head)), after);
+  }, children))), iframeDocument.documentElement)), tabIndex >= 0 && after);
 }
 
 var _default = (0, _element.forwardRef)(Iframe);