@wordpress/block-library 7.0.1 → 7.1.0-next.e230fbab09.0

package/build-module/comment-template/hooks.js

@@ -0,0 +1,156 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { addQueryArgs } from '@wordpress/url';
+import apiFetch from '@wordpress/api-fetch';
+/**
+ * Return an object with the query args needed to fetch the default page of
+ * comments.
+ *
+ * @param {Object}  props             Hook props.
+ * @param {number}  props.postId      ID of the post that contains the comments.
+ * @param {number}  props.perPage     The number of comments included per page.
+ * @param {string}  props.defaultPage Page shown by default (newest/oldest).
+ * @param {boolean} props.inherit     Overwrite props with values from WP
+ *                                    discussion settings.
+ *
+ * @return {Object} Query args to retrieve the comments.
+ */
+
+export const useCommentQueryArgs = _ref => {
+  let {
+    postId,
+    perPage,
+    defaultPage,
+    inherit
+  } = _ref;
+  // Initialize the query args that are not going to change.
+  const queryArgs = {
+    status: 'approve',
+    order: 'asc',
+    context: 'embed',
+    parent: 0,
+    _embed: 'children'
+  }; // Get the Discussion settings that may be needed to query the comments.
+
+  const {
+    commentsPerPage,
+    defaultCommentsPage
+  } = useSelect(select => {
+    const {
+      getSettings
+    } = select(blockEditorStore);
+    const {
+      __experimentalDiscussionSettings
+    } = getSettings();
+    return __experimentalDiscussionSettings;
+  }); // Overwrite the received attributes if `inherit` is true.
+
+  if (inherit) {
+    perPage = commentsPerPage;
+    defaultPage = defaultCommentsPage;
+  } // If a block props is not set, use the settings value to generate the
+  // appropriate query arg.
+
+
+  perPage = perPage || commentsPerPage;
+  defaultPage = defaultPage || defaultCommentsPage; // Get the number of the default page.
+
+  const page = useDefaultPageIndex({
+    defaultPage,
+    postId,
+    perPage,
+    queryArgs
+  }); // Merge, memoize and return all query arguments, unless the default page's
+  // number is not known yet.
+
+  return useMemo(() => {
+    return page ? { ...queryArgs,
+      post: postId,
+      per_page: perPage,
+      page
+    } : null;
+  }, [postId, perPage, page]);
+};
+/**
+ * Return the index of the default page, depending on whether `defaultPage` is
+ * `newest` or `oldest`. In the first case, the only way to know the page's
+ * index is by using the `X-WP-TotalPages` header, which forces to make an
+ * additional request.
+ *
+ * @param {Object} props             Hook props.
+ * @param {string} props.defaultPage Page shown by default (newest/oldest).
+ * @param {number} props.postId      ID of the post that contains the comments.
+ * @param {number} props.perPage     The number of comments included per page.
+ * @param {Object} props.queryArgs   Other query args.
+ *
+ * @return {number} Index of the default comments page.
+ */
+
+const useDefaultPageIndex = _ref2 => {
+  let {
+    defaultPage,
+    postId,
+    perPage,
+    queryArgs
+  } = _ref2;
+  // Store the default page indices.
+  const [defaultPages, setDefaultPages] = useState({});
+  const key = `${postId}_${perPage}`;
+  const page = defaultPages[key] || 0;
+  useEffect(() => {
+    // Do nothing if the page is already known or not the newest page.
+    if (page || defaultPage !== 'newest') {
+      return;
+    } // We need to fetch comments to know the index. Use HEAD and limit
+    // fields just to ID, to make this call as light as possible.
+
+
+    apiFetch({
+      path: addQueryArgs('/wp/v2/comments', { ...queryArgs,
+        post: postId,
+        per_page: perPage,
+        _fields: 'id'
+      }),
+      method: 'HEAD',
+      parse: false
+    }).then(res => {
+      setDefaultPages({ ...defaultPages,
+        [key]: parseInt(res.headers.get('X-WP-TotalPages'))
+      });
+    });
+  }, [defaultPage, postId, perPage, setDefaultPages]); // The oldest one is always the first one.
+
+  return defaultPage === 'newest' ? page : 1;
+};
+/**
+ * Generate a tree structure of comment IDs from a list of comment entities. The
+ * children of each comment are obtained from `_embedded`.
+ *
+ * @typedef {{ commentId: number, children: CommentNode }} CommentNode
+ *
+ * @param {Object[]} topLevelComments List of comment entities.
+ * @return {{ commentTree: CommentNode[]}} Tree of comment IDs.
+ */
+
+
+export const useCommentTree = topLevelComments => {
+  const commentTree = useMemo(() => topLevelComments === null || topLevelComments === void 0 ? void 0 : topLevelComments.map(_ref3 => {
+    let {
+      id,
+      _embedded
+    } = _ref3;
+    const [children] = (_embedded === null || _embedded === void 0 ? void 0 : _embedded.children) || [[]];
+    return {
+      commentId: id,
+      children: children.map(child => ({
+        commentId: child.id
+      }))
+    };
+  }), [topLevelComments]);
+  return commentTree;
+};
+//# sourceMappingURL=hooks.js.map

package/build-module/comment-template/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/comment-template/hooks.js"],"names":["useState","useEffect","useMemo","useSelect","store","blockEditorStore","addQueryArgs","apiFetch","useCommentQueryArgs","postId","perPage","defaultPage","inherit","queryArgs","status","order","context","parent","_embed","commentsPerPage","defaultCommentsPage","select","getSettings","__experimentalDiscussionSettings","page","useDefaultPageIndex","post","per_page","defaultPages","setDefaultPages","key","path","_fields","method","parse","then","res","parseInt","headers","get","useCommentTree","topLevelComments","commentTree","map","id","_embedded","children","commentId","child"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { addQueryArgs } from '@wordpress/url';\nimport apiFetch from '@wordpress/api-fetch';\n\n/**\n * Return an object with the query args needed to fetch the default page of\n * comments.\n *\n * @param {Object}  props             Hook props.\n * @param {number}  props.postId      ID of the post that contains the comments.\n * @param {number}  props.perPage     The number of comments included per page.\n * @param {string}  props.defaultPage Page shown by default (newest/oldest).\n * @param {boolean} props.inherit     Overwrite props with values from WP\n *                                    discussion settings.\n *\n * @return {Object} Query args to retrieve the comments.\n */\nexport const useCommentQueryArgs = ( {\n\tpostId,\n\tperPage,\n\tdefaultPage,\n\tinherit,\n} ) => {\n\t// Initialize the query args that are not going to change.\n\tconst queryArgs = {\n\t\tstatus: 'approve',\n\t\torder: 'asc',\n\t\tcontext: 'embed',\n\t\tparent: 0,\n\t\t_embed: 'children',\n\t};\n\n\t// Get the Discussion settings that may be needed to query the comments.\n\tconst { commentsPerPage, defaultCommentsPage } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst { __experimentalDiscussionSettings } = getSettings();\n\t\treturn __experimentalDiscussionSettings;\n\t} );\n\n\t// Overwrite the received attributes if `inherit` is true.\n\tif ( inherit ) {\n\t\tperPage = commentsPerPage;\n\t\tdefaultPage = defaultCommentsPage;\n\t}\n\n\t// If a block props is not set, use the settings value to generate the\n\t// appropriate query arg.\n\tperPage = perPage || commentsPerPage;\n\tdefaultPage = defaultPage || defaultCommentsPage;\n\n\t// Get the number of the default page.\n\tconst page = useDefaultPageIndex( {\n\t\tdefaultPage,\n\t\tpostId,\n\t\tperPage,\n\t\tqueryArgs,\n\t} );\n\n\t// Merge, memoize and return all query arguments, unless the default page's\n\t// number is not known yet.\n\treturn useMemo( () => {\n\t\treturn page\n\t\t\t? {\n\t\t\t\t\t...queryArgs,\n\t\t\t\t\tpost: postId,\n\t\t\t\t\tper_page: perPage,\n\t\t\t\t\tpage,\n\t\t\t  }\n\t\t\t: null;\n\t}, [ postId, perPage, page ] );\n};\n\n/**\n * Return the index of the default page, depending on whether `defaultPage` is\n * `newest` or `oldest`. In the first case, the only way to know the page's\n * index is by using the `X-WP-TotalPages` header, which forces to make an\n * additional request.\n *\n * @param {Object} props             Hook props.\n * @param {string} props.defaultPage Page shown by default (newest/oldest).\n * @param {number} props.postId      ID of the post that contains the comments.\n * @param {number} props.perPage     The number of comments included per page.\n * @param {Object} props.queryArgs   Other query args.\n *\n * @return {number} Index of the default comments page.\n */\nconst useDefaultPageIndex = ( { defaultPage, postId, perPage, queryArgs } ) => {\n\t// Store the default page indices.\n\tconst [ defaultPages, setDefaultPages ] = useState( {} );\n\tconst key = `${ postId }_${ perPage }`;\n\tconst page = defaultPages[ key ] || 0;\n\n\tuseEffect( () => {\n\t\t// Do nothing if the page is already known or not the newest page.\n\t\tif ( page || defaultPage !== 'newest' ) {\n\t\t\treturn;\n\t\t}\n\t\t// We need to fetch comments to know the index. Use HEAD and limit\n\t\t// fields just to ID, to make this call as light as possible.\n\t\tapiFetch( {\n\t\t\tpath: addQueryArgs( '/wp/v2/comments', {\n\t\t\t\t...queryArgs,\n\t\t\t\tpost: postId,\n\t\t\t\tper_page: perPage,\n\t\t\t\t_fields: 'id',\n\t\t\t} ),\n\t\t\tmethod: 'HEAD',\n\t\t\tparse: false,\n\t\t} ).then( ( res ) => {\n\t\t\tsetDefaultPages( {\n\t\t\t\t...defaultPages,\n\t\t\t\t[ key ]: parseInt( res.headers.get( 'X-WP-TotalPages' ) ),\n\t\t\t} );\n\t\t} );\n\t}, [ defaultPage, postId, perPage, setDefaultPages ] );\n\n\t// The oldest one is always the first one.\n\treturn defaultPage === 'newest' ? page : 1;\n};\n\n/**\n * Generate a tree structure of comment IDs from a list of comment entities. The\n * children of each comment are obtained from `_embedded`.\n *\n * @typedef {{ commentId: number, children: CommentNode }} CommentNode\n *\n * @param {Object[]} topLevelComments List of comment entities.\n * @return {{ commentTree: CommentNode[]}} Tree of comment IDs.\n */\nexport const useCommentTree = ( topLevelComments ) => {\n\tconst commentTree = useMemo(\n\t\t() =>\n\t\t\ttopLevelComments?.map( ( { id, _embedded } ) => {\n\t\t\t\tconst [ children ] = _embedded?.children || [ [] ];\n\t\t\t\treturn {\n\t\t\t\t\tcommentId: id,\n\t\t\t\t\tchildren: children.map( ( child ) => ( {\n\t\t\t\t\t\tcommentId: child.id,\n\t\t\t\t\t} ) ),\n\t\t\t\t};\n\t\t\t} ),\n\t\t[ topLevelComments ]\n\t);\n\n\treturn commentTree;\n};\n"]}

package/build-module/comment-template/index.js

