@wordpress/format-library 3.20.0 → 4.0.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 4.0.0 (2022-12-14)
+
+### Breaking Changes
+
+-   Updated dependencies to require React 18 ([45235](https://github.com/WordPress/gutenberg/pull/45235))
+
 ## 3.20.0 (2022-11-16)
 
 ## 3.19.0 (2022-11-02)

package/build/default-formats.js

@@ -27,9 +27,11 @@ var _superscript = require("./superscript");
 
 var _keyboard = require("./keyboard");
 
+var _unknown = require("./unknown");
+
 /**
  * Internal dependencies
  */
-var _default = [_bold.bold, _code.code, _image.image, _italic.italic, _link.link, _strikethrough.strikethrough, _underline.underline, _textColor.textColor, _subscript.subscript, _superscript.superscript, _keyboard.keyboard];
+var _default = [_bold.bold, _code.code, _image.image, _italic.italic, _link.link, _strikethrough.strikethrough, _underline.underline, _textColor.textColor, _subscript.subscript, _superscript.superscript, _keyboard.keyboard, _unknown.unknown];
 exports.default = _default;
 //# sourceMappingURL=default-formats.js.map

package/build/default-formats.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/format-library/src/default-formats.js"],"names":["bold","code","image","italic","link","strikethrough","underline","textColor","subscript","superscript","keyboard"],"mappings":";;;;;;;AAGA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAbA;AACA;AACA;eAae,CACdA,UADc,EAEdC,UAFc,EAGdC,YAHc,EAIdC,cAJc,EAKdC,UALc,EAMdC,4BANc,EAOdC,oBAPc,EAQdC,oBARc,EASdC,oBATc,EAUdC,wBAVc,EAWdC,kBAXc,C","sourcesContent":["/**\n * Internal dependencies\n */\nimport { bold } from './bold';\nimport { code } from './code';\nimport { image } from './image';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { strikethrough } from './strikethrough';\nimport { underline } from './underline';\nimport { textColor } from './text-color';\nimport { subscript } from './subscript';\nimport { superscript } from './superscript';\nimport { keyboard } from './keyboard';\n\nexport default [\n\tbold,\n\tcode,\n\timage,\n\titalic,\n\tlink,\n\tstrikethrough,\n\tunderline,\n\ttextColor,\n\tsubscript,\n\tsuperscript,\n\tkeyboard,\n];\n"]}
+{"version":3,"sources":["@wordpress/format-library/src/default-formats.js"],"names":["bold","code","image","italic","link","strikethrough","underline","textColor","subscript","superscript","keyboard","unknown"],"mappings":";;;;;;;AAGA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAdA;AACA;AACA;eAce,CACdA,UADc,EAEdC,UAFc,EAGdC,YAHc,EAIdC,cAJc,EAKdC,UALc,EAMdC,4BANc,EAOdC,oBAPc,EAQdC,oBARc,EASdC,oBATc,EAUdC,wBAVc,EAWdC,kBAXc,EAYdC,gBAZc,C","sourcesContent":["/**\n * Internal dependencies\n */\nimport { bold } from './bold';\nimport { code } from './code';\nimport { image } from './image';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { strikethrough } from './strikethrough';\nimport { underline } from './underline';\nimport { textColor } from './text-color';\nimport { subscript } from './subscript';\nimport { superscript } from './superscript';\nimport { keyboard } from './keyboard';\nimport { unknown } from './unknown';\n\nexport default [\n\tbold,\n\tcode,\n\timage,\n\titalic,\n\tlink,\n\tstrikethrough,\n\tunderline,\n\ttextColor,\n\tsubscript,\n\tsuperscript,\n\tkeyboard,\n\tunknown,\n];\n"]}

package/build/unknown/index.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.unknown = void 0;
+
+var _element = require("@wordpress/element");
+
+var _i18n = require("@wordpress/i18n");
+
+var _richText = require("@wordpress/rich-text");
+
+var _blockEditor = require("@wordpress/block-editor");
+
+var _icons = require("@wordpress/icons");
+
+/**
+ * WordPress dependencies
+ */
+const name = 'core/unknown';
+const title = (0, _i18n.__)('Clear Unknown Formatting');
+const unknown = {
+  name,
+  title,
+  tagName: '*',
+  className: null,
+
+  edit(_ref) {
+    let {
+      isActive,
+      value,
+      onChange,
+      onFocus
+    } = _ref;
+
+    function onClick() {
+      onChange((0, _richText.removeFormat)(value, name));
+      onFocus();
+    }
+
+    const selectedValue = (0, _richText.slice)(value);
+    const hasUnknownFormats = selectedValue.formats.some(formats => {
+      return formats.some(format => format.type === name);
+    });
+
+    if (!isActive && !hasUnknownFormats) {
+      return null;
+    }
+
+    return (0, _element.createElement)(_blockEditor.RichTextToolbarButton, {
+      name: "unknown",
+      icon: _icons.help,
+      title: title,
+      onClick: onClick,
+      isActive: true
+    });
+  }
+
+};
+exports.unknown = unknown;
+//# sourceMappingURL=index.js.map

package/build/unknown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/format-library/src/unknown/index.js"],"names":["name","title","unknown","tagName","className","edit","isActive","value","onChange","onFocus","onClick","selectedValue","hasUnknownFormats","formats","some","format","type","help"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AANA;AACA;AACA;AAMA,MAAMA,IAAI,GAAG,cAAb;AACA,MAAMC,KAAK,GAAG,cAAI,0BAAJ,CAAd;AAEO,MAAMC,OAAO,GAAG;AACtBF,EAAAA,IADsB;AAEtBC,EAAAA,KAFsB;AAGtBE,EAAAA,OAAO,EAAE,GAHa;AAItBC,EAAAA,SAAS,EAAE,IAJW;;AAKtBC,EAAAA,IAAI,OAA2C;AAAA,QAAzC;AAAEC,MAAAA,QAAF;AAAYC,MAAAA,KAAZ;AAAmBC,MAAAA,QAAnB;AAA6BC,MAAAA;AAA7B,KAAyC;;AAC9C,aAASC,OAAT,GAAmB;AAClBF,MAAAA,QAAQ,CAAE,4BAAcD,KAAd,EAAqBP,IAArB,CAAF,CAAR;AACAS,MAAAA,OAAO;AACP;;AAED,UAAME,aAAa,GAAG,qBAAOJ,KAAP,CAAtB;AACA,UAAMK,iBAAiB,GAAGD,aAAa,CAACE,OAAd,CAAsBC,IAAtB,CAA8BD,OAAF,IAAe;AACpE,aAAOA,OAAO,CAACC,IAAR,CAAgBC,MAAF,IAAcA,MAAM,CAACC,IAAP,KAAgBhB,IAA5C,CAAP;AACA,KAFyB,CAA1B;;AAIA,QAAK,CAAEM,QAAF,IAAc,CAAEM,iBAArB,EAAyC;AACxC,aAAO,IAAP;AACA;;AAED,WACC,4BAAC,kCAAD;AACC,MAAA,IAAI,EAAC,SADN;AAEC,MAAA,IAAI,EAAGK,WAFR;AAGC,MAAA,KAAK,EAAGhB,KAHT;AAIC,MAAA,OAAO,EAAGS,OAJX;AAKC,MAAA,QAAQ,EAAG;AALZ,MADD;AASA;;AA7BqB,CAAhB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { removeFormat, slice } from '@wordpress/rich-text';\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport { help } from '@wordpress/icons';\n\nconst name = 'core/unknown';\nconst title = __( 'Clear Unknown Formatting' );\n\nexport const unknown = {\n\tname,\n\ttitle,\n\ttagName: '*',\n\tclassName: null,\n\tedit( { isActive, value, onChange, onFocus } ) {\n\t\tfunction onClick() {\n\t\t\tonChange( removeFormat( value, name ) );\n\t\t\tonFocus();\n\t\t}\n\n\t\tconst selectedValue = slice( value );\n\t\tconst hasUnknownFormats = selectedValue.formats.some( ( formats ) => {\n\t\t\treturn formats.some( ( format ) => format.type === name );\n\t\t} );\n\n\t\tif ( ! isActive && ! hasUnknownFormats ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<RichTextToolbarButton\n\t\t\t\tname=\"unknown\"\n\t\t\t\ticon={ help }\n\t\t\t\ttitle={ title }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tisActive={ true }\n\t\t\t/>\n\t\t);\n\t},\n};\n"]}

