@wordpress/block-editor 7.0.1 → 8.0.0

package/build-module/utils/parse-css-unit-to-px.js

@@ -0,0 +1,285 @@
+/**
+ * Converts string to object { value, unit }.
+ *
+ * @param {string} cssUnit
+ * @return {Object} parsedUnit
+ */
+function parseUnit(cssUnit) {
+  const match = cssUnit === null || cssUnit === void 0 ? void 0 : cssUnit.trim().match(/^(0?[-.]?\d+)(r?e[m|x]|v[h|w|min|max]+|p[x|t|c]|[c|m]m|%|in|ch|Q|lh)$/);
+
+  if (!isNaN(cssUnit) && !isNaN(parseFloat(cssUnit))) {
+    return {
+      value: parseFloat(cssUnit),
+      unit: 'px'
+    };
+  }
+
+  return match ? {
+    value: parseFloat(match[1]) || match[1],
+    unit: match[2]
+  } : {
+    value: cssUnit,
+    unit: undefined
+  };
+}
+/**
+ * Evaluate a math expression.
+ *
+ * @param {string} expression
+ * @return {number} evaluated expression.
+ */
+
+
+function calculate(expression) {
+  return Function(`'use strict'; return (${expression})`)();
+}
+/**
+ * Calculates the css function value for the supported css functions such as max, min, clamp and calc.
+ *
+ * @param {string} functionUnitValue string should be in a particular format (for example min(12px,12px) ) no nested loops.
+ * @param {Object} options
+ * @return {string} unit containing the unit in PX.
+ */
+
+
+function getFunctionUnitValue(functionUnitValue, options) {
+  const functionUnit = functionUnitValue.split(/[(),]/g).filter(Boolean);
+  const units = functionUnit.slice(1).map(unit => parseUnit(getPxFromCssUnit(unit, options)).value).filter(Boolean);
+
+  switch (functionUnit[0]) {
+    case 'min':
+      return Math.min(...units) + 'px';
+
+    case 'max':
+      return Math.max(...units) + 'px';
+
+    case 'clamp':
+      if (units.length !== 3) {
+        return null;
+      }
+
+      if (units[1] < units[0]) {
+        return units[0] + 'px';
+      }
+
+      if (units[1] > units[2]) {
+        return units[2] + 'px';
+      }
+
+      return units[1] + 'px';
+
+    case 'calc':
+      return units[0] + 'px';
+  }
+}
+/**
+ * Take a css function such as min, max, calc, clamp and returns parsedUnit
+ *
+ * How this works for the nested function is that it first replaces the inner function call.
+ * Then it tackles the outer onces.
+ * So for example: min( max(25px, 35px), 40px )
+ * in the first pass we would replace max(25px, 35px) with 35px.
+ * then we would try to evaluate min( 35px, 40px )
+ * and then finally return 35px.
+ *
+ * @param {string} cssUnit
+ * @return {Object} parsedUnit object.
+ */
+
+
+function parseUnitFunction(cssUnit) {
+  while (true) {
+    const currentCssUnit = cssUnit;
+    const regExp = /(max|min|calc|clamp)\(([^()]*)\)/g;
+    const matches = regExp.exec(cssUnit) || [];
+
+    if (matches[0]) {
+      const functionUnitValue = getFunctionUnitValue(matches[0]);
+      cssUnit = cssUnit.replace(matches[0], functionUnitValue);
+    } // if the unit hasn't been modified or we have a single value break free.
+
+
+    if (cssUnit === currentCssUnit || parseFloat(cssUnit)) {
+      break;
+    }
+  }
+
+  return parseUnit(cssUnit);
+}
+/**
+ * Return true if we think this is a math expression.
+ *
+ * @param {string} cssUnit the cssUnit value being evaluted.
+ * @return {boolean} Whether the cssUnit is a math expression.
+ */
+
+
+function isMathExpression(cssUnit) {
+  for (let i = 0; i < cssUnit.length; i++) {
+    if (['+', '-', '/', '*'].includes(cssUnit[i])) {
+      return true;
+    }
+  }
+
+  return false;
+}
+/**
+ * Evaluates the math expression and return a px value.
+ *
+ * @param {string} cssUnit the cssUnit value being evaluted.
+ * @return {string} return a converfted value to px.
+ */
+
+
+function evalMathExpression(cssUnit) {
+  let errorFound = false; // Convert every part of the expression to px values.
+
+  const cssUnitsBits = cssUnit.split(/[+-/*/]/g).filter(Boolean);
+
+  for (const unit of cssUnitsBits) {
+    // Standardize the unit to px and extract the value.
+    const parsedUnit = parseUnit(getPxFromCssUnit(unit));
+
+    if (!parseFloat(parsedUnit.value)) {
+      errorFound = true; // end early since we are dealing with a null value.
+
+      break;
+    }
+
+    cssUnit = cssUnit.replace(unit, parsedUnit.value);
+  }
+
+  return errorFound ? null : calculate(cssUnit).toFixed(0) + 'px';
+}
+/**
+ * Convert a parsedUnit object to px value.
+ *
+ * @param {Object} parsedUnit
+ * @param {Object} options
+ * @return {string} or {null} returns the converted with in a px value format.
+ */
+
+
+function convertParsedUnitToPx(parsedUnit, options) {
+  const PIXELS_PER_INCH = 96;
+  const ONE_PERCENT = 0.01;
+  const defaultProperties = {
+    fontSize: 16,
+    lineHeight: 16,
+    width: 375,
+    height: 812,
+    type: 'font'
+  };
+  const setOptions = Object.assign({}, defaultProperties, options);
+  const relativeUnits = {
+    em: setOptions.fontSize,
+    rem: setOptions.fontSize,
+    vh: setOptions.height * ONE_PERCENT,
+    vw: setOptions.width * ONE_PERCENT,
+    vmin: (setOptions.width < setOptions.height ? setOptions.width : setOptions.height) * ONE_PERCENT,
+    vmax: (setOptions.width > setOptions.height ? setOptions.width : setOptions.height) * ONE_PERCENT,
+    '%': (setOptions.type === 'font' ? setOptions.fontSize : setOptions.width) * ONE_PERCENT,
+    ch: 8,
+    // The advance measure (width) of the glyph "0" of the element's font. Approximate
+    ex: 7.15625,
+    // x-height of the element's font. Approximate
+    lh: setOptions.lineHeight
+  };
+  const absoluteUnits = {
+    in: PIXELS_PER_INCH,
+    cm: PIXELS_PER_INCH / 2.54,
+    mm: PIXELS_PER_INCH / 25.4,
+    pt: PIXELS_PER_INCH / 72,
+    pc: PIXELS_PER_INCH / 6,
+    px: 1,
+    Q: PIXELS_PER_INCH / 2.54 / 40
+  };
+
+  if (relativeUnits[parsedUnit.unit]) {
+    return (relativeUnits[parsedUnit.unit] * parsedUnit.value).toFixed(0) + 'px';
+  }
+
+  if (absoluteUnits[parsedUnit.unit]) {
+    return (absoluteUnits[parsedUnit.unit] * parsedUnit.value).toFixed(0) + 'px';
+  }
+
+  return null;
+}
+/**
+ * Returns the px value of a cssUnit.
+ *
+ * @param {string} cssUnit
+ * @param {Object} options
+ * @return {string} returns the cssUnit value in a simple px format.
+ */
+
+
+export function getPxFromCssUnit(cssUnit, options = {}) {
+  if (Number.isFinite(cssUnit)) {
+    return cssUnit.toFixed(0) + 'px';
+  }
+
+  if (cssUnit === undefined) {
+    return null;
+  }
+
+  let parsedUnit = parseUnit(cssUnit);
+
+  if (!parsedUnit.unit) {
+    parsedUnit = parseUnitFunction(cssUnit, options);
+  }
+
+  if (isMathExpression(cssUnit) && !parsedUnit.unit) {
+    return evalMathExpression(cssUnit);
+  }
+
+  return convertParsedUnitToPx(parsedUnit, options);
+} // Use simple cache.
+
+const cache = {};
+/**
+ * Returns the px value of a cssUnit. The memoized version of getPxFromCssUnit;
+ *
+ * @param {string} cssUnit
+ * @param {Object} options
+ * @return {string} returns the cssUnit value in a simple px format.
+ */
+
+function memoizedGetPxFromCssUnit(cssUnit, options = {}) {
+  const hash = cssUnit + hashOptions(options);
+
+  if (!cache[hash]) {
+    cache[hash] = getPxFromCssUnit(cssUnit, options);
+  }
+
+  return cache[hash];
+}
+
+function hashOptions(options) {
+  let hash = '';
+
+  if (options.hasOwnProperty('fontSize')) {
+    hash = ':' + options.width;
+  }
+
+  if (options.hasOwnProperty('lineHeight')) {
+    hash = ':' + options.lineHeight;
+  }
+
+  if (options.hasOwnProperty('width')) {
+    hash = ':' + options.width;
+  }
+
+  if (options.hasOwnProperty('height')) {
+    hash = ':' + options.height;
+  }
+
+  if (options.hasOwnProperty('type')) {
+    hash = ':' + options.type;
+  }
+
+  return hash;
+}
+
+export default memoizedGetPxFromCssUnit;
+//# sourceMappingURL=parse-css-unit-to-px.js.map

package/build-module/utils/parse-css-unit-to-px.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/utils/parse-css-unit-to-px.js"],"names":["parseUnit","cssUnit","match","trim","isNaN","parseFloat","value","unit","undefined","calculate","expression","Function","getFunctionUnitValue","functionUnitValue","options","functionUnit","split","filter","Boolean","units","slice","map","getPxFromCssUnit","Math","min","max","length","parseUnitFunction","currentCssUnit","regExp","matches","exec","replace","isMathExpression","i","includes","evalMathExpression","errorFound","cssUnitsBits","parsedUnit","toFixed","convertParsedUnitToPx","PIXELS_PER_INCH","ONE_PERCENT","defaultProperties","fontSize","lineHeight","width","height","type","setOptions","Object","assign","relativeUnits","em","rem","vh","vw","vmin","vmax","ch","ex","lh","absoluteUnits","in","cm","mm","pt","pc","px","Q","Number","isFinite","cache","memoizedGetPxFromCssUnit","hash","hashOptions","hasOwnProperty"],"mappings":"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","sourcesContent":["/**\n * Converts string to object { value, unit }.\n *\n * @param {string} cssUnit\n * @return {Object} parsedUnit\n */\nfunction parseUnit( cssUnit ) {\n\tconst match = cssUnit\n\t\t?.trim()\n\t\t.match(\n\t\t\t/^(0?[-.]?\\d+)(r?e[m|x]|v[h|w|min|max]+|p[x|t|c]|[c|m]m|%|in|ch|Q|lh)$/\n\t\t);\n\tif ( ! isNaN( cssUnit ) && ! isNaN( parseFloat( cssUnit ) ) ) {\n\t\treturn { value: parseFloat( cssUnit ), unit: 'px' };\n\t}\n\treturn match\n\t\t? { value: parseFloat( match[ 1 ] ) || match[ 1 ], unit: match[ 2 ] }\n\t\t: { value: cssUnit, unit: undefined };\n}\n/**\n * Evaluate a math expression.\n *\n * @param {string} expression\n * @return {number} evaluated expression.\n */\nfunction calculate( expression ) {\n\treturn Function( `'use strict'; return (${ expression })` )();\n}\n\n/**\n * Calculates the css function value for the supported css functions such as max, min, clamp and calc.\n *\n * @param {string} functionUnitValue string should be in a particular format (for example min(12px,12px) ) no nested loops.\n * @param {Object} options\n * @return {string} unit containing the unit in PX.\n */\nfunction getFunctionUnitValue( functionUnitValue, options ) {\n\tconst functionUnit = functionUnitValue.split( /[(),]/g ).filter( Boolean );\n\n\tconst units = functionUnit\n\t\t.slice( 1 )\n\t\t.map( ( unit ) => parseUnit( getPxFromCssUnit( unit, options ) ).value )\n\t\t.filter( Boolean );\n\n\tswitch ( functionUnit[ 0 ] ) {\n\t\tcase 'min':\n\t\t\treturn Math.min( ...units ) + 'px';\n\t\tcase 'max':\n\t\t\treturn Math.max( ...units ) + 'px';\n\t\tcase 'clamp':\n\t\t\tif ( units.length !== 3 ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tif ( units[ 1 ] < units[ 0 ] ) {\n\t\t\t\treturn units[ 0 ] + 'px';\n\t\t\t}\n\t\t\tif ( units[ 1 ] > units[ 2 ] ) {\n\t\t\t\treturn units[ 2 ] + 'px';\n\t\t\t}\n\t\t\treturn units[ 1 ] + 'px';\n\t\tcase 'calc':\n\t\t\treturn units[ 0 ] + 'px';\n\t}\n}\n\n/**\n * Take a css function such as min, max, calc, clamp and returns parsedUnit\n *\n * How this works for the nested function is that it first replaces the inner function call.\n * Then it tackles the outer onces.\n * So for example: min( max(25px, 35px), 40px )\n * in the first pass we would replace max(25px, 35px) with 35px.\n * then we would try to evaluate min( 35px, 40px )\n * and then finally return 35px.\n *\n * @param {string} cssUnit\n * @return {Object} parsedUnit object.\n */\nfunction parseUnitFunction( cssUnit ) {\n\twhile ( true ) {\n\t\tconst currentCssUnit = cssUnit;\n\t\tconst regExp = /(max|min|calc|clamp)\\(([^()]*)\\)/g;\n\t\tconst matches = regExp.exec( cssUnit ) || [];\n\t\tif ( matches[ 0 ] ) {\n\t\t\tconst functionUnitValue = getFunctionUnitValue( matches[ 0 ] );\n\t\t\tcssUnit = cssUnit.replace( matches[ 0 ], functionUnitValue );\n\t\t}\n\n\t\t// if the unit hasn't been modified or we have a single value break free.\n\t\tif ( cssUnit === currentCssUnit || parseFloat( cssUnit ) ) {\n\t\t\tbreak;\n\t\t}\n\t}\n\n\treturn parseUnit( cssUnit );\n}\n/**\n * Return true if we think this is a math expression.\n *\n * @param {string} cssUnit the cssUnit value being evaluted.\n * @return {boolean} Whether the cssUnit is a math expression.\n */\nfunction isMathExpression( cssUnit ) {\n\tfor ( let i = 0; i < cssUnit.length; i++ ) {\n\t\tif ( [ '+', '-', '/', '*' ].includes( cssUnit[ i ] ) ) {\n\t\t\treturn true;\n\t\t}\n\t}\n\treturn false;\n}\n/**\n * Evaluates the math expression and return a px value.\n *\n * @param {string} cssUnit the cssUnit value being evaluted.\n * @return {string} return a converfted value to px.\n */\nfunction evalMathExpression( cssUnit ) {\n\tlet errorFound = false;\n\t// Convert every part of the expression to px values.\n\tconst cssUnitsBits = cssUnit.split( /[+-/*/]/g ).filter( Boolean );\n\tfor ( const unit of cssUnitsBits ) {\n\t\t// Standardize the unit to px and extract the value.\n\t\tconst parsedUnit = parseUnit( getPxFromCssUnit( unit ) );\n\t\tif ( ! parseFloat( parsedUnit.value ) ) {\n\t\t\terrorFound = true;\n\t\t\t// end early since we are dealing with a null value.\n\t\t\tbreak;\n\t\t}\n\t\tcssUnit = cssUnit.replace( unit, parsedUnit.value );\n\t}\n\n\treturn errorFound ? null : calculate( cssUnit ).toFixed( 0 ) + 'px';\n}\n\n/**\n * Convert a parsedUnit object to px value.\n *\n * @param {Object} parsedUnit\n * @param {Object} options\n * @return {string} or {null} returns the converted with in a px value format.\n */\nfunction convertParsedUnitToPx( parsedUnit, options ) {\n\tconst PIXELS_PER_INCH = 96;\n\tconst ONE_PERCENT = 0.01;\n\n\tconst defaultProperties = {\n\t\tfontSize: 16,\n\t\tlineHeight: 16,\n\t\twidth: 375,\n\t\theight: 812,\n\t\ttype: 'font',\n\t};\n\n\tconst setOptions = Object.assign( {}, defaultProperties, options );\n\n\tconst relativeUnits = {\n\t\tem: setOptions.fontSize,\n\t\trem: setOptions.fontSize,\n\t\tvh: setOptions.height * ONE_PERCENT,\n\t\tvw: setOptions.width * ONE_PERCENT,\n\t\tvmin:\n\t\t\t( setOptions.width < setOptions.height\n\t\t\t\t? setOptions.width\n\t\t\t\t: setOptions.height ) * ONE_PERCENT,\n\t\tvmax:\n\t\t\t( setOptions.width > setOptions.height\n\t\t\t\t? setOptions.width\n\t\t\t\t: setOptions.height ) * ONE_PERCENT,\n\t\t'%':\n\t\t\t( setOptions.type === 'font'\n\t\t\t\t? setOptions.fontSize\n\t\t\t\t: setOptions.width ) * ONE_PERCENT,\n\t\tch: 8, // The advance measure (width) of the glyph \"0\" of the element's font. Approximate\n\t\tex: 7.15625, // x-height of the element's font. Approximate\n\t\tlh: setOptions.lineHeight,\n\t};\n\n\tconst absoluteUnits = {\n\t\tin: PIXELS_PER_INCH,\n\t\tcm: PIXELS_PER_INCH / 2.54,\n\t\tmm: PIXELS_PER_INCH / 25.4,\n\t\tpt: PIXELS_PER_INCH / 72,\n\t\tpc: PIXELS_PER_INCH / 6,\n\t\tpx: 1,\n\t\tQ: PIXELS_PER_INCH / 2.54 / 40,\n\t};\n\n\tif ( relativeUnits[ parsedUnit.unit ] ) {\n\t\treturn (\n\t\t\t( relativeUnits[ parsedUnit.unit ] * parsedUnit.value ).toFixed(\n\t\t\t\t0\n\t\t\t) + 'px'\n\t\t);\n\t}\n\n\tif ( absoluteUnits[ parsedUnit.unit ] ) {\n\t\treturn (\n\t\t\t( absoluteUnits[ parsedUnit.unit ] * parsedUnit.value ).toFixed(\n\t\t\t\t0\n\t\t\t) + 'px'\n\t\t);\n\t}\n\n\treturn null;\n}\n\n/**\n * Returns the px value of a cssUnit.\n *\n * @param {string} cssUnit\n * @param {Object} options\n * @return {string} returns the cssUnit value in a simple px format.\n */\nexport function getPxFromCssUnit( cssUnit, options = {} ) {\n\tif ( Number.isFinite( cssUnit ) ) {\n\t\treturn cssUnit.toFixed( 0 ) + 'px';\n\t}\n\tif ( cssUnit === undefined ) {\n\t\treturn null;\n\t}\n\tlet parsedUnit = parseUnit( cssUnit );\n\n\tif ( ! parsedUnit.unit ) {\n\t\tparsedUnit = parseUnitFunction( cssUnit, options );\n\t}\n\n\tif ( isMathExpression( cssUnit ) && ! parsedUnit.unit ) {\n\t\treturn evalMathExpression( cssUnit );\n\t}\n\n\treturn convertParsedUnitToPx( parsedUnit, options );\n}\n\n// Use simple cache.\nconst cache = {};\n/**\n * Returns the px value of a cssUnit. The memoized version of getPxFromCssUnit;\n *\n * @param {string} cssUnit\n * @param {Object} options\n * @return {string} returns the cssUnit value in a simple px format.\n */\nfunction memoizedGetPxFromCssUnit( cssUnit, options = {} ) {\n\tconst hash = cssUnit + hashOptions( options );\n\n\tif ( ! cache[ hash ] ) {\n\t\tcache[ hash ] = getPxFromCssUnit( cssUnit, options );\n\t}\n\treturn cache[ hash ];\n}\n\nfunction hashOptions( options ) {\n\tlet hash = '';\n\tif ( options.hasOwnProperty( 'fontSize' ) ) {\n\t\thash = ':' + options.width;\n\t}\n\tif ( options.hasOwnProperty( 'lineHeight' ) ) {\n\t\thash = ':' + options.lineHeight;\n\t}\n\tif ( options.hasOwnProperty( 'width' ) ) {\n\t\thash = ':' + options.width;\n\t}\n\tif ( options.hasOwnProperty( 'height' ) ) {\n\t\thash = ':' + options.height;\n\t}\n\tif ( options.hasOwnProperty( 'type' ) ) {\n\t\thash = ':' + options.type;\n\t}\n\treturn hash;\n}\n\nexport default memoizedGetPxFromCssUnit;\n"]}

package/build-module/utils/transform-styles/transforms/wrap.js

@@ -2,8 +2,24 @@
  * @constant string IS_ROOT_TAG Regex to check if the selector is a root tag selector.
  */
 const IS_ROOT_TAG = /^(body|html|:root).*$/;
+/**
+ * Creates a callback to modify selectors so they only apply within a certain
+ * namespace.
+ *
+ * @param {string}   namespace Namespace to prefix selectors with.
+ * @param {string[]} ignore    Selectors to not prefix.
+ *
+ * @return {(node: Object) => Object} Callback to wrap selectors.
+ */
 
 const wrap = (namespace, ignore = []) => node => {
+  /**
+   * Updates selector if necessary.
+   *
+   * @param {string} selector Selector to modify.
+   *
+   * @return {string} Updated selector.
+   */
   const updateSelector = selector => {
     if (ignore.includes(selector.trim())) {
       return selector;

package/build-module/utils/transform-styles/transforms/wrap.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/utils/transform-styles/transforms/wrap.js"],"names":["IS_ROOT_TAG","wrap","namespace","ignore","node","updateSelector","selector","includes","trim","match","replace","type","selectors","map"],"mappings":"AAAA;AACA;AACA;AACA,MAAMA,WAAW,GAAG,uBAApB;;AAEA,MAAMC,IAAI,GAAG,CAAEC,SAAF,EAAaC,MAAM,GAAG,EAAtB,KAAgCC,IAAF,IAAY;AACtD,QAAMC,cAAc,GAAKC,QAAF,IAAgB;AACtC,QAAKH,MAAM,CAACI,QAAP,CAAiBD,QAAQ,CAACE,IAAT,EAAjB,CAAL,EAA0C;AACzC,aAAOF,QAAP;AACA,KAHqC,CAKtC;;;AACA;AACC,UAAK,CAAEA,QAAQ,CAACG,KAAT,CAAgBT,WAAhB,CAAP,EAAuC;AACtC,eAAOE,SAAS,GAAG,GAAZ,GAAkBI,QAAzB;AACA;AACD,KAVqC,CAYtC;;AACA,WAAOA,QAAQ,CAACI,OAAT,CAAkB,oBAAlB,EAAwCR,SAAxC,CAAP;AACA,GAdD;;AAgBA,MAAKE,IAAI,CAACO,IAAL,KAAc,MAAnB,EAA4B;AAC3B,WAAO,EACN,GAAGP,IADG;AAENQ,MAAAA,SAAS,EAAER,IAAI,CAACQ,SAAL,CAAeC,GAAf,CAAoBR,cAApB;AAFL,KAAP;AAIA;;AAED,SAAOD,IAAP;AACA,CAzBD;;AA2BA,eAAeH,IAAf","sourcesContent":["/**\n * @constant string IS_ROOT_TAG Regex to check if the selector is a root tag selector.\n */\nconst IS_ROOT_TAG = /^(body|html|:root).*$/;\n\nconst wrap = ( namespace, ignore = [] ) => ( node ) => {\n\tconst updateSelector = ( selector ) => {\n\t\tif ( ignore.includes( selector.trim() ) ) {\n\t\t\treturn selector;\n\t\t}\n\n\t\t// Anything other than a root tag is always prefixed.\n\t\t{\n\t\t\tif ( ! selector.match( IS_ROOT_TAG ) ) {\n\t\t\t\treturn namespace + ' ' + selector;\n\t\t\t}\n\t\t}\n\n\t\t// HTML and Body elements cannot be contained within our container so lets extract their styles.\n\t\treturn selector.replace( /^(body|html|:root)/, namespace );\n\t};\n\n\tif ( node.type === 'rule' ) {\n\t\treturn {\n\t\t\t...node,\n\t\t\tselectors: node.selectors.map( updateSelector ),\n\t\t};\n\t}\n\n\treturn node;\n};\n\nexport default wrap;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/utils/transform-styles/transforms/wrap.js"],"names":["IS_ROOT_TAG","wrap","namespace","ignore","node","updateSelector","selector","includes","trim","match","replace","type","selectors","map"],"mappings":"AAAA;AACA;AACA;AACA,MAAMA,WAAW,GAAG,uBAApB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,IAAI,GAAG,CAAEC,SAAF,EAAaC,MAAM,GAAG,EAAtB,KAAgCC,IAAF,IAAY;AACtD;AACD;AACA;AACA;AACA;AACA;AACA;AACC,QAAMC,cAAc,GAAKC,QAAF,IAAgB;AACtC,QAAKH,MAAM,CAACI,QAAP,CAAiBD,QAAQ,CAACE,IAAT,EAAjB,CAAL,EAA0C;AACzC,aAAOF,QAAP;AACA,KAHqC,CAKtC;;;AACA;AACC,UAAK,CAAEA,QAAQ,CAACG,KAAT,CAAgBT,WAAhB,CAAP,EAAuC;AACtC,eAAOE,SAAS,GAAG,GAAZ,GAAkBI,QAAzB;AACA;AACD,KAVqC,CAYtC;;AACA,WAAOA,QAAQ,CAACI,OAAT,CAAkB,oBAAlB,EAAwCR,SAAxC,CAAP;AACA,GAdD;;AAgBA,MAAKE,IAAI,CAACO,IAAL,KAAc,MAAnB,EAA4B;AAC3B,WAAO,EACN,GAAGP,IADG;AAENQ,MAAAA,SAAS,EAAER,IAAI,CAACQ,SAAL,CAAeC,GAAf,CAAoBR,cAApB;AAFL,KAAP;AAIA;;AAED,SAAOD,IAAP;AACA,CAhCD;;AAkCA,eAAeH,IAAf","sourcesContent":["/**\n * @constant string IS_ROOT_TAG Regex to check if the selector is a root tag selector.\n */\nconst IS_ROOT_TAG = /^(body|html|:root).*$/;\n\n/**\n * Creates a callback to modify selectors so they only apply within a certain\n * namespace.\n *\n * @param {string}   namespace Namespace to prefix selectors with.\n * @param {string[]} ignore    Selectors to not prefix.\n *\n * @return {(node: Object) => Object} Callback to wrap selectors.\n */\nconst wrap = ( namespace, ignore = [] ) => ( node ) => {\n\t/**\n\t * Updates selector if necessary.\n\t *\n\t * @param {string} selector Selector to modify.\n\t *\n\t * @return {string} Updated selector.\n\t */\n\tconst updateSelector = ( selector ) => {\n\t\tif ( ignore.includes( selector.trim() ) ) {\n\t\t\treturn selector;\n\t\t}\n\n\t\t// Anything other than a root tag is always prefixed.\n\t\t{\n\t\t\tif ( ! selector.match( IS_ROOT_TAG ) ) {\n\t\t\t\treturn namespace + ' ' + selector;\n\t\t\t}\n\t\t}\n\n\t\t// HTML and Body elements cannot be contained within our container so lets extract their styles.\n\t\treturn selector.replace( /^(body|html|:root)/, namespace );\n\t};\n\n\tif ( node.type === 'rule' ) {\n\t\treturn {\n\t\t\t...node,\n\t\t\tselectors: node.selectors.map( updateSelector ),\n\t\t};\n\t}\n\n\treturn node;\n};\n\nexport default wrap;\n"]}

package/build-style/default-editor-styles-rtl.css

@@ -0,0 +1,114 @@
+/**
+ * Colors
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * 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.
+ */
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Shadows.
+ */
+/**
+ * Editor widths.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+:root {
+  --wp-admin-theme-color: #007cba;
+  --wp-admin-theme-color--rgb: 0, 124, 186;
+  --wp-admin-theme-color-darker-10: #006ba1;
+  --wp-admin-theme-color-darker-10--rgb: 0, 107, 161;
+  --wp-admin-theme-color-darker-20: #005a87;
+  --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
+  --wp-admin-border-width-focus: 2px;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  :root {
+    --wp-admin-border-width-focus: 1.5px;
+  }
+}
+
+/**
+* Default editor styles.
+*
+* These styles are shown if a theme does not register its own editor style,
+* a theme.json file, or has toggled off "Use theme styles" in preferences.
+*/
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 18px;
+  line-height: 1.5;
+  --wp--style--block-gap: 2em;
+}
+
+p {
+  line-height: 1.8;
+}
+
+.editor-post-title__block {
+  margin-top: 2em;
+  margin-bottom: 1em;
+  font-size: 2.5em;
+  font-weight: 800;
+}

package/build-style/default-editor-styles.css

@@ -0,0 +1,114 @@
+/**
+ * Colors
+ */
+/**
+ * Breakpoints & Media Queries
+ */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * 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.
+ */
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Shadows.
+ */
+/**
+ * Editor widths.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
+/**
+ * Breakpoint mixins
+ */
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+/**
+ * Focus styles.
+ */
+/**
+ * Applies editor left position to the selector passed as argument
+ */
+/**
+ * Styles that are reused verbatim in a few places
+ */
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+/**
+ * Reset default styles for JavaScript UI based pages.
+ * This is a WP-admin agnostic reset
+ */
+/**
+ * Reset the WP Admin page styles for Gutenberg-like pages.
+ */
+:root {
+  --wp-admin-theme-color: #007cba;
+  --wp-admin-theme-color--rgb: 0, 124, 186;
+  --wp-admin-theme-color-darker-10: #006ba1;
+  --wp-admin-theme-color-darker-10--rgb: 0, 107, 161;
+  --wp-admin-theme-color-darker-20: #005a87;
+  --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
+  --wp-admin-border-width-focus: 2px;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  :root {
+    --wp-admin-border-width-focus: 1.5px;
+  }
+}
+
+/**
+* Default editor styles.
+*
+* These styles are shown if a theme does not register its own editor style,
+* a theme.json file, or has toggled off "Use theme styles" in preferences.
+*/
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 18px;
+  line-height: 1.5;
+  --wp--style--block-gap: 2em;
+}
+
+p {
+  line-height: 1.8;
+}
+
+.editor-post-title__block {
+  margin-top: 2em;
+  margin-bottom: 1em;
+  font-size: 2.5em;
+  font-weight: 800;
+}