@@ -15,7 +15,7 @@ const metadata = {
   parent: ["core/comments-query-loop"],
   description: "Contains the block elements used to render a comment, like the title, date, author, avatar and more.",
   textdomain: "default",
-  usesContext: ["comments/perPage", "postId", "comments/order"],
+  usesContext: ["comments/defaultPage", "comments/inherit", "comments/order", "comments/perPage", "postId"],
   supports: {
     reusable: false,
     html: false,

package/build-module/comment-template/util.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/comment-template/util.js"],"names":["convertToTree","data","table","forEach","item","id","commentId","children","tree","parent","push"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,aAAa,GAAKC,IAAF,IAAY;AACxC,QAAMC,KAAK,GAAG,EAAd;AACA,MAAK,CAAED,IAAP,EAAc,OAAO,EAAP,CAF0B,CAIxC;;AACAA,EAAAA,IAAI,CAACE,OAAL,CAAgBC,IAAF,IAAY;AACzBF,IAAAA,KAAK,CAAEE,IAAI,CAACC,EAAP,CAAL,GAAmB;AAAEC,MAAAA,SAAS,EAAEF,IAAI,CAACC,EAAlB;AAAsBE,MAAAA,QAAQ,EAAE;AAAhC,KAAnB;AACA,GAFD;AAIA,QAAMC,IAAI,GAAG,EAAb,CATwC,CAWxC;;AACAP,EAAAA,IAAI,CAACE,OAAL,CAAgBC,IAAF,IAAY;AACzB,QAAKA,IAAI,CAACK,MAAV,EAAmB;AAAA;;AAClB;AACA;AACA;AACA,4BAAAP,KAAK,CAAEE,IAAI,CAACK,MAAP,CAAL,0EAAsBF,QAAtB,CAA+BG,IAA/B,CAAqCR,KAAK,CAAEE,IAAI,CAACC,EAAP,CAA1C;AACA,KALD,MAKO;AACN;AACA;AACA;AACAG,MAAAA,IAAI,CAACE,IAAL,CAAWR,KAAK,CAAEE,IAAI,CAACC,EAAP,CAAhB;AACA;AACD,GAZD;AAaA,SAAOG,IAAP;AACA,CA1BM","sourcesContent":["/**\n *\n * This function converts a flat list of comment objects with a `parent` property\n * to a nested list of comment objects with a `children` property. The `children`\n * property is itself a list of comment objects.\n *\n * @example\n * ```\n * const comments = [\n * \t{ id: 1, parent: 0 },\n * \t{ id: 2, parent: 1 },\n * \t{ id: 3, parent: 2 },\n * \t{ id: 4, parent: 1 },\n * ];\n * expect( convertToTree( comments ) ).toEqual( [\n * \t{\n * \t\tcommentId: 1,\n * \t\tchildren: [\n * \t\t\t{ commentId: 2, children: [ { commentId: 3, children: [] } ] },\n * \t\t\t{ commentId: 4, children: [] },\n * \t\t],\n * \t},\n * ] );\n * ```\n * @typedef {{id: number, parent: number}} Comment\n * @param {Comment[]} data - List of comment objects.\n *\n * @return {Object[]} Nested list of comment objects with a `children` property.\n */\nexport const convertToTree = ( data ) => {\n\tconst table = {};\n\tif ( ! data ) return [];\n\n\t// First create a hash table of { [id]: { ...comment, children: [] }}\n\tdata.forEach( ( item ) => {\n\t\ttable[ item.id ] = { commentId: item.id, children: [] };\n\t} );\n\n\tconst tree = [];\n\n\t// Iterate over the original comments again\n\tdata.forEach( ( item ) => {\n\t\tif ( item.parent ) {\n\t\t\t// If the comment has a \"parent\", then find that parent in the table that\n\t\t\t// we have created above and push the current comment to the array of its\n\t\t\t// children.\n\t\t\ttable[ item.parent ]?.children.push( table[ item.id ] );\n\t\t} else {\n\t\t\t// Otherwise, if the comment has no parent (also works if parent is 0)\n\t\t\t// that means that it's a top-level comment so we can find it in the table\n\t\t\t// and push it to the final tree.\n\t\t\ttree.push( table[ item.id ] );\n\t\t}\n\t} );\n\treturn tree;\n};\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/comment-template/util.js"],"names":["convertToTree","data","table","forEach","item","id","commentId","children","tree","parent","push"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,aAAa,GAAKC,IAAF,IAAY;AACxC,QAAMC,KAAK,GAAG,EAAd;AAEA,MAAK,CAAED,IAAP,EAAc,OAAO,EAAP,CAH0B,CAKxC;;AACAA,EAAAA,IAAI,CAACE,OAAL,CAAgBC,IAAF,IAAY;AACzBF,IAAAA,KAAK,CAAEE,IAAI,CAACC,EAAP,CAAL,GAAmB;AAAEC,MAAAA,SAAS,EAAEF,IAAI,CAACC,EAAlB;AAAsBE,MAAAA,QAAQ,EAAE;AAAhC,KAAnB;AACA,GAFD;AAIA,QAAMC,IAAI,GAAG,EAAb,CAVwC,CAYxC;;AACAP,EAAAA,IAAI,CAACE,OAAL,CAAgBC,IAAF,IAAY;AACzB,QAAKA,IAAI,CAACK,MAAV,EAAmB;AAAA;;AAClB;AACA;AACA;AACA,4BAAAP,KAAK,CAAEE,IAAI,CAACK,MAAP,CAAL,0EAAsBF,QAAtB,CAA+BG,IAA/B,CAAqCR,KAAK,CAAEE,IAAI,CAACC,EAAP,CAA1C;AACA,KALD,MAKO;AACN;AACA;AACA;AACAG,MAAAA,IAAI,CAACE,IAAL,CAAWR,KAAK,CAAEE,IAAI,CAACC,EAAP,CAAhB;AACA;AACD,GAZD;AAaA,SAAOG,IAAP;AACA,CA3BM","sourcesContent":["/**\n *\n * This function converts a flat list of comment objects with a `parent` property\n * to a nested list of comment objects with a `children` property. The `children`\n * property is itself a list of comment objects.\n *\n * @example\n * ```\n * const comments = [\n * \t{ id: 1, parent: 0 },\n * \t{ id: 2, parent: 1 },\n * \t{ id: 3, parent: 2 },\n * \t{ id: 4, parent: 1 },\n * ];\n * expect( convertToTree( comments ) ).toEqual( [\n * \t{\n * \t\tcommentId: 1,\n * \t\tchildren: [\n * \t\t\t{ commentId: 2, children: [ { commentId: 3, children: [] } ] },\n * \t\t\t{ commentId: 4, children: [] },\n * \t\t],\n * \t},\n * ] );\n * ```\n * @typedef {{id: number, parent: number}} Comment\n * @param {Comment[]} data - List of comment objects.\n *\n * @return {Object[]} Nested list of comment objects with a `children` property.\n */\nexport const convertToTree = ( data ) => {\n\tconst table = {};\n\n\tif ( ! data ) return [];\n\n\t// First create a hash table of { [id]: { ...comment, children: [] }}\n\tdata.forEach( ( item ) => {\n\t\ttable[ item.id ] = { commentId: item.id, children: [] };\n\t} );\n\n\tconst tree = [];\n\n\t// Iterate over the original comments again\n\tdata.forEach( ( item ) => {\n\t\tif ( item.parent ) {\n\t\t\t// If the comment has a \"parent\", then find that parent in the table that\n\t\t\t// we have created above and push the current comment to the array of its\n\t\t\t// children.\n\t\t\ttable[ item.parent ]?.children.push( table[ item.id ] );\n\t\t} else {\n\t\t\t// Otherwise, if the comment has no parent (also works if parent is 0)\n\t\t\t// that means that it's a top-level comment so we can find it in the table\n\t\t\t// and push it to the final tree.\n\t\t\ttree.push( table[ item.id ] );\n\t\t}\n\t} );\n\treturn tree;\n};\n"]}

package/build-module/comments-pagination-next/index.js

@@ -20,7 +20,7 @@ const metadata = {
       type: "string"
     }
   },
-  usesContext: ["postId", "comments/perPage", "comments/paginationArrow"],
+  usesContext: ["postId", "comments/perPage", "comments/order", "comments/inherit", "comments/defaultPage", "comments/paginationArrow"],
   supports: {
     reusable: false,
     html: false,

package/build-module/comments-pagination-numbers/index.js

@@ -15,7 +15,7 @@ const metadata = {
   parent: ["core/comments-pagination"],
   description: "Displays a list of page numbers for comments pagination.",
   textdomain: "default",
-  usesContext: ["comments/perPage", "postId", "comments/order"],
+  usesContext: ["postId", "comments/perPage", "comments/order", "comments/inherit", "comments/defaultPage"],
   supports: {
     reusable: false,
     html: false

package/build-module/comments-query-loop/edit/comments-inspector-controls.js

@@ -13,19 +13,23 @@ const orderOptions = [{
   label: __('Oldest to newest'),
   value: 'asc'
 }];
+const defaultPageOptions = [{
+  label: __('Newest'),
+  value: 'newest'
+}, {
+  label: __('Oldest'),
+  value: 'oldest'
+}];
 export default function CommentsInspectorControls(_ref) {
   let {
     attributes: {
       TagName,
       perPage,
       order,
-      inherit
+      inherit,
+      defaultPage
     },
-    setAttributes,
-    defaultSettings: {
-      defaultPerPage,
-      defaultOrder
-    }
+    setAttributes
   } = _ref;
   return createElement(InspectorControls, null, createElement(PanelBody, {
     title: __('Settings')
@@ -34,9 +38,7 @@ export default function CommentsInspectorControls(_ref) {
     checked: inherit,
     onChange: () => {
       setAttributes({
-        inherit: !inherit,
-        order: inherit ? defaultOrder : null,
-        perPage: inherit ? defaultPerPage : null
+        inherit: !inherit
       });
     }
   }), !inherit && createElement(Fragment, null, createElement(SelectControl, {
@@ -48,6 +50,15 @@ export default function CommentsInspectorControls(_ref) {
         order: value
       });
     }
+  }), createElement(SelectControl, {
+    label: __('Default page'),
+    value: defaultPage,
+    options: defaultPageOptions,
+    onChange: value => {
+      setAttributes({
+        defaultPage: value
+      });
+    }
   }), createElement(NumberControl, {
     __unstableInputWidth: "60px",
     label: __('Items per Page'),

package/build-module/comments-query-loop/edit/comments-inspector-controls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/comments-query-loop/edit/comments-inspector-controls.js"],"names":["PanelBody","SelectControl","ToggleControl","__experimentalNumberControl","NumberControl","__","InspectorControls","orderOptions","label","value","CommentsInspectorControls","attributes","TagName","perPage","order","inherit","setAttributes","defaultSettings","defaultPerPage","defaultOrder","num","parseInt","isNaN","tagName"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,SADD,EAECC,aAFD,EAGCC,aAHD,EAICC,2BAA2B,IAAIC,aAJhC,QAKO,uBALP;AAMA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,iBAAT,QAAkC,yBAAlC;AAEA,MAAMC,YAAY,GAAG,CACpB;AACCC,EAAAA,KAAK,EAAEH,EAAE,CAAE,kBAAF,CADV;AAECI,EAAAA,KAAK,EAAE;AAFR,CADoB,EAKpB;AACCD,EAAAA,KAAK,EAAEH,EAAE,CAAE,kBAAF,CADV;AAECI,EAAAA,KAAK,EAAE;AAFR,CALoB,CAArB;AAWA,eAAe,SAASC,yBAAT,OAIX;AAAA,MAJ+C;AAClDC,IAAAA,UAAU,EAAE;AAAEC,MAAAA,OAAF;AAAWC,MAAAA,OAAX;AAAoBC,MAAAA,KAApB;AAA2BC,MAAAA;AAA3B,KADsC;AAElDC,IAAAA,aAFkD;AAGlDC,IAAAA,eAAe,EAAE;AAAEC,MAAAA,cAAF;AAAkBC,MAAAA;AAAlB;AAHiC,GAI/C;AACH,SACC,cAAC,iBAAD,QACC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAGd,EAAE,CAAE,UAAF;AAArB,KACC,cAAC,aAAD;AACC,IAAA,KAAK,EAAGA,EAAE,CAAE,kCAAF,CADX;AAEC,IAAA,OAAO,EAAGU,OAFX;AAGC,IAAA,QAAQ,EAAG,MAAM;AAChBC,MAAAA,aAAa,CAAE;AACdD,QAAAA,OAAO,EAAE,CAAEA,OADG;AAEdD,QAAAA,KAAK,EAAEC,OAAO,GAAGI,YAAH,GAAkB,IAFlB;AAGdN,QAAAA,OAAO,EAAEE,OAAO,GAAGG,cAAH,GAAoB;AAHtB,OAAF,CAAb;AAKA;AATF,IADD,EAYG,CAAEH,OAAF,IACD,8BACC,cAAC,aAAD;AACC,IAAA,KAAK,EAAGV,EAAE,CAAE,UAAF,CADX;AAEC,IAAA,KAAK,EAAGS,KAFT;AAGC,IAAA,OAAO,EAAGP,YAHX;AAIC,IAAA,QAAQ,EAAKE,KAAF,IAAa;AACvBO,MAAAA,aAAa,CAAE;AACdF,QAAAA,KAAK,EAAEL;AADO,OAAF,CAAb;AAGA;AARF,IADD,EAWC,cAAC,aAAD;AACC,IAAA,oBAAoB,EAAC,MADtB;AAEC,IAAA,KAAK,EAAGJ,EAAE,CAAE,gBAAF,CAFX;AAGC,IAAA,aAAa,EAAC,MAHf;AAIC,IAAA,GAAG,EAAG,CAJP;AAKC,IAAA,GAAG,EAAG,GALP;AAMC,IAAA,QAAQ,EAAKI,KAAF,IAAa;AACvB,YAAMW,GAAG,GAAGC,QAAQ,CAAEZ,KAAF,EAAS,EAAT,CAApB;;AACA,UAAKa,KAAK,CAAEF,GAAF,CAAL,IAAgBA,GAAG,GAAG,CAAtB,IAA2BA,GAAG,GAAG,GAAtC,EAA4C;AAC3C;AACA;;AACDJ,MAAAA,aAAa,CAAE;AACdH,QAAAA,OAAO,EAAEO;AADK,OAAF,CAAb;AAGA,KAdF;AAeC,IAAA,IAAI,EAAC,GAfN;AAgBC,IAAA,KAAK,EAAGP,OAhBT;AAiBC,IAAA,aAAa,EAAG;AAjBjB,IAXD,CAbF,CADD,EA+CC,cAAC,iBAAD;AAAmB,IAAA,mBAAmB,EAAC;AAAvC,KACC,cAAC,aAAD;AACC,IAAA,KAAK,EAAGR,EAAE,CAAE,cAAF,CADX;AAEC,IAAA,OAAO,EAAG,CACT;AAAEG,MAAAA,KAAK,EAAEH,EAAE,CAAE,iBAAF,CAAX;AAAkCI,MAAAA,KAAK,EAAE;AAAzC,KADS,EAET;AAAED,MAAAA,KAAK,EAAE,WAAT;AAAsBC,MAAAA,KAAK,EAAE;AAA7B,KAFS,EAGT;AAAED,MAAAA,KAAK,EAAE,SAAT;AAAoBC,MAAAA,KAAK,EAAE;AAA3B,KAHS,CAFX;AAOC,IAAA,KAAK,EAAGG,OAPT;AAQC,IAAA,QAAQ,EAAKH,KAAF,IACVO,aAAa,CAAE;AAAEO,MAAAA,OAAO,EAAEd;AAAX,KAAF;AATf,IADD,CA/CD,CADD;AAgEA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tPanelBody,\n\tSelectControl,\n\tToggleControl,\n\t__experimentalNumberControl as NumberControl,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { InspectorControls } from '@wordpress/block-editor';\n\nconst orderOptions = [\n\t{\n\t\tlabel: __( 'Newest to oldest' ),\n\t\tvalue: 'desc',\n\t},\n\t{\n\t\tlabel: __( 'Oldest to newest' ),\n\t\tvalue: 'asc',\n\t},\n];\n\nexport default function CommentsInspectorControls( {\n\tattributes: { TagName, perPage, order, inherit },\n\tsetAttributes,\n\tdefaultSettings: { defaultPerPage, defaultOrder },\n} ) {\n\treturn (\n\t\t<InspectorControls>\n\t\t\t<PanelBody title={ __( 'Settings' ) }>\n\t\t\t\t<ToggleControl\n\t\t\t\t\tlabel={ __( 'Inherit from Discussion Settings' ) }\n\t\t\t\t\tchecked={ inherit }\n\t\t\t\t\tonChange={ () => {\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\tinherit: ! inherit,\n\t\t\t\t\t\t\torder: inherit ? defaultOrder : null,\n\t\t\t\t\t\t\tperPage: inherit ? defaultPerPage : null,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t\t{ ! inherit && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\tlabel={ __( 'Order by' ) }\n\t\t\t\t\t\t\tvalue={ order }\n\t\t\t\t\t\t\toptions={ orderOptions }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\torder: value,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<NumberControl\n\t\t\t\t\t\t\t__unstableInputWidth=\"60px\"\n\t\t\t\t\t\t\tlabel={ __( 'Items per Page' ) }\n\t\t\t\t\t\t\tlabelPosition=\"edge\"\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tconst num = parseInt( value, 10 );\n\t\t\t\t\t\t\t\tif ( isNaN( num ) || num < 1 || num > 100 ) {\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tperPage: num,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tstep=\"1\"\n\t\t\t\t\t\t\tvalue={ perPage }\n\t\t\t\t\t\t\tisDragEnabled={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</PanelBody>\n\t\t\t<InspectorControls __experimentalGroup=\"advanced\">\n\t\t\t\t<SelectControl\n\t\t\t\t\tlabel={ __( 'HTML element' ) }\n\t\t\t\t\toptions={ [\n\t\t\t\t\t\t{ label: __( 'Default (<div>)' ), value: 'div' },\n\t\t\t\t\t\t{ label: '<section>', value: 'section' },\n\t\t\t\t\t\t{ label: '<aside>', value: 'aside' },\n\t\t\t\t\t] }\n\t\t\t\t\tvalue={ TagName }\n\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\tsetAttributes( { tagName: value } )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</InspectorControls>\n\t\t</InspectorControls>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/comments-query-loop/edit/comments-inspector-controls.js"],"names":["PanelBody","SelectControl","ToggleControl","__experimentalNumberControl","NumberControl","__","InspectorControls","orderOptions","label","value","defaultPageOptions","CommentsInspectorControls","attributes","TagName","perPage","order","inherit","defaultPage","setAttributes","num","parseInt","isNaN","tagName"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tPanelBody,\n\tSelectControl,\n\tToggleControl,\n\t__experimentalNumberControl as NumberControl,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { InspectorControls } from '@wordpress/block-editor';\n\nconst orderOptions = [\n\t{\n\t\tlabel: __( 'Newest to oldest' ),\n\t\tvalue: 'desc',\n\t},\n\t{\n\t\tlabel: __( 'Oldest to newest' ),\n\t\tvalue: 'asc',\n\t},\n];\n\nconst defaultPageOptions = [\n\t{\n\t\tlabel: __( 'Newest' ),\n\t\tvalue: 'newest',\n\t},\n\t{\n\t\tlabel: __( 'Oldest' ),\n\t\tvalue: 'oldest',\n\t},\n];\n\nexport default function CommentsInspectorControls( {\n\tattributes: { TagName, perPage, order, inherit, defaultPage },\n\tsetAttributes,\n} ) {\n\treturn (\n\t\t<InspectorControls>\n\t\t\t<PanelBody title={ __( 'Settings' ) }>\n\t\t\t\t<ToggleControl\n\t\t\t\t\tlabel={ __( 'Inherit from Discussion Settings' ) }\n\t\t\t\t\tchecked={ inherit }\n\t\t\t\t\tonChange={ () => {\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\tinherit: ! inherit,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t\t{ ! inherit && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\tlabel={ __( 'Order by' ) }\n\t\t\t\t\t\t\tvalue={ order }\n\t\t\t\t\t\t\toptions={ orderOptions }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\torder: value,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\tlabel={ __( 'Default page' ) }\n\t\t\t\t\t\t\tvalue={ defaultPage }\n\t\t\t\t\t\t\toptions={ defaultPageOptions }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tdefaultPage: value,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<NumberControl\n\t\t\t\t\t\t\t__unstableInputWidth=\"60px\"\n\t\t\t\t\t\t\tlabel={ __( 'Items per Page' ) }\n\t\t\t\t\t\t\tlabelPosition=\"edge\"\n\t\t\t\t\t\t\tmin={ 1 }\n\t\t\t\t\t\t\tmax={ 100 }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tconst num = parseInt( value, 10 );\n\t\t\t\t\t\t\t\tif ( isNaN( num ) || num < 1 || num > 100 ) {\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tperPage: num,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tstep=\"1\"\n\t\t\t\t\t\t\tvalue={ perPage }\n\t\t\t\t\t\t\tisDragEnabled={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</PanelBody>\n\t\t\t<InspectorControls __experimentalGroup=\"advanced\">\n\t\t\t\t<SelectControl\n\t\t\t\t\tlabel={ __( 'HTML element' ) }\n\t\t\t\t\toptions={ [\n\t\t\t\t\t\t{ label: __( 'Default (<div>)' ), value: 'div' },\n\t\t\t\t\t\t{ label: '<section>', value: 'section' },\n\t\t\t\t\t\t{ label: '<aside>', value: 'aside' },\n\t\t\t\t\t] }\n\t\t\t\t\tvalue={ TagName }\n\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\tsetAttributes( { tagName: value } )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</InspectorControls>\n\t\t</InspectorControls>\n\t);\n}\n"]}

package/build-module/comments-query-loop/edit.js

@@ -3,13 +3,12 @@ import { createElement, Fragment } from "@wordpress/element";
 /**
  * WordPress dependencies
  */
-import { useBlockProps, useInnerBlocksProps, store as blockEditorStore } from '@wordpress/block-editor';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
 
 import CommentsInspectorControls from './edit/comments-inspector-controls';
-import { useSelect } from '@wordpress/data';
 const TEMPLATE = [['core/comment-template'], ['core/comments-pagination']];
 export default function CommentsQueryLoopEdit(_ref) {
   let {
@@ -23,25 +22,9 @@ export default function CommentsQueryLoopEdit(_ref) {
   const innerBlocksProps = useInnerBlocksProps(blockProps, {
     template: TEMPLATE
   });
-  const {
-    commentOrder,
-    commentsPerPage
-  } = useSelect(select => {
-    const {
-      getSettings
-    } = select(blockEditorStore);
-    const {
-      __experimentalDiscussionSettings
-    } = getSettings();
-    return __experimentalDiscussionSettings;
-  });
   return createElement(Fragment, null, createElement(CommentsInspectorControls, {
     attributes: attributes,
-    setAttributes: setAttributes,
-    defaultSettings: {
-      defaultOrder: commentOrder,
-      defaultPerPage: commentsPerPage
-    }
+    setAttributes: setAttributes
   }), createElement(TagName, innerBlocksProps));
 }
 //# sourceMappingURL=edit.js.map

package/build-module/comments-query-loop/edit.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/comments-query-loop/edit.js"],"names":["useBlockProps","useInnerBlocksProps","store","blockEditorStore","CommentsInspectorControls","useSelect","TEMPLATE","CommentsQueryLoopEdit","attributes","setAttributes","tagName","TagName","blockProps","innerBlocksProps","template","commentOrder","commentsPerPage","select","getSettings","__experimentalDiscussionSettings","defaultOrder","defaultPerPage"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,aADD,EAECC,mBAFD,EAGCC,KAAK,IAAIC,gBAHV,QAIO,yBAJP;AAMA;AACA;AACA;;AACA,OAAOC,yBAAP,MAAsC,oCAAtC;AACA,SAASC,SAAT,QAA0B,iBAA1B;AAEA,MAAMC,QAAQ,GAAG,CAChB,CAAE,uBAAF,CADgB,EAEhB,CAAE,0BAAF,CAFgB,CAAjB;AAKA,eAAe,SAASC,qBAAT,OAAgE;AAAA,MAAhC;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,GAAgC;AAC9E,QAAM;AAAEC,IAAAA,OAAO,EAAEC;AAAX,MAAuBH,UAA7B;AAEA,QAAMI,UAAU,GAAGZ,aAAa,EAAhC;AACA,QAAMa,gBAAgB,GAAGZ,mBAAmB,CAAEW,UAAF,EAAc;AACzDE,IAAAA,QAAQ,EAAER;AAD+C,GAAd,CAA5C;AAIA,QAAM;AAAES,IAAAA,YAAF;AAAgBC,IAAAA;AAAhB,MAAoCX,SAAS,CAAIY,MAAF,IAAc;AAClE,UAAM;AAAEC,MAAAA;AAAF,QAAkBD,MAAM,CAAEd,gBAAF,CAA9B;AACA,UAAM;AAAEgB,MAAAA;AAAF,QAAuCD,WAAW,EAAxD;AACA,WAAOC,gCAAP;AACA,GAJkD,CAAnD;AAMA,SACC,8BACC,cAAC,yBAAD;AACC,IAAA,UAAU,EAAGX,UADd;AAEC,IAAA,aAAa,EAAGC,aAFjB;AAGC,IAAA,eAAe,EAAG;AACjBW,MAAAA,YAAY,EAAEL,YADG;AAEjBM,MAAAA,cAAc,EAAEL;AAFC;AAHnB,IADD,EASC,cAAC,OAAD,EAAcH,gBAAd,CATD,CADD;AAaA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tuseBlockProps,\n\tuseInnerBlocksProps,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport CommentsInspectorControls from './edit/comments-inspector-controls';\nimport { useSelect } from '@wordpress/data';\n\nconst TEMPLATE = [\n\t[ 'core/comment-template' ],\n\t[ 'core/comments-pagination' ],\n];\n\nexport default function CommentsQueryLoopEdit( { attributes, setAttributes } ) {\n\tconst { tagName: TagName } = attributes;\n\n\tconst blockProps = useBlockProps();\n\tconst innerBlocksProps = useInnerBlocksProps( blockProps, {\n\t\ttemplate: TEMPLATE,\n\t} );\n\n\tconst { commentOrder, commentsPerPage } = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\tconst { __experimentalDiscussionSettings } = getSettings();\n\t\treturn __experimentalDiscussionSettings;\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t<CommentsInspectorControls\n\t\t\t\tattributes={ attributes }\n\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\tdefaultSettings={ {\n\t\t\t\t\tdefaultOrder: commentOrder,\n\t\t\t\t\tdefaultPerPage: commentsPerPage,\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<TagName { ...innerBlocksProps } />\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/comments-query-loop/edit.js"],"names":["useBlockProps","useInnerBlocksProps","CommentsInspectorControls","TEMPLATE","CommentsQueryLoopEdit","attributes","setAttributes","tagName","TagName","blockProps","innerBlocksProps","template"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,aAAT,EAAwBC,mBAAxB,QAAmD,yBAAnD;AAEA;AACA;AACA;;AACA,OAAOC,yBAAP,MAAsC,oCAAtC;AAEA,MAAMC,QAAQ,GAAG,CAChB,CAAE,uBAAF,CADgB,EAEhB,CAAE,0BAAF,CAFgB,CAAjB;AAKA,eAAe,SAASC,qBAAT,OAAgE;AAAA,MAAhC;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,GAAgC;AAC9E,QAAM;AAAEC,IAAAA,OAAO,EAAEC;AAAX,MAAuBH,UAA7B;AAEA,QAAMI,UAAU,GAAGT,aAAa,EAAhC;AACA,QAAMU,gBAAgB,GAAGT,mBAAmB,CAAEQ,UAAF,EAAc;AACzDE,IAAAA,QAAQ,EAAER;AAD+C,GAAd,CAA5C;AAIA,SACC,8BACC,cAAC,yBAAD;AACC,IAAA,UAAU,EAAGE,UADd;AAEC,IAAA,aAAa,EAAGC;AAFjB,IADD,EAKC,cAAC,OAAD,EAAcI,gBAAd,CALD,CADD;AASA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport CommentsInspectorControls from './edit/comments-inspector-controls';\n\nconst TEMPLATE = [\n\t[ 'core/comment-template' ],\n\t[ 'core/comments-pagination' ],\n];\n\nexport default function CommentsQueryLoopEdit( { attributes, setAttributes } ) {\n\tconst { tagName: TagName } = attributes;\n\n\tconst blockProps = useBlockProps();\n\tconst innerBlocksProps = useInnerBlocksProps( blockProps, {\n\t\ttemplate: TEMPLATE,\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t<CommentsInspectorControls\n\t\t\t\tattributes={ attributes }\n\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t/>\n\t\t\t<TagName { ...innerBlocksProps } />\n\t\t</>\n\t);\n}\n"]}

package/build-module/comments-query-loop/index.js

@@ -30,11 +30,16 @@ const metadata = {
     tagName: {
       type: "string",
       "default": "div"
+    },
+    defaultPage: {
+      type: "string",
+      "default": "oldest"
     }
   },
   providesContext: {
     "comments/perPage": "perPage",
     "comments/order": "order",
+    "comments/defaultPage": "defaultPage",
     "comments/inherit": "inherit"
   },
   supports: {

package/build-module/comments-query-loop/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/comments-query-loop/index.js"],"names":["postComments","icon","edit","save","name","metadata","settings"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,YAAY,IAAIC,IAAzB,QAAqC,kBAArC;AAEA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAOC,IAAP,MAAiB,QAAjB;AACA,OAAOC,IAAP,MAAiB,QAAjB;AAEA,MAAM;AAAEC,EAAAA;AAAF,IAAWC,QAAjB;AACA,SAASA,QAAT,EAAmBD,IAAnB;AAEA,OAAO,MAAME,QAAQ,GAAG;AACvBL,EAAAA,IADuB;AAEvBC,EAAAA,IAFuB;AAGvBC,EAAAA;AAHuB,CAAjB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { postComments as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport metadata from './block.json';\nimport edit from './edit';\nimport save from './save';\n\nconst { name } = metadata;\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\tedit,\n\tsave,\n};\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/comments-query-loop/index.js"],"names":["postComments","icon","edit","save","name","metadata","settings"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,YAAY,IAAIC,IAAzB,QAAqC,kBAArC;AAEA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAOC,IAAP,MAAiB,QAAjB;AACA,OAAOC,IAAP,MAAiB,QAAjB;AAEA,MAAM;AAAEC,EAAAA;AAAF,IAAWC,QAAjB;AACA,SAASA,QAAT,EAAmBD,IAAnB;AAEA,OAAO,MAAME,QAAQ,GAAG;AACvBL,EAAAA,IADuB;AAEvBC,EAAAA,IAFuB;AAGvBC,EAAAA;AAHuB,CAAjB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { postComments as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport metadata from './block.json';\nimport edit from './edit';\nimport save from './save';\n\nconst { name } = metadata;\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\tedit,\n\tsave,\n};\n"]}

package/build-module/cover/controls.native.js

@@ -56,11 +56,11 @@ function Controls(_ref) {
   const units = useCustomUnits({
     availableUnits: useSetting('spacing.units') || ['px', 'em', 'rem', 'vw', 'vh'],
     defaultValues: {
-      px: '430',
-      em: '20',
-      rem: '20',
-      vw: '20',
-      vh: '50'
+      px: 430,
+      em: 20,
+      rem: 20,
+      vw: 20,
+      vh: 50
     }
   });
   const onOpacityChange = useCallback(value => {

package/build-module/cover/controls.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/cover/controls.native.js"],"names":["View","Video","Image","Icon","IMAGE_DEFAULT_FOCAL_POINT","PanelBody","RangeControl","UnitControl","TextControl","BottomSheet","ToggleControl","__experimentalUseCustomUnits","useCustomUnits","plus","useState","useCallback","useRef","usePreferredColorSchemeStyle","useSetting","MediaUpload","__","styles","OverlayColorSettings","FocalPointSettingsButton","ALLOWED_MEDIA_TYPES","COVER_MIN_HEIGHT","COVER_MAX_HEIGHT","COVER_DEFAULT_HEIGHT","IMAGE_BACKGROUND_TYPE","VIDEO_BACKGROUND_TYPE","Controls","attributes","didUploadFail","hasOnlyColorBackground","isUploadInProgress","onClearMedia","onSelectMedia","setAttributes","backgroundType","dimRatio","hasParallax","focalPoint","minHeight","minHeightUnit","url","CONTAINER_HEIGHT","onHeightChange","value","units","availableUnits","defaultValues","px","em","rem","vw","vh","onOpacityChange","onChangeUnit","nextUnit","Math","max","displayPlaceholder","setDisplayPlaceholder","setFocalPoint","toggleParallax","undefined","addMediaButtonStyle","addMediaButton","addMediaButtonDark","focalPointPosition","x","y","left","top","videoNaturalSize","setVideoNaturalSize","videoRef","mediaBackground","mediaBackgroundDark","imagePreviewStyles","imagePlaceholder","videoPreviewStyles","aspectRatio","width","height","opacity","video","focalPointHint","renderMediaSection","open","openMediaOptions","getMediaOptions","mediaPreview","mediaInner","destructiveButton","id","label","onPress","separated","image","event","naturalSize","current","seek","uri","clearMediaButton","overlayColor","customOverlayColor","gradient","customGradient","rangeCellContainer"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,cAArB;AACA,OAAOC,KAAP,MAAkB,oBAAlB;AAEA;AACA;AACA;;AACA,SACCC,KADD,EAECC,IAFD,EAGCC,yBAHD,EAICC,SAJD,EAKCC,YALD,EAMCC,WAND,EAOCC,WAPD,EAQCC,WARD,EASCC,aATD,EAUCC,4BAA4B,IAAIC,cAVjC,QAWO,uBAXP;AAYA,SAASC,IAAT,QAAqB,kBAArB;AACA,SAASC,QAAT,EAAmBC,WAAnB,EAAgCC,MAAhC,QAA8C,oBAA9C;AACA,SAASC,4BAAT,QAA6C,oBAA7C;AACA,SAASC,UAAT,EAAqBC,WAArB,QAAwC,yBAAxC;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,OAAOC,oBAAP,MAAiC,0BAAjC;AACA,OAAOC,wBAAP,MAAqC,+BAArC;AACA,SACCC,mBADD,EAECC,gBAFD,EAGCC,gBAHD,EAICC,oBAJD,EAKCC,qBALD,EAMCC,qBAND,QAOO,UAPP;;AASA,SAASC,QAAT,OAQI;AAAA;;AAAA,MARe;AAClBC,IAAAA,UADkB;AAElBC,IAAAA,aAFkB;AAGlBC,IAAAA,sBAHkB;AAIlBC,IAAAA,kBAJkB;AAKlBC,IAAAA,YALkB;AAMlBC,IAAAA,aANkB;AAOlBC,IAAAA;AAPkB,GAQf;AACH,QAAM;AACLC,IAAAA,cADK;AAELC,IAAAA,QAFK;AAGLC,IAAAA,WAHK;AAILC,IAAAA,UAJK;AAKLC,IAAAA,SALK;AAMLC,IAAAA,aAAa,GAAG,IANX;AAOLC,IAAAA;AAPK,MAQFb,UARJ;AASA,QAAMc,gBAAgB,GAAGH,SAAS,IAAIf,oBAAtC;AACA,QAAMmB,cAAc,GAAG/B,WAAW,CAC/BgC,KAAF,IAAa;AACZ,QAAKL,SAAS,IAAIK,KAAK,KAAKpB,oBAA5B,EAAmD;AAClDU,MAAAA,aAAa,CAAE;AAAEK,QAAAA,SAAS,EAAEK;AAAb,OAAF,CAAb;AACA;AACD,GALgC,EAMjC,CAAEL,SAAF,CANiC,CAAlC;AASA,QAAMM,KAAK,GAAGpC,cAAc,CAAE;AAC7BqC,IAAAA,cAAc,EAAE/B,UAAU,CAAE,eAAF,CAAV,IAAiC,CAChD,IADgD,EAEhD,IAFgD,EAGhD,KAHgD,EAIhD,IAJgD,EAKhD,IALgD,CADpB;AAQ7BgC,IAAAA,aAAa,EAAE;AAAEC,MAAAA,EAAE,EAAE,KAAN;AAAaC,MAAAA,EAAE,EAAE,IAAjB;AAAuBC,MAAAA,GAAG,EAAE,IAA5B;AAAkCC,MAAAA,EAAE,EAAE,IAAtC;AAA4CC,MAAAA,EAAE,EAAE;AAAhD;AARc,GAAF,CAA5B;AAWA,QAAMC,eAAe,GAAGzC,WAAW,CAAIgC,KAAF,IAAa;AACjDV,IAAAA,aAAa,CAAE;AAAEE,MAAAA,QAAQ,EAAEQ;AAAZ,KAAF,CAAb;AACA,GAFkC,EAEhC,EAFgC,CAAnC;AAIA,QAAMU,YAAY,GAAG1C,WAAW,CAAI2C,QAAF,IAAgB;AACjDrB,IAAAA,aAAa,CAAE;AACdM,MAAAA,aAAa,EAAEe,QADD;AAEdhB,MAAAA,SAAS,EACRgB,QAAQ,KAAK,IAAb,GACGC,IAAI,CAACC,GAAL,CAAUf,gBAAV,EAA4BpB,gBAA5B,CADH,GAEGoB;AALU,KAAF,CAAb;AAOA,GAR+B,EAQ7B,EAR6B,CAAhC;AAUA,QAAM,CAAEgB,kBAAF,EAAsBC,qBAAtB,IAAgDhD,QAAQ,CAAE,IAAF,CAA9D;;AAEA,WAASiD,aAAT,CAAwBhB,KAAxB,EAAgC;AAC/BV,IAAAA,aAAa,CAAE;AAAEI,MAAAA,UAAU,EAAEM;AAAd,KAAF,CAAb;AACA;;AAED,QAAMiB,cAAc,GAAG,MAAM;AAC5B3B,IAAAA,aAAa,CAAE;AACdG,MAAAA,WAAW,EAAE,CAAEA,WADD;AAEd,UAAK,CAAEA,WAAF,GACF;AAAEC,QAAAA,UAAU,EAAEwB;AAAd,OADE,GAEF;AAAExB,QAAAA,UAAU,EAAErC;AAAd,OAFH;AAFc,KAAF,CAAb;AAMA,GAPD;;AASA,QAAM8D,mBAAmB,GAAGjD,4BAA4B,CACvDI,MAAM,CAAC8C,cADgD,EAEvD9C,MAAM,CAAC+C,kBAFgD,CAAxD;;AAKA,WAASC,kBAAT,GAAoE;AAAA,QAAvC;AAAEC,MAAAA,CAAF;AAAKC,MAAAA;AAAL,KAAuC,uEAA5BnE,yBAA4B;AACnE,WAAO;AACNoE,MAAAA,IAAI,EAAG,GAAG,CAAEhC,WAAW,GAAG,GAAH,GAAS8B,CAAtB,IAA4B,GAAK,GADrC;AAENG,MAAAA,GAAG,EAAG,GAAG,CAAEjC,WAAW,GAAG,GAAH,GAAS+B,CAAtB,IAA4B,GAAK;AAFpC,KAAP;AAIA;;AAED,QAAM,CAAEG,gBAAF,EAAoBC,mBAApB,IAA4C7D,QAAQ,CAAE,IAAF,CAA1D;AACA,QAAM8D,QAAQ,GAAG5D,MAAM,CAAE,IAAF,CAAvB;AAEA,QAAM6D,eAAe,GAAG5D,4BAA4B,CACnDI,MAAM,CAACwD,eAD4C,EAEnDxD,MAAM,CAACyD,mBAF4C,CAApD;AAIA,QAAMC,kBAAkB,GAAG,CAC1BlB,kBAAkB,IAAIxC,MAAM,CAAC2D,gBADH,CAA3B;AAGA,QAAMC,kBAAkB,GAAG,CAC1B;AACCC,IAAAA,WAAW,EACVR,gBAAgB,IAChBA,gBAAgB,CAACS,KAAjB,GAAyBT,gBAAgB,CAACU,MAH5C;AAIC;AACAC,IAAAA,OAAO,EAAExB,kBAAkB,GAAG,CAAH,GAAO;AALnC,GAD0B,EAQ1BxC,MAAM,CAACiE,KARmB,EAS1BzB,kBAAkB,IAAIxC,MAAM,CAAC2D,gBATH,CAA3B;AAYA,QAAMO,cAAc,GAAG,CAAE/C,WAAF,IAAiB,CAAEqB,kBAAnB,IACtB,cAAC,IAAD;AACC,IAAA,IAAI,EAAGhD,IADR;AAEC,IAAA,IAAI,2BAAGQ,MAAM,CAACkE,cAAV,0DAAG,sBAAuBJ,KAF/B;AAGC,IAAA,KAAK,EAAG,CACP9D,MAAM,CAACkE,cADA,EAEPlB,kBAAkB,CAAE5B,UAAF,CAFX;AAHT,IADD;;AAWA,QAAM+C,kBAAkB,GAAG;AAAA;;AAAA,QAAE;AAC5BC,MAAAA,IAAI,EAAEC,gBADsB;AAE5BC,MAAAA;AAF4B,KAAF;AAAA,WAI1B,8BACGA,eAAe,EADlB,EAEG/C,GAAG,GACJ,8BACC,cAAC,WAAD,CAAa,IAAb;AACC,MAAA,UAAU,EAAG,KADd;AAEC,MAAA,kBAAkB,EAAG,CACpBvB,MAAM,CAACuE,YADa,EAEpBf,eAFoB,CAFtB;AAMC,MAAA,WAAW,EAAGa;AANf,OAQC,cAAC,IAAD;AAAM,MAAA,KAAK,EAAGrE,MAAM,CAACwE;AAArB,OACGjE,qBAAqB,KAAKU,cAA1B,IACD,cAAC,KAAD;AACC,MAAA,UAAU,EAAG,CAAEuB,kBADhB;AAEC,MAAA,iBAAiB,EAAG,KAFrB;AAGC,MAAA,UAAU,EAAG,CAAEA,kBAHhB;AAIC,MAAA,cAAc,EAAG7B,aAJlB;AAKC,MAAA,kBAAkB,EAAGE,kBALtB;AAMC,MAAA,kBAAkB,EAAG,CACpB;AACC4D,QAAAA,iBAAiB,EAAE,IADpB;AAECC,QAAAA,EAAE,EAAE,YAFL;AAGCC,QAAAA,KAAK,EAAE5E,EAAE,CAAE,aAAF,CAHV;AAIC6E,QAAAA,OAAO,EAAE9D,YAJV;AAKC+D,QAAAA,SAAS,EAAE,IALZ;AAMCnD,QAAAA,KAAK,EAAE;AANR,OADoB,CANtB;AAgBC,MAAA,eAAe,EAAG,MAAM;AACvBe,QAAAA,qBAAqB,CAAE,KAAF,CAArB;AACA,OAlBF;AAmBC,MAAA,yBAAyB,EAAG1B,aAnB7B;AAoBC,MAAA,gBAAgB,EAAGsD,gBApBpB;AAqBC,MAAA,GAAG,EAAG9C,GArBP;AAsBC,MAAA,MAAM,EAAC,MAtBR;AAuBC,MAAA,KAAK,EAAGmC,kBAvBT;AAwBC,MAAA,KAAK,mBAAG1D,MAAM,CAAC8E,KAAV,kDAAG,cAAchB;AAxBvB,MAFF,EA6BGtD,qBAAqB,KAAKS,cAA1B,IACD,cAAC,KAAD;AACC,MAAA,KAAK,MADN;AAEC,MAAA,MAAM,MAFP;AAGC,MAAA,YAAY,MAHb;AAIC,MAAA,WAAW,EAAG,MAAM;AACnBwB,QAAAA,qBAAqB,CAAE,IAAF,CAArB;AACA,OANF;AAOC,MAAA,MAAM,EAAKsC,KAAF,IAAa;AACrB,cAAM;AACLhB,UAAAA,MADK;AAELD,UAAAA;AAFK,YAGFiB,KAAK,CAACC,WAHV;AAIA1B,QAAAA,mBAAmB,CAAE;AACpBS,UAAAA,MADoB;AAEpBD,UAAAA;AAFoB,SAAF,CAAnB;AAIArB,QAAAA,qBAAqB,CAAE,KAAF,CAArB,CATqB,CAUrB;AACA;;AACAc,QAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAE0B,OAAV,CAAkBC,IAAlB,CAAwB,CAAxB;AACA,OApBF;AAqBC,MAAA,GAAG,EAAG3B,QArBP;AAsBC,MAAA,UAAU,EAAG,OAtBd;AAuBC,MAAA,MAAM,EAAG;AAAE4B,QAAAA,GAAG,EAAE5D;AAAP,OAvBV;AAwBC,MAAA,KAAK,EAAGqC;AAxBT,MA9BF,EAyDGpB,kBAAkB,GAAG,IAAH,GAAU0B,cAzD/B,CARD,CADD,EAqEC,cAAC,wBAAD;AACC,MAAA,QAAQ,EAAG/C,WADZ;AAEC,MAAA,UAAU,EAAGC,UAAU,IAAIrC,yBAF5B;AAGC,MAAA,kBAAkB,EAAG2D,aAHtB;AAIC,MAAA,GAAG,EAAGnB;AAJP,MArED,EA2EGhB,qBAAqB,KAAKU,cAA1B,IACD,cAAC,aAAD;AACC,MAAA,KAAK,EAAGlB,EAAE,CAAE,kBAAF,CADX;AAEC,MAAA,OAAO,EAAGoB,WAFX;AAGC,MAAA,QAAQ,EAAGwB;AAHZ,MA5EF,EAkFC,cAAC,WAAD;AACC,MAAA,SAAS,MADV;AAEC,MAAA,KAAK,EAAG5C,EAAE,CAAE,aAAF,CAFX;AAGC,MAAA,UAAU,EAAGC,MAAM,CAACoF,gBAHrB;AAIC,MAAA,OAAO,EAAGtE;AAJX,MAlFD,CADI,GA2FJ,cAAC,WAAD;AACC,MAAA,kBAAkB,EAAGf,EAAE,CAAE,oBAAF,CADxB;AAEC,MAAA,KAAK,EAAGA,EAAE,CAAE,oBAAF,CAFX;AAGC,MAAA,UAAU,EAAG8C,mBAHd;AAIC,MAAA,SAAS,MAJV;AAKC,MAAA,OAAO,EAAGwB;AALX,MA7FF,CAJ0B;AAAA,GAA3B;;AA4GA,SACC,8BACC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAGtE,EAAE,CAAE,OAAF;AAArB,KACC,cAAC,WAAD;AACC,IAAA,YAAY,EAAGI,mBADhB;AAEC,IAAA,gBAAgB,EAAG,CAAES,sBAFtB;AAGC,IAAA,QAAQ,EAAGG,aAHZ;AAIC,IAAA,MAAM,EAAGoD;AAJV,IADD,CADD,EAUC,cAAC,oBAAD;AACC,IAAA,YAAY,EAAGzD,UAAU,CAAC2E,YAD3B;AAEC,IAAA,kBAAkB,EAAG3E,UAAU,CAAC4E,kBAFjC;AAGC,IAAA,QAAQ,EAAG5E,UAAU,CAAC6E,QAHvB;AAIC,IAAA,cAAc,EAAG7E,UAAU,CAAC8E,cAJ7B;AAKC,IAAA,aAAa,EAAGxE;AALjB,IAVD,EAkBGO,GAAG,GACJ,cAAC,SAAD,QACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGxB,EAAE,CAAE,SAAF,CADX;AAEC,IAAA,YAAY,EAAG,CAFhB;AAGC,IAAA,YAAY,EAAG,GAHhB;AAIC,IAAA,KAAK,EAAGmB,QAJT;AAKC,IAAA,QAAQ,EAAGiB,eALZ;AAMC,IAAA,KAAK,EAAGnC,MAAM,CAACyF,kBANhB;AAOC,IAAA,aAAa,EAAG;AAPjB,IADD,CADI,GAYD,IA9BL,EAgCC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG1F,EAAE,CAAE,YAAF;AAArB,KACC,cAAC,WAAD;AACC,IAAA,KAAK,EAAGA,EAAE,CAAE,gBAAF,CADX;AAEC,IAAA,GAAG,EAAGuB,aAAa,KAAK,IAAlB,GAAyBlB,gBAAzB,GAA4C,CAFnD;AAGC,IAAA,GAAG,EAAGC,gBAHP;AAIC,IAAA,IAAI,EAAGiB,aAJR;AAKC,IAAA,KAAK,EAAGE,gBALT;AAMC,IAAA,QAAQ,EAAGC,cANZ;AAOC,IAAA,YAAY,EAAGW,YAPhB;AAQC,IAAA,KAAK,EAAGT,KART;AASC,IAAA,KAAK,EAAG3B,MAAM,CAACyF,kBAThB;AAUC,IAAA,GAAG,EAAGnE;AAVP,IADD,CAhCD,CADD;AAiDA;;AAED,eAAeb,QAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\nimport Video from 'react-native-video';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tImage,\n\tIcon,\n\tIMAGE_DEFAULT_FOCAL_POINT,\n\tPanelBody,\n\tRangeControl,\n\tUnitControl,\n\tTextControl,\n\tBottomSheet,\n\tToggleControl,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { plus } from '@wordpress/icons';\nimport { useState, useCallback, useRef } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { useSetting, MediaUpload } from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport OverlayColorSettings from './overlay-color-settings';\nimport FocalPointSettingsButton from './focal-point-settings-button';\nimport {\n\tALLOWED_MEDIA_TYPES,\n\tCOVER_MIN_HEIGHT,\n\tCOVER_MAX_HEIGHT,\n\tCOVER_DEFAULT_HEIGHT,\n\tIMAGE_BACKGROUND_TYPE,\n\tVIDEO_BACKGROUND_TYPE,\n} from './shared';\n\nfunction Controls( {\n\tattributes,\n\tdidUploadFail,\n\thasOnlyColorBackground,\n\tisUploadInProgress,\n\tonClearMedia,\n\tonSelectMedia,\n\tsetAttributes,\n} ) {\n\tconst {\n\t\tbackgroundType,\n\t\tdimRatio,\n\t\thasParallax,\n\t\tfocalPoint,\n\t\tminHeight,\n\t\tminHeightUnit = 'px',\n\t\turl,\n\t} = attributes;\n\tconst CONTAINER_HEIGHT = minHeight || COVER_DEFAULT_HEIGHT;\n\tconst onHeightChange = useCallback(\n\t\t( value ) => {\n\t\t\tif ( minHeight || value !== COVER_DEFAULT_HEIGHT ) {\n\t\t\t\tsetAttributes( { minHeight: value } );\n\t\t\t}\n\t\t},\n\t\t[ minHeight ]\n\t);\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' ) || [\n\t\t\t'px',\n\t\t\t'em',\n\t\t\t'rem',\n\t\t\t'vw',\n\t\t\t'vh',\n\t\t],\n\t\tdefaultValues: { px: '430', em: '20', rem: '20', vw: '20', vh: '50' },\n\t} );\n\n\tconst onOpacityChange = useCallback( ( value ) => {\n\t\tsetAttributes( { dimRatio: value } );\n\t}, [] );\n\n\tconst onChangeUnit = useCallback( ( nextUnit ) => {\n\t\tsetAttributes( {\n\t\t\tminHeightUnit: nextUnit,\n\t\t\tminHeight:\n\t\t\t\tnextUnit === 'px'\n\t\t\t\t\t? Math.max( CONTAINER_HEIGHT, COVER_MIN_HEIGHT )\n\t\t\t\t\t: CONTAINER_HEIGHT,\n\t\t} );\n\t}, [] );\n\n\tconst [ displayPlaceholder, setDisplayPlaceholder ] = useState( true );\n\n\tfunction setFocalPoint( value ) {\n\t\tsetAttributes( { focalPoint: value } );\n\t}\n\n\tconst toggleParallax = () => {\n\t\tsetAttributes( {\n\t\t\thasParallax: ! hasParallax,\n\t\t\t...( ! hasParallax\n\t\t\t\t? { focalPoint: undefined }\n\t\t\t\t: { focalPoint: IMAGE_DEFAULT_FOCAL_POINT } ),\n\t\t} );\n\t};\n\n\tconst addMediaButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.addMediaButton,\n\t\tstyles.addMediaButtonDark\n\t);\n\n\tfunction focalPointPosition( { x, y } = IMAGE_DEFAULT_FOCAL_POINT ) {\n\t\treturn {\n\t\t\tleft: `${ ( hasParallax ? 0.5 : x ) * 100 }%`,\n\t\t\ttop: `${ ( hasParallax ? 0.5 : y ) * 100 }%`,\n\t\t};\n\t}\n\n\tconst [ videoNaturalSize, setVideoNaturalSize ] = useState( null );\n\tconst videoRef = useRef( null );\n\n\tconst mediaBackground = usePreferredColorSchemeStyle(\n\t\tstyles.mediaBackground,\n\t\tstyles.mediaBackgroundDark\n\t);\n\tconst imagePreviewStyles = [\n\t\tdisplayPlaceholder && styles.imagePlaceholder,\n\t];\n\tconst videoPreviewStyles = [\n\t\t{\n\t\t\taspectRatio:\n\t\t\t\tvideoNaturalSize &&\n\t\t\t\tvideoNaturalSize.width / videoNaturalSize.height,\n\t\t\t// Hide Video component since it has black background while loading the source\n\t\t\topacity: displayPlaceholder ? 0 : 1,\n\t\t},\n\t\tstyles.video,\n\t\tdisplayPlaceholder && styles.imagePlaceholder,\n\t];\n\n\tconst focalPointHint = ! hasParallax && ! displayPlaceholder && (\n\t\t<Icon\n\t\t\ticon={ plus }\n\t\t\tsize={ styles.focalPointHint?.width }\n\t\t\tstyle={ [\n\t\t\t\tstyles.focalPointHint,\n\t\t\t\tfocalPointPosition( focalPoint ),\n\t\t\t] }\n\t\t/>\n\t);\n\n\tconst renderMediaSection = ( {\n\t\topen: openMediaOptions,\n\t\tgetMediaOptions,\n\t} ) => (\n\t\t<>\n\t\t\t{ getMediaOptions() }\n\t\t\t{ url ? (\n\t\t\t\t<>\n\t\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\t\taccessible={ false }\n\t\t\t\t\t\tcellContainerStyle={ [\n\t\t\t\t\t\t\tstyles.mediaPreview,\n\t\t\t\t\t\t\tmediaBackground,\n\t\t\t\t\t\t] }\n\t\t\t\t\t\tonLongPress={ openMediaOptions }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View style={ styles.mediaInner }>\n\t\t\t\t\t\t\t{ IMAGE_BACKGROUND_TYPE === backgroundType && (\n\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\teditButton={ ! displayPlaceholder }\n\t\t\t\t\t\t\t\t\thighlightSelected={ false }\n\t\t\t\t\t\t\t\t\tisSelected={ ! displayPlaceholder }\n\t\t\t\t\t\t\t\t\tisUploadFailed={ didUploadFail }\n\t\t\t\t\t\t\t\t\tisUploadInProgress={ isUploadInProgress }\n\t\t\t\t\t\t\t\t\tmediaPickerOptions={ [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tdestructiveButton: true,\n\t\t\t\t\t\t\t\t\t\t\tid: 'clearMedia',\n\t\t\t\t\t\t\t\t\t\t\tlabel: __( 'Clear Media' ),\n\t\t\t\t\t\t\t\t\t\t\tonPress: onClearMedia,\n\t\t\t\t\t\t\t\t\t\t\tseparated: true,\n\t\t\t\t\t\t\t\t\t\t\tvalue: 'clearMedia',\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\t\t\tonImageDataLoad={ () => {\n\t\t\t\t\t\t\t\t\t\tsetDisplayPlaceholder( false );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonSelectMediaUploadOption={ onSelectMedia }\n\t\t\t\t\t\t\t\t\topenMediaOptions={ openMediaOptions }\n\t\t\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\t\t\tstyle={ imagePreviewStyles }\n\t\t\t\t\t\t\t\t\twidth={ styles.image?.width }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ VIDEO_BACKGROUND_TYPE === backgroundType && (\n\t\t\t\t\t\t\t\t<Video\n\t\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\t\tpaused\n\t\t\t\t\t\t\t\t\tdisableFocus\n\t\t\t\t\t\t\t\t\tonLoadStart={ () => {\n\t\t\t\t\t\t\t\t\t\tsetDisplayPlaceholder( true );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonLoad={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\tconst {\n\t\t\t\t\t\t\t\t\t\t\theight,\n\t\t\t\t\t\t\t\t\t\t\twidth,\n\t\t\t\t\t\t\t\t\t\t} = event.naturalSize;\n\t\t\t\t\t\t\t\t\t\tsetVideoNaturalSize( {\n\t\t\t\t\t\t\t\t\t\t\theight,\n\t\t\t\t\t\t\t\t\t\t\twidth,\n\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\tsetDisplayPlaceholder( false );\n\t\t\t\t\t\t\t\t\t\t// Avoid invisible, paused video on Android, presumably\n\t\t\t\t\t\t\t\t\t\t// related to https://git.io/Jt6Dr\n\t\t\t\t\t\t\t\t\t\tvideoRef?.current.seek( 0 );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tref={ videoRef }\n\t\t\t\t\t\t\t\t\tresizeMode={ 'cover' }\n\t\t\t\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t\t\t\t\tstyle={ videoPreviewStyles }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ displayPlaceholder ? null : focalPointHint }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</BottomSheet.Cell>\n\t\t\t\t\t<FocalPointSettingsButton\n\t\t\t\t\t\tdisabled={ hasParallax }\n\t\t\t\t\t\tfocalPoint={ focalPoint || IMAGE_DEFAULT_FOCAL_POINT }\n\t\t\t\t\t\tonFocalPointChange={ setFocalPoint }\n\t\t\t\t\t\turl={ url }\n\t\t\t\t\t/>\n\t\t\t\t\t{ IMAGE_BACKGROUND_TYPE === backgroundType && (\n\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\tlabel={ __( 'Fixed background' ) }\n\t\t\t\t\t\t\tchecked={ hasParallax }\n\t\t\t\t\t\t\tonChange={ toggleParallax }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\tleftAlign\n\t\t\t\t\t\tlabel={ __( 'Clear Media' ) }\n\t\t\t\t\t\tlabelStyle={ styles.clearMediaButton }\n\t\t\t\t\t\tonPress={ onClearMedia }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<TextControl\n\t\t\t\t\taccessibilityLabel={ __( 'Add image or video' ) }\n\t\t\t\t\tlabel={ __( 'Add image or video' ) }\n\t\t\t\t\tlabelStyle={ addMediaButtonStyle }\n\t\t\t\t\tleftAlign\n\t\t\t\t\tonPress={ openMediaOptions }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<PanelBody title={ __( 'Media' ) }>\n\t\t\t\t<MediaUpload\n\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\tisReplacingMedia={ ! hasOnlyColorBackground }\n\t\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t\t\trender={ renderMediaSection }\n\t\t\t\t/>\n\t\t\t</PanelBody>\n\n\t\t\t<OverlayColorSettings\n\t\t\t\toverlayColor={ attributes.overlayColor }\n\t\t\t\tcustomOverlayColor={ attributes.customOverlayColor }\n\t\t\t\tgradient={ attributes.gradient }\n\t\t\t\tcustomGradient={ attributes.customGradient }\n\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t/>\n\n\t\t\t{ url ? (\n\t\t\t\t<PanelBody>\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\tlabel={ __( 'Opacity' ) }\n\t\t\t\t\t\tminimumValue={ 0 }\n\t\t\t\t\t\tmaximumValue={ 100 }\n\t\t\t\t\t\tvalue={ dimRatio }\n\t\t\t\t\t\tonChange={ onOpacityChange }\n\t\t\t\t\t\tstyle={ styles.rangeCellContainer }\n\t\t\t\t\t\tseparatorType={ 'topFullWidth' }\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t) : null }\n\n\t\t\t<PanelBody title={ __( 'Dimensions' ) }>\n\t\t\t\t<UnitControl\n\t\t\t\t\tlabel={ __( 'Minimum height' ) }\n\t\t\t\t\tmin={ minHeightUnit === 'px' ? COVER_MIN_HEIGHT : 1 }\n\t\t\t\t\tmax={ COVER_MAX_HEIGHT }\n\t\t\t\t\tunit={ minHeightUnit }\n\t\t\t\t\tvalue={ CONTAINER_HEIGHT }\n\t\t\t\t\tonChange={ onHeightChange }\n\t\t\t\t\tonUnitChange={ onChangeUnit }\n\t\t\t\t\tunits={ units }\n\t\t\t\t\tstyle={ styles.rangeCellContainer }\n\t\t\t\t\tkey={ minHeightUnit }\n\t\t\t\t/>\n\t\t\t</PanelBody>\n\t\t</>\n\t);\n}\n\nexport default Controls;\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/cover/controls.native.js"],"names":["View","Video","Image","Icon","IMAGE_DEFAULT_FOCAL_POINT","PanelBody","RangeControl","UnitControl","TextControl","BottomSheet","ToggleControl","__experimentalUseCustomUnits","useCustomUnits","plus","useState","useCallback","useRef","usePreferredColorSchemeStyle","useSetting","MediaUpload","__","styles","OverlayColorSettings","FocalPointSettingsButton","ALLOWED_MEDIA_TYPES","COVER_MIN_HEIGHT","COVER_MAX_HEIGHT","COVER_DEFAULT_HEIGHT","IMAGE_BACKGROUND_TYPE","VIDEO_BACKGROUND_TYPE","Controls","attributes","didUploadFail","hasOnlyColorBackground","isUploadInProgress","onClearMedia","onSelectMedia","setAttributes","backgroundType","dimRatio","hasParallax","focalPoint","minHeight","minHeightUnit","url","CONTAINER_HEIGHT","onHeightChange","value","units","availableUnits","defaultValues","px","em","rem","vw","vh","onOpacityChange","onChangeUnit","nextUnit","Math","max","displayPlaceholder","setDisplayPlaceholder","setFocalPoint","toggleParallax","undefined","addMediaButtonStyle","addMediaButton","addMediaButtonDark","focalPointPosition","x","y","left","top","videoNaturalSize","setVideoNaturalSize","videoRef","mediaBackground","mediaBackgroundDark","imagePreviewStyles","imagePlaceholder","videoPreviewStyles","aspectRatio","width","height","opacity","video","focalPointHint","renderMediaSection","open","openMediaOptions","getMediaOptions","mediaPreview","mediaInner","destructiveButton","id","label","onPress","separated","image","event","naturalSize","current","seek","uri","clearMediaButton","overlayColor","customOverlayColor","gradient","customGradient","rangeCellContainer"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,cAArB;AACA,OAAOC,KAAP,MAAkB,oBAAlB;AAEA;AACA;AACA;;AACA,SACCC,KADD,EAECC,IAFD,EAGCC,yBAHD,EAICC,SAJD,EAKCC,YALD,EAMCC,WAND,EAOCC,WAPD,EAQCC,WARD,EASCC,aATD,EAUCC,4BAA4B,IAAIC,cAVjC,QAWO,uBAXP;AAYA,SAASC,IAAT,QAAqB,kBAArB;AACA,SAASC,QAAT,EAAmBC,WAAnB,EAAgCC,MAAhC,QAA8C,oBAA9C;AACA,SAASC,4BAAT,QAA6C,oBAA7C;AACA,SAASC,UAAT,EAAqBC,WAArB,QAAwC,yBAAxC;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,OAAOC,oBAAP,MAAiC,0BAAjC;AACA,OAAOC,wBAAP,MAAqC,+BAArC;AACA,SACCC,mBADD,EAECC,gBAFD,EAGCC,gBAHD,EAICC,oBAJD,EAKCC,qBALD,EAMCC,qBAND,QAOO,UAPP;;AASA,SAASC,QAAT,OAQI;AAAA;;AAAA,MARe;AAClBC,IAAAA,UADkB;AAElBC,IAAAA,aAFkB;AAGlBC,IAAAA,sBAHkB;AAIlBC,IAAAA,kBAJkB;AAKlBC,IAAAA,YALkB;AAMlBC,IAAAA,aANkB;AAOlBC,IAAAA;AAPkB,GAQf;AACH,QAAM;AACLC,IAAAA,cADK;AAELC,IAAAA,QAFK;AAGLC,IAAAA,WAHK;AAILC,IAAAA,UAJK;AAKLC,IAAAA,SALK;AAMLC,IAAAA,aAAa,GAAG,IANX;AAOLC,IAAAA;AAPK,MAQFb,UARJ;AASA,QAAMc,gBAAgB,GAAGH,SAAS,IAAIf,oBAAtC;AACA,QAAMmB,cAAc,GAAG/B,WAAW,CAC/BgC,KAAF,IAAa;AACZ,QAAKL,SAAS,IAAIK,KAAK,KAAKpB,oBAA5B,EAAmD;AAClDU,MAAAA,aAAa,CAAE;AAAEK,QAAAA,SAAS,EAAEK;AAAb,OAAF,CAAb;AACA;AACD,GALgC,EAMjC,CAAEL,SAAF,CANiC,CAAlC;AASA,QAAMM,KAAK,GAAGpC,cAAc,CAAE;AAC7BqC,IAAAA,cAAc,EAAE/B,UAAU,CAAE,eAAF,CAAV,IAAiC,CAChD,IADgD,EAEhD,IAFgD,EAGhD,KAHgD,EAIhD,IAJgD,EAKhD,IALgD,CADpB;AAQ7BgC,IAAAA,aAAa,EAAE;AAAEC,MAAAA,EAAE,EAAE,GAAN;AAAWC,MAAAA,EAAE,EAAE,EAAf;AAAmBC,MAAAA,GAAG,EAAE,EAAxB;AAA4BC,MAAAA,EAAE,EAAE,EAAhC;AAAoCC,MAAAA,EAAE,EAAE;AAAxC;AARc,GAAF,CAA5B;AAWA,QAAMC,eAAe,GAAGzC,WAAW,CAAIgC,KAAF,IAAa;AACjDV,IAAAA,aAAa,CAAE;AAAEE,MAAAA,QAAQ,EAAEQ;AAAZ,KAAF,CAAb;AACA,GAFkC,EAEhC,EAFgC,CAAnC;AAIA,QAAMU,YAAY,GAAG1C,WAAW,CAAI2C,QAAF,IAAgB;AACjDrB,IAAAA,aAAa,CAAE;AACdM,MAAAA,aAAa,EAAEe,QADD;AAEdhB,MAAAA,SAAS,EACRgB,QAAQ,KAAK,IAAb,GACGC,IAAI,CAACC,GAAL,CAAUf,gBAAV,EAA4BpB,gBAA5B,CADH,GAEGoB;AALU,KAAF,CAAb;AAOA,GAR+B,EAQ7B,EAR6B,CAAhC;AAUA,QAAM,CAAEgB,kBAAF,EAAsBC,qBAAtB,IAAgDhD,QAAQ,CAAE,IAAF,CAA9D;;AAEA,WAASiD,aAAT,CAAwBhB,KAAxB,EAAgC;AAC/BV,IAAAA,aAAa,CAAE;AAAEI,MAAAA,UAAU,EAAEM;AAAd,KAAF,CAAb;AACA;;AAED,QAAMiB,cAAc,GAAG,MAAM;AAC5B3B,IAAAA,aAAa,CAAE;AACdG,MAAAA,WAAW,EAAE,CAAEA,WADD;AAEd,UAAK,CAAEA,WAAF,GACF;AAAEC,QAAAA,UAAU,EAAEwB;AAAd,OADE,GAEF;AAAExB,QAAAA,UAAU,EAAErC;AAAd,OAFH;AAFc,KAAF,CAAb;AAMA,GAPD;;AASA,QAAM8D,mBAAmB,GAAGjD,4BAA4B,CACvDI,MAAM,CAAC8C,cADgD,EAEvD9C,MAAM,CAAC+C,kBAFgD,CAAxD;;AAKA,WAASC,kBAAT,GAAoE;AAAA,QAAvC;AAAEC,MAAAA,CAAF;AAAKC,MAAAA;AAAL,KAAuC,uEAA5BnE,yBAA4B;AACnE,WAAO;AACNoE,MAAAA,IAAI,EAAG,GAAG,CAAEhC,WAAW,GAAG,GAAH,GAAS8B,CAAtB,IAA4B,GAAK,GADrC;AAENG,MAAAA,GAAG,EAAG,GAAG,CAAEjC,WAAW,GAAG,GAAH,GAAS+B,CAAtB,IAA4B,GAAK;AAFpC,KAAP;AAIA;;AAED,QAAM,CAAEG,gBAAF,EAAoBC,mBAApB,IAA4C7D,QAAQ,CAAE,IAAF,CAA1D;AACA,QAAM8D,QAAQ,GAAG5D,MAAM,CAAE,IAAF,CAAvB;AAEA,QAAM6D,eAAe,GAAG5D,4BAA4B,CACnDI,MAAM,CAACwD,eAD4C,EAEnDxD,MAAM,CAACyD,mBAF4C,CAApD;AAIA,QAAMC,kBAAkB,GAAG,CAC1BlB,kBAAkB,IAAIxC,MAAM,CAAC2D,gBADH,CAA3B;AAGA,QAAMC,kBAAkB,GAAG,CAC1B;AACCC,IAAAA,WAAW,EACVR,gBAAgB,IAChBA,gBAAgB,CAACS,KAAjB,GAAyBT,gBAAgB,CAACU,MAH5C;AAIC;AACAC,IAAAA,OAAO,EAAExB,kBAAkB,GAAG,CAAH,GAAO;AALnC,GAD0B,EAQ1BxC,MAAM,CAACiE,KARmB,EAS1BzB,kBAAkB,IAAIxC,MAAM,CAAC2D,gBATH,CAA3B;AAYA,QAAMO,cAAc,GAAG,CAAE/C,WAAF,IAAiB,CAAEqB,kBAAnB,IACtB,cAAC,IAAD;AACC,IAAA,IAAI,EAAGhD,IADR;AAEC,IAAA,IAAI,2BAAGQ,MAAM,CAACkE,cAAV,0DAAG,sBAAuBJ,KAF/B;AAGC,IAAA,KAAK,EAAG,CACP9D,MAAM,CAACkE,cADA,EAEPlB,kBAAkB,CAAE5B,UAAF,CAFX;AAHT,IADD;;AAWA,QAAM+C,kBAAkB,GAAG;AAAA;;AAAA,QAAE;AAC5BC,MAAAA,IAAI,EAAEC,gBADsB;AAE5BC,MAAAA;AAF4B,KAAF;AAAA,WAI1B,8BACGA,eAAe,EADlB,EAEG/C,GAAG,GACJ,8BACC,cAAC,WAAD,CAAa,IAAb;AACC,MAAA,UAAU,EAAG,KADd;AAEC,MAAA,kBAAkB,EAAG,CACpBvB,MAAM,CAACuE,YADa,EAEpBf,eAFoB,CAFtB;AAMC,MAAA,WAAW,EAAGa;AANf,OAQC,cAAC,IAAD;AAAM,MAAA,KAAK,EAAGrE,MAAM,CAACwE;AAArB,OACGjE,qBAAqB,KAAKU,cAA1B,IACD,cAAC,KAAD;AACC,MAAA,UAAU,EAAG,CAAEuB,kBADhB;AAEC,MAAA,iBAAiB,EAAG,KAFrB;AAGC,MAAA,UAAU,EAAG,CAAEA,kBAHhB;AAIC,MAAA,cAAc,EAAG7B,aAJlB;AAKC,MAAA,kBAAkB,EAAGE,kBALtB;AAMC,MAAA,kBAAkB,EAAG,CACpB;AACC4D,QAAAA,iBAAiB,EAAE,IADpB;AAECC,QAAAA,EAAE,EAAE,YAFL;AAGCC,QAAAA,KAAK,EAAE5E,EAAE,CAAE,aAAF,CAHV;AAIC6E,QAAAA,OAAO,EAAE9D,YAJV;AAKC+D,QAAAA,SAAS,EAAE,IALZ;AAMCnD,QAAAA,KAAK,EAAE;AANR,OADoB,CANtB;AAgBC,MAAA,eAAe,EAAG,MAAM;AACvBe,QAAAA,qBAAqB,CAAE,KAAF,CAArB;AACA,OAlBF;AAmBC,MAAA,yBAAyB,EAAG1B,aAnB7B;AAoBC,MAAA,gBAAgB,EAAGsD,gBApBpB;AAqBC,MAAA,GAAG,EAAG9C,GArBP;AAsBC,MAAA,MAAM,EAAC,MAtBR;AAuBC,MAAA,KAAK,EAAGmC,kBAvBT;AAwBC,MAAA,KAAK,mBAAG1D,MAAM,CAAC8E,KAAV,kDAAG,cAAchB;AAxBvB,MAFF,EA6BGtD,qBAAqB,KAAKS,cAA1B,IACD,cAAC,KAAD;AACC,MAAA,KAAK,MADN;AAEC,MAAA,MAAM,MAFP;AAGC,MAAA,YAAY,MAHb;AAIC,MAAA,WAAW,EAAG,MAAM;AACnBwB,QAAAA,qBAAqB,CAAE,IAAF,CAArB;AACA,OANF;AAOC,MAAA,MAAM,EAAKsC,KAAF,IAAa;AACrB,cAAM;AACLhB,UAAAA,MADK;AAELD,UAAAA;AAFK,YAGFiB,KAAK,CAACC,WAHV;AAIA1B,QAAAA,mBAAmB,CAAE;AACpBS,UAAAA,MADoB;AAEpBD,UAAAA;AAFoB,SAAF,CAAnB;AAIArB,QAAAA,qBAAqB,CAAE,KAAF,CAArB,CATqB,CAUrB;AACA;;AACAc,QAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAE0B,OAAV,CAAkBC,IAAlB,CAAwB,CAAxB;AACA,OApBF;AAqBC,MAAA,GAAG,EAAG3B,QArBP;AAsBC,MAAA,UAAU,EAAG,OAtBd;AAuBC,MAAA,MAAM,EAAG;AAAE4B,QAAAA,GAAG,EAAE5D;AAAP,OAvBV;AAwBC,MAAA,KAAK,EAAGqC;AAxBT,MA9BF,EAyDGpB,kBAAkB,GAAG,IAAH,GAAU0B,cAzD/B,CARD,CADD,EAqEC,cAAC,wBAAD;AACC,MAAA,QAAQ,EAAG/C,WADZ;AAEC,MAAA,UAAU,EAAGC,UAAU,IAAIrC,yBAF5B;AAGC,MAAA,kBAAkB,EAAG2D,aAHtB;AAIC,MAAA,GAAG,EAAGnB;AAJP,MArED,EA2EGhB,qBAAqB,KAAKU,cAA1B,IACD,cAAC,aAAD;AACC,MAAA,KAAK,EAAGlB,EAAE,CAAE,kBAAF,CADX;AAEC,MAAA,OAAO,EAAGoB,WAFX;AAGC,MAAA,QAAQ,EAAGwB;AAHZ,MA5EF,EAkFC,cAAC,WAAD;AACC,MAAA,SAAS,MADV;AAEC,MAAA,KAAK,EAAG5C,EAAE,CAAE,aAAF,CAFX;AAGC,MAAA,UAAU,EAAGC,MAAM,CAACoF,gBAHrB;AAIC,MAAA,OAAO,EAAGtE;AAJX,MAlFD,CADI,GA2FJ,cAAC,WAAD;AACC,MAAA,kBAAkB,EAAGf,EAAE,CAAE,oBAAF,CADxB;AAEC,MAAA,KAAK,EAAGA,EAAE,CAAE,oBAAF,CAFX;AAGC,MAAA,UAAU,EAAG8C,mBAHd;AAIC,MAAA,SAAS,MAJV;AAKC,MAAA,OAAO,EAAGwB;AALX,MA7FF,CAJ0B;AAAA,GAA3B;;AA4GA,SACC,8BACC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAGtE,EAAE,CAAE,OAAF;AAArB,KACC,cAAC,WAAD;AACC,IAAA,YAAY,EAAGI,mBADhB;AAEC,IAAA,gBAAgB,EAAG,CAAES,sBAFtB;AAGC,IAAA,QAAQ,EAAGG,aAHZ;AAIC,IAAA,MAAM,EAAGoD;AAJV,IADD,CADD,EAUC,cAAC,oBAAD;AACC,IAAA,YAAY,EAAGzD,UAAU,CAAC2E,YAD3B;AAEC,IAAA,kBAAkB,EAAG3E,UAAU,CAAC4E,kBAFjC;AAGC,IAAA,QAAQ,EAAG5E,UAAU,CAAC6E,QAHvB;AAIC,IAAA,cAAc,EAAG7E,UAAU,CAAC8E,cAJ7B;AAKC,IAAA,aAAa,EAAGxE;AALjB,IAVD,EAkBGO,GAAG,GACJ,cAAC,SAAD,QACC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGxB,EAAE,CAAE,SAAF,CADX;AAEC,IAAA,YAAY,EAAG,CAFhB;AAGC,IAAA,YAAY,EAAG,GAHhB;AAIC,IAAA,KAAK,EAAGmB,QAJT;AAKC,IAAA,QAAQ,EAAGiB,eALZ;AAMC,IAAA,KAAK,EAAGnC,MAAM,CAACyF,kBANhB;AAOC,IAAA,aAAa,EAAG;AAPjB,IADD,CADI,GAYD,IA9BL,EAgCC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG1F,EAAE,CAAE,YAAF;AAArB,KACC,cAAC,WAAD;AACC,IAAA,KAAK,EAAGA,EAAE,CAAE,gBAAF,CADX;AAEC,IAAA,GAAG,EAAGuB,aAAa,KAAK,IAAlB,GAAyBlB,gBAAzB,GAA4C,CAFnD;AAGC,IAAA,GAAG,EAAGC,gBAHP;AAIC,IAAA,IAAI,EAAGiB,aAJR;AAKC,IAAA,KAAK,EAAGE,gBALT;AAMC,IAAA,QAAQ,EAAGC,cANZ;AAOC,IAAA,YAAY,EAAGW,YAPhB;AAQC,IAAA,KAAK,EAAGT,KART;AASC,IAAA,KAAK,EAAG3B,MAAM,CAACyF,kBAThB;AAUC,IAAA,GAAG,EAAGnE;AAVP,IADD,CAhCD,CADD;AAiDA;;AAED,eAAeb,QAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\nimport Video from 'react-native-video';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tImage,\n\tIcon,\n\tIMAGE_DEFAULT_FOCAL_POINT,\n\tPanelBody,\n\tRangeControl,\n\tUnitControl,\n\tTextControl,\n\tBottomSheet,\n\tToggleControl,\n\t__experimentalUseCustomUnits as useCustomUnits,\n} from '@wordpress/components';\nimport { plus } from '@wordpress/icons';\nimport { useState, useCallback, useRef } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { useSetting, MediaUpload } from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport OverlayColorSettings from './overlay-color-settings';\nimport FocalPointSettingsButton from './focal-point-settings-button';\nimport {\n\tALLOWED_MEDIA_TYPES,\n\tCOVER_MIN_HEIGHT,\n\tCOVER_MAX_HEIGHT,\n\tCOVER_DEFAULT_HEIGHT,\n\tIMAGE_BACKGROUND_TYPE,\n\tVIDEO_BACKGROUND_TYPE,\n} from './shared';\n\nfunction Controls( {\n\tattributes,\n\tdidUploadFail,\n\thasOnlyColorBackground,\n\tisUploadInProgress,\n\tonClearMedia,\n\tonSelectMedia,\n\tsetAttributes,\n} ) {\n\tconst {\n\t\tbackgroundType,\n\t\tdimRatio,\n\t\thasParallax,\n\t\tfocalPoint,\n\t\tminHeight,\n\t\tminHeightUnit = 'px',\n\t\turl,\n\t} = attributes;\n\tconst CONTAINER_HEIGHT = minHeight || COVER_DEFAULT_HEIGHT;\n\tconst onHeightChange = useCallback(\n\t\t( value ) => {\n\t\t\tif ( minHeight || value !== COVER_DEFAULT_HEIGHT ) {\n\t\t\t\tsetAttributes( { minHeight: value } );\n\t\t\t}\n\t\t},\n\t\t[ minHeight ]\n\t);\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: useSetting( 'spacing.units' ) || [\n\t\t\t'px',\n\t\t\t'em',\n\t\t\t'rem',\n\t\t\t'vw',\n\t\t\t'vh',\n\t\t],\n\t\tdefaultValues: { px: 430, em: 20, rem: 20, vw: 20, vh: 50 },\n\t} );\n\n\tconst onOpacityChange = useCallback( ( value ) => {\n\t\tsetAttributes( { dimRatio: value } );\n\t}, [] );\n\n\tconst onChangeUnit = useCallback( ( nextUnit ) => {\n\t\tsetAttributes( {\n\t\t\tminHeightUnit: nextUnit,\n\t\t\tminHeight:\n\t\t\t\tnextUnit === 'px'\n\t\t\t\t\t? Math.max( CONTAINER_HEIGHT, COVER_MIN_HEIGHT )\n\t\t\t\t\t: CONTAINER_HEIGHT,\n\t\t} );\n\t}, [] );\n\n\tconst [ displayPlaceholder, setDisplayPlaceholder ] = useState( true );\n\n\tfunction setFocalPoint( value ) {\n\t\tsetAttributes( { focalPoint: value } );\n\t}\n\n\tconst toggleParallax = () => {\n\t\tsetAttributes( {\n\t\t\thasParallax: ! hasParallax,\n\t\t\t...( ! hasParallax\n\t\t\t\t? { focalPoint: undefined }\n\t\t\t\t: { focalPoint: IMAGE_DEFAULT_FOCAL_POINT } ),\n\t\t} );\n\t};\n\n\tconst addMediaButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.addMediaButton,\n\t\tstyles.addMediaButtonDark\n\t);\n\n\tfunction focalPointPosition( { x, y } = IMAGE_DEFAULT_FOCAL_POINT ) {\n\t\treturn {\n\t\t\tleft: `${ ( hasParallax ? 0.5 : x ) * 100 }%`,\n\t\t\ttop: `${ ( hasParallax ? 0.5 : y ) * 100 }%`,\n\t\t};\n\t}\n\n\tconst [ videoNaturalSize, setVideoNaturalSize ] = useState( null );\n\tconst videoRef = useRef( null );\n\n\tconst mediaBackground = usePreferredColorSchemeStyle(\n\t\tstyles.mediaBackground,\n\t\tstyles.mediaBackgroundDark\n\t);\n\tconst imagePreviewStyles = [\n\t\tdisplayPlaceholder && styles.imagePlaceholder,\n\t];\n\tconst videoPreviewStyles = [\n\t\t{\n\t\t\taspectRatio:\n\t\t\t\tvideoNaturalSize &&\n\t\t\t\tvideoNaturalSize.width / videoNaturalSize.height,\n\t\t\t// Hide Video component since it has black background while loading the source\n\t\t\topacity: displayPlaceholder ? 0 : 1,\n\t\t},\n\t\tstyles.video,\n\t\tdisplayPlaceholder && styles.imagePlaceholder,\n\t];\n\n\tconst focalPointHint = ! hasParallax && ! displayPlaceholder && (\n\t\t<Icon\n\t\t\ticon={ plus }\n\t\t\tsize={ styles.focalPointHint?.width }\n\t\t\tstyle={ [\n\t\t\t\tstyles.focalPointHint,\n\t\t\t\tfocalPointPosition( focalPoint ),\n\t\t\t] }\n\t\t/>\n\t);\n\n\tconst renderMediaSection = ( {\n\t\topen: openMediaOptions,\n\t\tgetMediaOptions,\n\t} ) => (\n\t\t<>\n\t\t\t{ getMediaOptions() }\n\t\t\t{ url ? (\n\t\t\t\t<>\n\t\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\t\taccessible={ false }\n\t\t\t\t\t\tcellContainerStyle={ [\n\t\t\t\t\t\t\tstyles.mediaPreview,\n\t\t\t\t\t\t\tmediaBackground,\n\t\t\t\t\t\t] }\n\t\t\t\t\t\tonLongPress={ openMediaOptions }\n\t\t\t\t\t>\n\t\t\t\t\t\t<View style={ styles.mediaInner }>\n\t\t\t\t\t\t\t{ IMAGE_BACKGROUND_TYPE === backgroundType && (\n\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\teditButton={ ! displayPlaceholder }\n\t\t\t\t\t\t\t\t\thighlightSelected={ false }\n\t\t\t\t\t\t\t\t\tisSelected={ ! displayPlaceholder }\n\t\t\t\t\t\t\t\t\tisUploadFailed={ didUploadFail }\n\t\t\t\t\t\t\t\t\tisUploadInProgress={ isUploadInProgress }\n\t\t\t\t\t\t\t\t\tmediaPickerOptions={ [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tdestructiveButton: true,\n\t\t\t\t\t\t\t\t\t\t\tid: 'clearMedia',\n\t\t\t\t\t\t\t\t\t\t\tlabel: __( 'Clear Media' ),\n\t\t\t\t\t\t\t\t\t\t\tonPress: onClearMedia,\n\t\t\t\t\t\t\t\t\t\t\tseparated: true,\n\t\t\t\t\t\t\t\t\t\t\tvalue: 'clearMedia',\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\t\t\tonImageDataLoad={ () => {\n\t\t\t\t\t\t\t\t\t\tsetDisplayPlaceholder( false );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonSelectMediaUploadOption={ onSelectMedia }\n\t\t\t\t\t\t\t\t\topenMediaOptions={ openMediaOptions }\n\t\t\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\t\t\tstyle={ imagePreviewStyles }\n\t\t\t\t\t\t\t\t\twidth={ styles.image?.width }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ VIDEO_BACKGROUND_TYPE === backgroundType && (\n\t\t\t\t\t\t\t\t<Video\n\t\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\t\tpaused\n\t\t\t\t\t\t\t\t\tdisableFocus\n\t\t\t\t\t\t\t\t\tonLoadStart={ () => {\n\t\t\t\t\t\t\t\t\t\tsetDisplayPlaceholder( true );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonLoad={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\tconst {\n\t\t\t\t\t\t\t\t\t\t\theight,\n\t\t\t\t\t\t\t\t\t\t\twidth,\n\t\t\t\t\t\t\t\t\t\t} = event.naturalSize;\n\t\t\t\t\t\t\t\t\t\tsetVideoNaturalSize( {\n\t\t\t\t\t\t\t\t\t\t\theight,\n\t\t\t\t\t\t\t\t\t\t\twidth,\n\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t\tsetDisplayPlaceholder( false );\n\t\t\t\t\t\t\t\t\t\t// Avoid invisible, paused video on Android, presumably\n\t\t\t\t\t\t\t\t\t\t// related to https://git.io/Jt6Dr\n\t\t\t\t\t\t\t\t\t\tvideoRef?.current.seek( 0 );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tref={ videoRef }\n\t\t\t\t\t\t\t\t\tresizeMode={ 'cover' }\n\t\t\t\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t\t\t\t\tstyle={ videoPreviewStyles }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ displayPlaceholder ? null : focalPointHint }\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</BottomSheet.Cell>\n\t\t\t\t\t<FocalPointSettingsButton\n\t\t\t\t\t\tdisabled={ hasParallax }\n\t\t\t\t\t\tfocalPoint={ focalPoint || IMAGE_DEFAULT_FOCAL_POINT }\n\t\t\t\t\t\tonFocalPointChange={ setFocalPoint }\n\t\t\t\t\t\turl={ url }\n\t\t\t\t\t/>\n\t\t\t\t\t{ IMAGE_BACKGROUND_TYPE === backgroundType && (\n\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\tlabel={ __( 'Fixed background' ) }\n\t\t\t\t\t\t\tchecked={ hasParallax }\n\t\t\t\t\t\t\tonChange={ toggleParallax }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\tleftAlign\n\t\t\t\t\t\tlabel={ __( 'Clear Media' ) }\n\t\t\t\t\t\tlabelStyle={ styles.clearMediaButton }\n\t\t\t\t\t\tonPress={ onClearMedia }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<TextControl\n\t\t\t\t\taccessibilityLabel={ __( 'Add image or video' ) }\n\t\t\t\t\tlabel={ __( 'Add image or video' ) }\n\t\t\t\t\tlabelStyle={ addMediaButtonStyle }\n\t\t\t\t\tleftAlign\n\t\t\t\t\tonPress={ openMediaOptions }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<PanelBody title={ __( 'Media' ) }>\n\t\t\t\t<MediaUpload\n\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\tisReplacingMedia={ ! hasOnlyColorBackground }\n\t\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t\t\trender={ renderMediaSection }\n\t\t\t\t/>\n\t\t\t</PanelBody>\n\n\t\t\t<OverlayColorSettings\n\t\t\t\toverlayColor={ attributes.overlayColor }\n\t\t\t\tcustomOverlayColor={ attributes.customOverlayColor }\n\t\t\t\tgradient={ attributes.gradient }\n\t\t\t\tcustomGradient={ attributes.customGradient }\n\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t/>\n\n\t\t\t{ url ? (\n\t\t\t\t<PanelBody>\n\t\t\t\t\t<RangeControl\n\t\t\t\t\t\tlabel={ __( 'Opacity' ) }\n\t\t\t\t\t\tminimumValue={ 0 }\n\t\t\t\t\t\tmaximumValue={ 100 }\n\t\t\t\t\t\tvalue={ dimRatio }\n\t\t\t\t\t\tonChange={ onOpacityChange }\n\t\t\t\t\t\tstyle={ styles.rangeCellContainer }\n\t\t\t\t\t\tseparatorType={ 'topFullWidth' }\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t) : null }\n\n\t\t\t<PanelBody title={ __( 'Dimensions' ) }>\n\t\t\t\t<UnitControl\n\t\t\t\t\tlabel={ __( 'Minimum height' ) }\n\t\t\t\t\tmin={ minHeightUnit === 'px' ? COVER_MIN_HEIGHT : 1 }\n\t\t\t\t\tmax={ COVER_MAX_HEIGHT }\n\t\t\t\t\tunit={ minHeightUnit }\n\t\t\t\t\tvalue={ CONTAINER_HEIGHT }\n\t\t\t\t\tonChange={ onHeightChange }\n\t\t\t\t\tonUnitChange={ onChangeUnit }\n\t\t\t\t\tunits={ units }\n\t\t\t\t\tstyle={ styles.rangeCellContainer }\n\t\t\t\t\tkey={ minHeightUnit }\n\t\t\t\t/>\n\t\t\t</PanelBody>\n\t\t</>\n\t);\n}\n\nexport default Controls;\n"]}