package/build-module/default-formats.js

@@ -12,5 +12,6 @@ import { textColor } from './text-color';
 import { subscript } from './subscript';
 import { superscript } from './superscript';
 import { keyboard } from './keyboard';
-export default [bold, code, image, italic, link, strikethrough, underline, textColor, subscript, superscript, keyboard];
+import { unknown } from './unknown';
+export default [bold, code, image, italic, link, strikethrough, underline, textColor, subscript, superscript, keyboard, unknown];
 //# sourceMappingURL=default-formats.js.map

package/build-module/default-formats.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/format-library/src/default-formats.js"],"names":["bold","code","image","italic","link","strikethrough","underline","textColor","subscript","superscript","keyboard"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,QAArB;AACA,SAASC,IAAT,QAAqB,QAArB;AACA,SAASC,KAAT,QAAsB,SAAtB;AACA,SAASC,MAAT,QAAuB,UAAvB;AACA,SAASC,IAAT,QAAqB,QAArB;AACA,SAASC,aAAT,QAA8B,iBAA9B;AACA,SAASC,SAAT,QAA0B,aAA1B;AACA,SAASC,SAAT,QAA0B,cAA1B;AACA,SAASC,SAAT,QAA0B,aAA1B;AACA,SAASC,WAAT,QAA4B,eAA5B;AACA,SAASC,QAAT,QAAyB,YAAzB;AAEA,eAAe,CACdV,IADc,EAEdC,IAFc,EAGdC,KAHc,EAIdC,MAJc,EAKdC,IALc,EAMdC,aANc,EAOdC,SAPc,EAQdC,SARc,EASdC,SATc,EAUdC,WAVc,EAWdC,QAXc,CAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport { bold } from './bold';\nimport { code } from './code';\nimport { image } from './image';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { strikethrough } from './strikethrough';\nimport { underline } from './underline';\nimport { textColor } from './text-color';\nimport { subscript } from './subscript';\nimport { superscript } from './superscript';\nimport { keyboard } from './keyboard';\n\nexport default [\n\tbold,\n\tcode,\n\timage,\n\titalic,\n\tlink,\n\tstrikethrough,\n\tunderline,\n\ttextColor,\n\tsubscript,\n\tsuperscript,\n\tkeyboard,\n];\n"]}
+{"version":3,"sources":["@wordpress/format-library/src/default-formats.js"],"names":["bold","code","image","italic","link","strikethrough","underline","textColor","subscript","superscript","keyboard","unknown"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,QAArB;AACA,SAASC,IAAT,QAAqB,QAArB;AACA,SAASC,KAAT,QAAsB,SAAtB;AACA,SAASC,MAAT,QAAuB,UAAvB;AACA,SAASC,IAAT,QAAqB,QAArB;AACA,SAASC,aAAT,QAA8B,iBAA9B;AACA,SAASC,SAAT,QAA0B,aAA1B;AACA,SAASC,SAAT,QAA0B,cAA1B;AACA,SAASC,SAAT,QAA0B,aAA1B;AACA,SAASC,WAAT,QAA4B,eAA5B;AACA,SAASC,QAAT,QAAyB,YAAzB;AACA,SAASC,OAAT,QAAwB,WAAxB;AAEA,eAAe,CACdX,IADc,EAEdC,IAFc,EAGdC,KAHc,EAIdC,MAJc,EAKdC,IALc,EAMdC,aANc,EAOdC,SAPc,EAQdC,SARc,EASdC,SATc,EAUdC,WAVc,EAWdC,QAXc,EAYdC,OAZc,CAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport { bold } from './bold';\nimport { code } from './code';\nimport { image } from './image';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { strikethrough } from './strikethrough';\nimport { underline } from './underline';\nimport { textColor } from './text-color';\nimport { subscript } from './subscript';\nimport { superscript } from './superscript';\nimport { keyboard } from './keyboard';\nimport { unknown } from './unknown';\n\nexport default [\n\tbold,\n\tcode,\n\timage,\n\titalic,\n\tlink,\n\tstrikethrough,\n\tunderline,\n\ttextColor,\n\tsubscript,\n\tsuperscript,\n\tkeyboard,\n\tunknown,\n];\n"]}

package/build-module/unknown/index.js

@@ -0,0 +1,52 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { removeFormat, slice } from '@wordpress/rich-text';
+import { RichTextToolbarButton } from '@wordpress/block-editor';
+import { help } from '@wordpress/icons';
+const name = 'core/unknown';
+
+const title = __('Clear Unknown Formatting');
+
+export const unknown = {
+  name,
+  title,
+  tagName: '*',
+  className: null,
+
+  edit(_ref) {
+    let {
+      isActive,
+      value,
+      onChange,
+      onFocus
+    } = _ref;
+
+    function onClick() {
+      onChange(removeFormat(value, name));
+      onFocus();
+    }
+
+    const selectedValue = slice(value);
+    const hasUnknownFormats = selectedValue.formats.some(formats => {
+      return formats.some(format => format.type === name);
+    });
+
+    if (!isActive && !hasUnknownFormats) {
+      return null;
+    }
+
+    return createElement(RichTextToolbarButton, {
+      name: "unknown",
+      icon: help,
+      title: title,
+      onClick: onClick,
+      isActive: true
+    });
+  }
+
+};
+//# sourceMappingURL=index.js.map

package/build-module/unknown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/format-library/src/unknown/index.js"],"names":["__","removeFormat","slice","RichTextToolbarButton","help","name","title","unknown","tagName","className","edit","isActive","value","onChange","onFocus","onClick","selectedValue","hasUnknownFormats","formats","some","format","type"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,YAAT,EAAuBC,KAAvB,QAAoC,sBAApC;AACA,SAASC,qBAAT,QAAsC,yBAAtC;AACA,SAASC,IAAT,QAAqB,kBAArB;AAEA,MAAMC,IAAI,GAAG,cAAb;;AACA,MAAMC,KAAK,GAAGN,EAAE,CAAE,0BAAF,CAAhB;;AAEA,OAAO,MAAMO,OAAO,GAAG;AACtBF,EAAAA,IADsB;AAEtBC,EAAAA,KAFsB;AAGtBE,EAAAA,OAAO,EAAE,GAHa;AAItBC,EAAAA,SAAS,EAAE,IAJW;;AAKtBC,EAAAA,IAAI,OAA2C;AAAA,QAAzC;AAAEC,MAAAA,QAAF;AAAYC,MAAAA,KAAZ;AAAmBC,MAAAA,QAAnB;AAA6BC,MAAAA;AAA7B,KAAyC;;AAC9C,aAASC,OAAT,GAAmB;AAClBF,MAAAA,QAAQ,CAAEZ,YAAY,CAAEW,KAAF,EAASP,IAAT,CAAd,CAAR;AACAS,MAAAA,OAAO;AACP;;AAED,UAAME,aAAa,GAAGd,KAAK,CAAEU,KAAF,CAA3B;AACA,UAAMK,iBAAiB,GAAGD,aAAa,CAACE,OAAd,CAAsBC,IAAtB,CAA8BD,OAAF,IAAe;AACpE,aAAOA,OAAO,CAACC,IAAR,CAAgBC,MAAF,IAAcA,MAAM,CAACC,IAAP,KAAgBhB,IAA5C,CAAP;AACA,KAFyB,CAA1B;;AAIA,QAAK,CAAEM,QAAF,IAAc,CAAEM,iBAArB,EAAyC;AACxC,aAAO,IAAP;AACA;;AAED,WACC,cAAC,qBAAD;AACC,MAAA,IAAI,EAAC,SADN;AAEC,MAAA,IAAI,EAAGb,IAFR;AAGC,MAAA,KAAK,EAAGE,KAHT;AAIC,MAAA,OAAO,EAAGS,OAJX;AAKC,MAAA,QAAQ,EAAG;AALZ,MADD;AASA;;AA7BqB,CAAhB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { removeFormat, slice } from '@wordpress/rich-text';\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport { help } from '@wordpress/icons';\n\nconst name = 'core/unknown';\nconst title = __( 'Clear Unknown Formatting' );\n\nexport const unknown = {\n\tname,\n\ttitle,\n\ttagName: '*',\n\tclassName: null,\n\tedit( { isActive, value, onChange, onFocus } ) {\n\t\tfunction onClick() {\n\t\t\tonChange( removeFormat( value, name ) );\n\t\t\tonFocus();\n\t\t}\n\n\t\tconst selectedValue = slice( value );\n\t\tconst hasUnknownFormats = selectedValue.formats.some( ( formats ) => {\n\t\t\treturn formats.some( ( format ) => format.type === name );\n\t\t} );\n\n\t\tif ( ! isActive && ! hasUnknownFormats ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<RichTextToolbarButton\n\t\t\t\tname=\"unknown\"\n\t\t\t\ticon={ help }\n\t\t\t\ttitle={ title }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tisActive={ true }\n\t\t\t/>\n\t\t);\n\t},\n};\n"]}

package/build-style/style-rtl.css

@@ -1,3 +1,9 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -11,6 +17,12 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -82,6 +94,8 @@
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --wp-admin-border-width-focus: 2px;
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   :root {

package/build-style/style.css

@@ -1,3 +1,9 @@
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -11,6 +17,12 @@
  * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -82,6 +94,8 @@
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --wp-admin-border-width-focus: 2px;
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   :root {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/format-library",
-	"version": "3.20.0",
+	"version": "4.0.0",
 	"description": "Format library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -26,24 +26,24 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.22.0",
-		"@wordpress/block-editor": "^10.5.0",
-		"@wordpress/components": "^22.1.0",
-		"@wordpress/compose": "^5.20.0",
-		"@wordpress/data": "^7.6.0",
-		"@wordpress/element": "^4.20.0",
-		"@wordpress/html-entities": "^3.22.0",
-		"@wordpress/i18n": "^4.22.0",
-		"@wordpress/icons": "^9.13.0",
-		"@wordpress/rich-text": "^5.20.0",
-		"@wordpress/url": "^3.23.0"
+		"@wordpress/a11y": "^3.23.0",
+		"@wordpress/block-editor": "^11.0.0",
+		"@wordpress/components": "^23.0.0",
+		"@wordpress/compose": "^6.0.0",
+		"@wordpress/data": "^8.0.0",
+		"@wordpress/element": "^5.0.0",
+		"@wordpress/html-entities": "^3.23.0",
+		"@wordpress/i18n": "^4.23.0",
+		"@wordpress/icons": "^9.14.0",
+		"@wordpress/rich-text": "^6.0.0",
+		"@wordpress/url": "^3.24.0"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0"
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "7ac04f446242452d3cb24372f9ca58f0cae97715"
+	"gitHead": "1eb65aabe6738097f4c062e78f69ae8f05879848"
 }

package/src/default-formats.js

@@ -12,6 +12,7 @@ import { textColor } from './text-color';
 import { subscript } from './subscript';
 import { superscript } from './superscript';
 import { keyboard } from './keyboard';
+import { unknown } from './unknown';
 
 export default [
 	bold,
@@ -25,4 +26,5 @@ export default [
 	subscript,
 	superscript,
 	keyboard,
+	unknown,
 ];

package/src/text-color/test/index.native.js

@@ -32,60 +32,55 @@ afterAll( () => {
 
 describe( 'Text color', () => {
 	it( 'shows the text color formatting button in the toolbar', async () => {
-		const { getByLabelText } = await initializeEditor();
+		const screen = await initializeEditor();
 
 		// Wait for the editor placeholder
-		const paragraphPlaceholder = await waitFor( () =>
-			getByLabelText( 'Add paragraph block' )
+		const paragraphPlaceholder = await screen.findByLabelText(
+			'Add paragraph block'
 		);
 		expect( paragraphPlaceholder ).toBeDefined();
 		fireEvent.press( paragraphPlaceholder );
 
 		// Wait for the block to be created
-		const paragraphBlock = await waitFor( () =>
-			getByLabelText( /Paragraph Block\. Row 1/ )
+		const [ paragraphBlock ] = await screen.findAllByLabelText(
+			/Paragraph Block\. Row 1/
 		);
 		expect( paragraphBlock ).toBeDefined();
 
 		// Look for the highlight text color button
-		const textColorButton = await waitFor( () =>
-			getByLabelText( 'Text color' )
-		);
+		const textColorButton = await screen.findByLabelText( 'Text color' );
 		expect( textColorButton ).toBeDefined();
 	} );
 
 	it( 'allows toggling the highlight color feature to type new text', async () => {
-		const { getByLabelText, getByTestId, getByA11yHint } =
-			await initializeEditor();
+		const screen = await initializeEditor();
 
 		// Wait for the editor placeholder
-		const paragraphPlaceholder = await waitFor( () =>
-			getByLabelText( 'Add paragraph block' )
+		const paragraphPlaceholder = await screen.findByLabelText(
+			'Add paragraph block'
 		);
 		expect( paragraphPlaceholder ).toBeDefined();
 		fireEvent.press( paragraphPlaceholder );
 
 		// Wait for the block to be created
-		const paragraphBlock = await waitFor( () =>
-			getByLabelText( /Paragraph Block\. Row 1/ )
+		const [ paragraphBlock ] = await screen.findAllByLabelText(
+			/Paragraph Block\. Row 1/
 		);
 		expect( paragraphBlock ).toBeDefined();
 
 		// Look for the highlight text color button
-		const textColorButton = await waitFor( () =>
-			getByLabelText( 'Text color' )
-		);
+		const textColorButton = await screen.findByLabelText( 'Text color' );
 		expect( textColorButton ).toBeDefined();
 		fireEvent.press( textColorButton );
 
 		// Wait for Inline color modal to be visible
-		const inlineTextColorModal = getByTestId( 'inline-text-color-modal' );
+		const inlineTextColorModal = screen.getByTestId(
+			'inline-text-color-modal'
+		);
 		await waitFor( () => inlineTextColorModal.props.isVisible );
 
 		// Look for the pink color button
-		const pinkColorButton = await waitFor( () =>
-			getByA11yHint( COLOR_PINK )
-		);
+		const pinkColorButton = await screen.findByA11yHint( COLOR_PINK );
 		expect( pinkColorButton ).toBeDefined();
 		fireEvent.press( pinkColorButton );
 
@@ -93,29 +88,24 @@ describe( 'Text color', () => {
 	} );
 
 	it( 'allows toggling the highlight color feature to selected text', async () => {
-		const {
-			getByLabelText,
-			getByTestId,
-			getByPlaceholderText,
-			getByA11yHint,
-		} = await initializeEditor();
+		const screen = await initializeEditor();
 		const text = 'Hello this is a test';
 
 		// Wait for the editor placeholder
-		const paragraphPlaceholder = await waitFor( () =>
-			getByLabelText( 'Add paragraph block' )
+		const paragraphPlaceholder = await screen.findByLabelText(
+			'Add paragraph block'
 		);
 		expect( paragraphPlaceholder ).toBeDefined();
 		fireEvent.press( paragraphPlaceholder );
 
 		// Wait for the block to be created
-		const paragraphBlock = await waitFor( () =>
-			getByLabelText( /Paragraph Block\. Row 1/ )
+		const [ paragraphBlock ] = await screen.findAllByLabelText(
+			/Paragraph Block\. Row 1/
 		);
 		expect( paragraphBlock ).toBeDefined();
 
 		// Update TextInput value
-		const paragraphText = getByPlaceholderText( 'Start writing…' );
+		const paragraphText = screen.getByPlaceholderText( 'Start writing…' );
 		fireEvent( paragraphText, 'onSelectionChange', 0, text.length, text, {
 			nativeEvent: {
 				eventCount: 1,
@@ -125,20 +115,18 @@ describe( 'Text color', () => {
 		} );
 
 		// Look for the highlight text color button
-		const textColorButton = await waitFor( () =>
-			getByLabelText( 'Text color' )
-		);
+		const textColorButton = await screen.findByLabelText( 'Text color' );
 		expect( textColorButton ).toBeDefined();
 		fireEvent.press( textColorButton );
 
 		// Wait for Inline color modal to be visible
-		const inlineTextColorModal = getByTestId( 'inline-text-color-modal' );
+		const inlineTextColorModal = screen.getByTestId(
+			'inline-text-color-modal'
+		);
 		await waitFor( () => inlineTextColorModal.props.isVisible );
 
 		// Look for the pink color button
-		const pinkColorButton = await waitFor( () =>
-			getByA11yHint( COLOR_PINK )
-		);
+		const pinkColorButton = await screen.findByA11yHint( COLOR_PINK );
 		expect( pinkColorButton ).toBeDefined();
 		fireEvent.press( pinkColorButton );
 
@@ -146,13 +134,13 @@ describe( 'Text color', () => {
 	} );
 
 	it( 'creates a paragraph block with the text color format', async () => {
-		const { getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml: TEXT_WITH_COLOR,
 		} );
 
 		// Wait for the block to be created
-		const paragraphBlock = await waitFor( () =>
-			getByLabelText( /Paragraph Block\. Row 1/ )
+		const [ paragraphBlock ] = await screen.findAllByLabelText(
+			/Paragraph Block\. Row 1/
 		);
 		expect( paragraphBlock ).toBeDefined();
 

package/src/unknown/index.js

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { removeFormat, slice } from '@wordpress/rich-text';
+import { RichTextToolbarButton } from '@wordpress/block-editor';
+import { help } from '@wordpress/icons';
+
+const name = 'core/unknown';
+const title = __( 'Clear Unknown Formatting' );
+
+export const unknown = {
+	name,
+	title,
+	tagName: '*',
+	className: null,
+	edit( { isActive, value, onChange, onFocus } ) {
+		function onClick() {
+			onChange( removeFormat( value, name ) );
+			onFocus();
+		}
+
+		const selectedValue = slice( value );
+		const hasUnknownFormats = selectedValue.formats.some( ( formats ) => {
+			return formats.some( ( format ) => format.type === name );
+		} );
+
+		if ( ! isActive && ! hasUnknownFormats ) {
+			return null;
+		}
+
+		return (
+			<RichTextToolbarButton
+				name="unknown"
+				icon={ help }
+				title={ title }
+				onClick={ onClick }
+				isActive={ true }
+			/>
+		);
+	},
+};