<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[10983] sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns: Pattern Directory: Sync with git WordPress/pattern-directory@4325f4c27e58232cc4a5553bad65ba258947742f</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="http://meta.trac.wordpress.org/changeset/10983">10983</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"http://meta.trac.wordpress.org/changeset/10983","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>ryelle</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2021-05-17 18:57:24 +0000 (Mon, 17 May 2021)</dd>
</dl>

<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Pattern Directory: Sync with git WordPress/pattern-directory@4325f4c27e58232cc4a5553bad65ba258947742f</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternsbuildindexassetphp">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.asset.php</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternsbuildindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_categorymenuscss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_category-menu.scss</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_componentsscss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_components.scss</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_favoritebuttonscss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_favorite-button.scss</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_patternscss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern.scss</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscssstylecss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/style.css</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternsfunctionsphp">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/functions.php</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternspackagejson">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/package.json</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssinglewporgpatternphp">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/single-wporg-pattern.php</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentscategorymenudefaultjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/category-menu/default.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatternpreviewactionsindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview-actions/index.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatternthumbnailindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-thumbnail/index.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/index.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcstoreactionsjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/actions.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcstoreindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/index.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcstorereducerjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/reducer.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcstoreresolversjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/resolvers.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcstoreselectorsjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/selectors.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcstoretestreducerjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/test/reducer.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcstoretestresolversjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/test/resolvers.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcstoretestselectorsjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/test/selectors.js</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_patternreportbuttonscss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-report-button.scss</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_patternreportmodalscss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-report-modal.scss</a></li>
<li>sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/favorite-button/</li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentsfavoritebuttonindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/favorite-button/index.js</a></li>
<li>sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/report-pattern-button/</li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentsreportpatternbuttonindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/report-pattern-button/index.js</a></li>
<li>sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/report-pattern-modal/</li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentsreportpatternmodalindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/report-pattern-modal/index.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcstoretestfixturespatternflagreasonsjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/test/fixtures/pattern-flag-reasons.js</a></li>
</ul>

<h3>Removed Paths</h3>
<ul>
<li>sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/add-to-favorite-button/</li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternsbuildindexassetphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.asset.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.asset.php  2021-05-17 05:26:25 UTC (rev 10982)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.asset.php    2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1 +1 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-<?php return array('dependencies' => array('react', 'wp-a11y', 'wp-components', 'wp-compose', 'wp-data', 'wp-data-controls', 'wp-element', 'wp-i18n', 'wp-keycodes', 'wp-polyfill', 'wp-primitives', 'wp-url', 'wp-viewport'), 'version' => '6cc4550be1812ff312e84305d20a109c');
</del><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?php return array('dependencies' => array('react', 'wp-a11y', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-data-controls', 'wp-element', 'wp-i18n', 'wp-keycodes', 'wp-polyfill', 'wp-primitives', 'wp-url', 'wp-viewport'), 'version' => '0e8288553698a27b213d838c559a648a');
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternsbuildindexjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.js 2021-05-17 05:26:25 UTC (rev 10982)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.js   2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -86,85 +86,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /************************************************************************/
</span><span class="cx" style="display: block; padding: 0 10px"> /******/ ({
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/***/ "../../../../node_modules/@babel/runtime/helpers/arrayLikeToArray.js":
-/*!*************************************************************************************************************!*\
-  !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/arrayLikeToArray.js ***!
-  \*************************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-    arr2[i] = arr[i];
-  }
-
-  return arr2;
-}
-
-module.exports = _arrayLikeToArray;
-
-/***/ }),
-
-/***/ "../../../../node_modules/@babel/runtime/helpers/arrayWithHoles.js":
-/*!***********************************************************************************************************!*\
-  !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/arrayWithHoles.js ***!
-  \***********************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-module.exports = _arrayWithHoles;
-
-/***/ }),
-
-/***/ "../../../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js":
-/*!**************************************************************************************************************!*\
-  !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js ***!
-  \**************************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-var arrayLikeToArray = __webpack_require__(/*! ./arrayLikeToArray */ "../../../../node_modules/@babel/runtime/helpers/arrayLikeToArray.js");
-
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return arrayLikeToArray(arr);
-}
-
-module.exports = _arrayWithoutHoles;
-
-/***/ }),
-
-/***/ "../../../../node_modules/@babel/runtime/helpers/defineProperty.js":
-/*!***********************************************************************************************************!*\
-  !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/defineProperty.js ***!
-  \***********************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-module.exports = _defineProperty;
-
-/***/ }),
-
</del><span class="cx" style="display: block; padding: 0 10px"> /***/ "../../../../node_modules/@babel/runtime/helpers/esm/defineProperty.js":
</span><span class="cx" style="display: block; padding: 0 10px"> /*!***************************************************************************************************************!*\
</span><span class="cx" style="display: block; padding: 0 10px">   !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/esm/defineProperty.js ***!
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -252,244 +173,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /***/ }),
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/***/ "../../../../node_modules/@babel/runtime/helpers/extends.js":
-/*!****************************************************************************************************!*\
-  !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/extends.js ***!
-  \****************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-function _extends() {
-  module.exports = _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-module.exports = _extends;
-
-/***/ }),
-
-/***/ "../../../../node_modules/@babel/runtime/helpers/iterableToArray.js":
-/*!************************************************************************************************************!*\
-  !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/iterableToArray.js ***!
-  \************************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
-}
-
-module.exports = _iterableToArray;
-
-/***/ }),
-
-/***/ "../../../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js":
-/*!*****************************************************************************************************************!*\
-  !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js ***!
-  \*****************************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-module.exports = _iterableToArrayLimit;
-
-/***/ }),
-
-/***/ "../../../../node_modules/@babel/runtime/helpers/nonIterableRest.js":
-/*!************************************************************************************************************!*\
-  !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/nonIterableRest.js ***!
-  \************************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-module.exports = _nonIterableRest;
-
-/***/ }),
-
-/***/ "../../../../node_modules/@babel/runtime/helpers/nonIterableSpread.js":
-/*!**************************************************************************************************************!*\
-  !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/nonIterableSpread.js ***!
-  \**************************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-module.exports = _nonIterableSpread;
-
-/***/ }),
-
-/***/ "../../../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js":
-/*!********************************************************************************************************************!*\
-  !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/objectWithoutProperties.js ***!
-  \********************************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-var objectWithoutPropertiesLoose = __webpack_require__(/*! ./objectWithoutPropertiesLoose */ "../../../../node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js");
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-module.exports = _objectWithoutProperties;
-
-/***/ }),
-
-/***/ "../../../../node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js":
-/*!*************************************************************************************************************************!*\
-  !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js ***!
-  \*************************************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-module.exports = _objectWithoutPropertiesLoose;
-
-/***/ }),
-
-/***/ "../../../../node_modules/@babel/runtime/helpers/slicedToArray.js":
-/*!**********************************************************************************************************!*\
-  !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/slicedToArray.js ***!
-  \**********************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-var arrayWithHoles = __webpack_require__(/*! ./arrayWithHoles */ "../../../../node_modules/@babel/runtime/helpers/arrayWithHoles.js");
-
-var iterableToArrayLimit = __webpack_require__(/*! ./iterableToArrayLimit */ "../../../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js");
-
-var unsupportedIterableToArray = __webpack_require__(/*! ./unsupportedIterableToArray */ "../../../../node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js");
-
-var nonIterableRest = __webpack_require__(/*! ./nonIterableRest */ "../../../../node_modules/@babel/runtime/helpers/nonIterableRest.js");
-
-function _slicedToArray(arr, i) {
-  return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || unsupportedIterableToArray(arr, i) || nonIterableRest();
-}
-
-module.exports = _slicedToArray;
-
-/***/ }),
-
-/***/ "../../../../node_modules/@babel/runtime/helpers/toConsumableArray.js":
-/*!**************************************************************************************************************!*\
-  !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/toConsumableArray.js ***!
-  \**************************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-var arrayWithoutHoles = __webpack_require__(/*! ./arrayWithoutHoles */ "../../../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js");
-
-var iterableToArray = __webpack_require__(/*! ./iterableToArray */ "../../../../node_modules/@babel/runtime/helpers/iterableToArray.js");
-
-var unsupportedIterableToArray = __webpack_require__(/*! ./unsupportedIterableToArray */ "../../../../node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js");
-
-var nonIterableSpread = __webpack_require__(/*! ./nonIterableSpread */ "../../../../node_modules/@babel/runtime/helpers/nonIterableSpread.js");
-
-function _toConsumableArray(arr) {
-  return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread();
-}
-
-module.exports = _toConsumableArray;
-
-/***/ }),
-
-/***/ "../../../../node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js":
-/*!***********************************************************************************************************************!*\
-  !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js ***!
-  \***********************************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-var arrayLikeToArray = __webpack_require__(/*! ./arrayLikeToArray */ "../../../../node_modules/@babel/runtime/helpers/arrayLikeToArray.js");
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);
-}
-
-module.exports = _unsupportedIterableToArray;
-
-/***/ }),
-
</del><span class="cx" style="display: block; padding: 0 10px"> /***/ "../../../../node_modules/@wordpress/icons/build-module/icon/index.js":
</span><span class="cx" style="display: block; padding: 0 10px"> /*!**************************************************************************************************************!*\
</span><span class="cx" style="display: block; padding: 0 10px">   !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/@wordpress/icons/build-module/icon/index.js ***!
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7696,6 +7379,403 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /***/ }),
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/***/ "../../../../node_modules/classnames/index.js":
+/*!**************************************************************************************!*\
+  !*** /Users/ryelle/Projects/Work/pattern-directory/node_modules/classnames/index.js ***!
+  \**************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
+  Copyright (c) 2017 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+/* global define */
+
+(function () {
+       'use strict';
+
+       var hasOwn = {}.hasOwnProperty;
+
+       function classNames () {
+               var classes = [];
+
+               for (var i = 0; i < arguments.length; i++) {
+                       var arg = arguments[i];
+                       if (!arg) continue;
+
+                       var argType = typeof arg;
+
+                       if (argType === 'string' || argType === 'number') {
+                               classes.push(arg);
+                       } else if (Array.isArray(arg) && arg.length) {
+                               var inner = classNames.apply(null, arg);
+                               if (inner) {
+                                       classes.push(inner);
+                               }
+                       } else if (argType === 'object') {
+                               for (var key in arg) {
+                                       if (hasOwn.call(arg, key) && arg[key]) {
+                                               classes.push(key);
+                                       }
+                               }
+                       }
+               }
+
+               return classes.join(' ');
+       }
+
+       if ( true && module.exports) {
+               classNames.default = classNames;
+               module.exports = classNames;
+       } else if (true) {
+               // register as 'classnames', consistent with npm package name
+               !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = (function () {
+                       return classNames;
+               }).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
+                               __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+       } else {}
+}());
+
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/arrayLikeToArray.js":
+/*!*****************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/arrayLikeToArray.js ***!
+  \*****************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+
+  return arr2;
+}
+
+module.exports = _arrayLikeToArray;
+module.exports["default"] = module.exports, module.exports.__esModule = true;
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/arrayWithHoles.js":
+/*!***************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/arrayWithHoles.js ***!
+  \***************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+module.exports = _arrayWithHoles;
+module.exports["default"] = module.exports, module.exports.__esModule = true;
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/arrayWithoutHoles.js":
+/*!******************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/arrayWithoutHoles.js ***!
+  \******************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+var arrayLikeToArray = __webpack_require__(/*! ./arrayLikeToArray.js */ "./node_modules/@babel/runtime/helpers/arrayLikeToArray.js");
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return arrayLikeToArray(arr);
+}
+
+module.exports = _arrayWithoutHoles;
+module.exports["default"] = module.exports, module.exports.__esModule = true;
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/defineProperty.js":
+/*!***************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/defineProperty.js ***!
+  \***************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+module.exports = _defineProperty;
+module.exports["default"] = module.exports, module.exports.__esModule = true;
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/extends.js":
+/*!********************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/extends.js ***!
+  \********************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+function _extends() {
+  module.exports = _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  module.exports["default"] = module.exports, module.exports.__esModule = true;
+  return _extends.apply(this, arguments);
+}
+
+module.exports = _extends;
+module.exports["default"] = module.exports, module.exports.__esModule = true;
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/iterableToArray.js":
+/*!****************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/iterableToArray.js ***!
+  \****************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+
+module.exports = _iterableToArray;
+module.exports["default"] = module.exports, module.exports.__esModule = true;
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/iterableToArrayLimit.js":
+/*!*********************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/iterableToArrayLimit.js ***!
+  \*********************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]);
+
+  if (_i == null) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+
+  var _s, _e;
+
+  try {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+module.exports = _iterableToArrayLimit;
+module.exports["default"] = module.exports, module.exports.__esModule = true;
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/nonIterableRest.js":
+/*!****************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/nonIterableRest.js ***!
+  \****************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+module.exports = _nonIterableRest;
+module.exports["default"] = module.exports, module.exports.__esModule = true;
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/nonIterableSpread.js":
+/*!******************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/nonIterableSpread.js ***!
+  \******************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+module.exports = _nonIterableSpread;
+module.exports["default"] = module.exports, module.exports.__esModule = true;
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/objectWithoutProperties.js":
+/*!************************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/objectWithoutProperties.js ***!
+  \************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+var objectWithoutPropertiesLoose = __webpack_require__(/*! ./objectWithoutPropertiesLoose.js */ "./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js");
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+module.exports = _objectWithoutProperties;
+module.exports["default"] = module.exports, module.exports.__esModule = true;
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js":
+/*!*****************************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js ***!
+  \*****************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+module.exports = _objectWithoutPropertiesLoose;
+module.exports["default"] = module.exports, module.exports.__esModule = true;
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/slicedToArray.js":
+/*!**************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/slicedToArray.js ***!
+  \**************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+var arrayWithHoles = __webpack_require__(/*! ./arrayWithHoles.js */ "./node_modules/@babel/runtime/helpers/arrayWithHoles.js");
+
+var iterableToArrayLimit = __webpack_require__(/*! ./iterableToArrayLimit.js */ "./node_modules/@babel/runtime/helpers/iterableToArrayLimit.js");
+
+var unsupportedIterableToArray = __webpack_require__(/*! ./unsupportedIterableToArray.js */ "./node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js");
+
+var nonIterableRest = __webpack_require__(/*! ./nonIterableRest.js */ "./node_modules/@babel/runtime/helpers/nonIterableRest.js");
+
+function _slicedToArray(arr, i) {
+  return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || unsupportedIterableToArray(arr, i) || nonIterableRest();
+}
+
+module.exports = _slicedToArray;
+module.exports["default"] = module.exports, module.exports.__esModule = true;
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/toConsumableArray.js":
+/*!******************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/toConsumableArray.js ***!
+  \******************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+var arrayWithoutHoles = __webpack_require__(/*! ./arrayWithoutHoles.js */ "./node_modules/@babel/runtime/helpers/arrayWithoutHoles.js");
+
+var iterableToArray = __webpack_require__(/*! ./iterableToArray.js */ "./node_modules/@babel/runtime/helpers/iterableToArray.js");
+
+var unsupportedIterableToArray = __webpack_require__(/*! ./unsupportedIterableToArray.js */ "./node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js");
+
+var nonIterableSpread = __webpack_require__(/*! ./nonIterableSpread.js */ "./node_modules/@babel/runtime/helpers/nonIterableSpread.js");
+
+function _toConsumableArray(arr) {
+  return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread();
+}
+
+module.exports = _toConsumableArray;
+module.exports["default"] = module.exports, module.exports.__esModule = true;
+
+/***/ }),
+
+/***/ "./node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js":
+/*!***************************************************************************!*\
+  !*** ./node_modules/@babel/runtime/helpers/unsupportedIterableToArray.js ***!
+  \***************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+var arrayLikeToArray = __webpack_require__(/*! ./arrayLikeToArray.js */ "./node_modules/@babel/runtime/helpers/arrayLikeToArray.js");
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);
+}
+
+module.exports = _unsupportedIterableToArray;
+module.exports["default"] = module.exports, module.exports.__esModule = true;
+
+/***/ }),
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /***/ "./node_modules/react-use-gesture/dist/reactusegesture.esm.js":
</span><span class="cx" style="display: block; padding: 0 10px"> /*!********************************************************************!*\
</span><span class="cx" style="display: block; padding: 0 10px">   !*** ./node_modules/react-use-gesture/dist/reactusegesture.esm.js ***!
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -10595,36 +10675,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /***/ }),
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/***/ "./src/components/add-to-favorite-button/index.js":
-/*!********************************************************!*\
-  !*** ./src/components/add-to-favorite-button/index.js ***!
-  \********************************************************/
-/*! exports provided: default */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
-/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
-/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__);
-
-
-/**
- * External dependencies
- */
-
-
-var AddToFavoriteButton = function AddToFavoriteButton() {
-  return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("button", {
-    className: "button"
-  }, Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__["__"])('Add to favorites', 'wporg-patterns'));
-};
-
-/* harmony default export */ __webpack_exports__["default"] = (AddToFavoriteButton);
-
-/***/ }),
-
</del><span class="cx" style="display: block; padding: 0 10px"> /***/ "./src/components/category-context-bar/index.js":
</span><span class="cx" style="display: block; padding: 0 10px"> /*!******************************************************!*\
</span><span class="cx" style="display: block; padding: 0 10px">   !*** ./src/components/category-context-bar/index.js ***!
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -10634,7 +10684,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> "use strict";
</span><span class="cx" style="display: block; padding: 0 10px"> __webpack_require__.r(__webpack_exports__);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "../../../../node_modules/@babel/runtime/helpers/slicedToArray.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js");
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -10835,56 +10885,24 @@
</span><span class="cx" style="display: block; padding: 0 10px">  */
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+var DefaultMenu = function DefaultMenu(_ref) {
+  var path = _ref.path,
+      options = _ref.options,
+      onClick = _ref.onClick,
+      isLoading = _ref.isLoading;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-var updateIndicatorLocation = function updateIndicatorLocation(container, _ref) {
-  var top = _ref.top,
-      left = _ref.left,
-      width = _ref.width,
-      height = _ref.height;
-
-  if (!container) {
-    return;
-  }
-
-  container.style.backgroundPositionX = "".concat(left, "px");
-  container.style.backgroundSize = "".concat(width, "px ").concat(top + height, "px");
-};
-
-var DefaultMenu = function DefaultMenu(_ref2) {
-  var path = _ref2.path,
-      options = _ref2.options,
-      onClick = _ref2.onClick,
-      isLoading = _ref2.isLoading;
-  var containerRef = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["useRef"])(null);
-  var activeRef = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["useRef"])(null);
-  Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(function () {
-    if (!containerRef || !containerRef.current || !activeRef || !activeRef.current) {
-      return;
-    }
-
-    updateIndicatorLocation(containerRef.current, {
-      top: activeRef.current.offsetTop,
-      left: activeRef.current.offsetLeft,
-      width: activeRef.current.offsetWidth,
-      height: activeRef.current.offsetHeight
-    });
-  });
-
</del><span class="cx" style="display: block; padding: 0 10px">   if (!isLoading && !options.length) {
</span><span class="cx" style="display: block; padding: 0 10px">     return null;
</span><span class="cx" style="display: block; padding: 0 10px">   }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">   return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("ul", {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-    className: "category-menu ".concat(isLoading ? 'category-menu--is-loading' : '', " "),
-    ref: containerRef
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+    className: "category-menu ".concat(isLoading ? 'category-menu--is-loading' : '', " ")
</ins><span class="cx" style="display: block; padding: 0 10px">   }, options.map(function (i) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-    var isActive = path === i.value;
</del><span class="cx" style="display: block; padding: 0 10px">     return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("li", {
</span><span class="cx" style="display: block; padding: 0 10px">       key: i.value
</span><span class="cx" style="display: block; padding: 0 10px">     }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("a", {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-      className: isActive ? 'category-menu--is-active' : '',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+      className: path === i.value ? 'category-menu--is-active' : '',
</ins><span class="cx" style="display: block; padding: 0 10px">       href: i.value,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-      ref: isActive ? activeRef : null,
</del><span class="cx" style="display: block; padding: 0 10px">       onClick: onClick
</span><span class="cx" style="display: block; padding: 0 10px">     }, i.label));
</span><span class="cx" style="display: block; padding: 0 10px">   }));
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -10933,7 +10951,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> "use strict";
</span><span class="cx" style="display: block; padding: 0 10px"> __webpack_require__.r(__webpack_exports__);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "../../../../node_modules/@babel/runtime/helpers/slicedToArray.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js");
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11114,6 +11132,106 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /***/ }),
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/***/ "./src/components/favorite-button/index.js":
+/*!*************************************************!*\
+  !*** ./src/components/favorite-button/index.js ***!
+  \*************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! classnames */ "../../../../node_modules/classnames/index.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
+/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _wordpress_core_data__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/core-data */ "@wordpress/core-data");
+/* harmony import */ var _wordpress_core_data__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_core_data__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
+/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _icons_heart_outline__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../icons/heart-outline */ "./src/components/icons/heart-outline.js");
+/* harmony import */ var _icons_heart_filled__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../icons/heart-filled */ "./src/components/icons/heart-filled.js");
+/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../store */ "./src/store/index.js");
+
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+
+
+var FavoriteButton = function FavoriteButton(_ref) {
+  var _ref$showLabel = _ref.showLabel,
+      showLabel = _ref$showLabel === void 0 ? true : _ref$showLabel,
+      patternId = _ref.patternId;
+
+  var _useSelect = Object(_wordpress_data__WEBPACK_IMPORTED_MODULE_4__["useSelect"])(function (select) {
+    // Fetch favorites so that the state is synced.
+    select(_store__WEBPACK_IMPORTED_MODULE_7__["store"]).getFavorites();
+    return {
+      // canUser defaults to adding `/wp/v2/` prefix, so we need to backtrack up the path.
+      hasPermission: !!select(_wordpress_core_data__WEBPACK_IMPORTED_MODULE_3__["store"]).canUser('create', '../../wporg/v1/pattern-favorites'),
+      isFavorite: select(_store__WEBPACK_IMPORTED_MODULE_7__["store"]).isFavorite(patternId)
+    };
+  }),
+      hasPermission = _useSelect.hasPermission,
+      isFavorite = _useSelect.isFavorite;
+
+  var _useDispatch = Object(_wordpress_data__WEBPACK_IMPORTED_MODULE_4__["useDispatch"])(_store__WEBPACK_IMPORTED_MODULE_7__["store"]),
+      addFavorite = _useDispatch.addFavorite,
+      removeFavorite = _useDispatch.removeFavorite;
+
+  var onClick = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["useCallback"])(function () {
+    if (isFavorite) {
+      removeFavorite(patternId);
+    } else {
+      addFavorite(patternId);
+    }
+  }, [isFavorite]);
+
+  if (!hasPermission) {
+    return null;
+  }
+
+  var buttonClasses = classnames__WEBPACK_IMPORTED_MODULE_1___default()('button button-link pattern__favorite-button', {
+    'is-favorited': isFavorite,
+    'has-label': showLabel
+  });
+  var labelClasses = classnames__WEBPACK_IMPORTED_MODULE_1___default()({
+    'screen-reader-text': !showLabel
+  });
+  return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("button", {
+    className: buttonClasses,
+    onClick: onClick
+  }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_icons_heart_filled__WEBPACK_IMPORTED_MODULE_6__["default"], {
+    className: "pattern__favorite-filled"
+  }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_icons_heart_outline__WEBPACK_IMPORTED_MODULE_5__["default"], {
+    className: "pattern__favorite-outline"
+  }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("span", {
+    className: labelClasses
+  }, isFavorite ? Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__["__"])('Remove from favorites', 'wporg-patterns') : Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__["__"])('Add to favorites', 'wporg-patterns')));
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (FavoriteButton);
+
+/***/ }),
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /***/ "./src/components/icons/heart-filled.js":
</span><span class="cx" style="display: block; padding: 0 10px"> /*!**********************************************!*\
</span><span class="cx" style="display: block; padding: 0 10px">   !*** ./src/components/icons/heart-filled.js ***!
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11123,7 +11241,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> "use strict";
</span><span class="cx" style="display: block; padding: 0 10px"> __webpack_require__.r(__webpack_exports__);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/extends */ "../../../../node_modules/@babel/runtime/helpers/extends.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/extends */ "./node_modules/@babel/runtime/helpers/extends.js");
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11157,7 +11275,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> "use strict";
</span><span class="cx" style="display: block; padding: 0 10px"> __webpack_require__.r(__webpack_exports__);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/extends */ "../../../../node_modules/@babel/runtime/helpers/extends.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/extends */ "./node_modules/@babel/runtime/helpers/extends.js");
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11191,11 +11309,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> "use strict";
</span><span class="cx" style="display: block; padding: 0 10px"> __webpack_require__.r(__webpack_exports__);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/extends */ "../../../../node_modules/@babel/runtime/helpers/extends.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/extends */ "./node_modules/@babel/runtime/helpers/extends.js");
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "../../../../node_modules/@babel/runtime/helpers/slicedToArray.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js");
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/objectWithoutProperties */ "../../../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babel/runtime/helpers/objectWithoutProperties */ "./node_modules/@babel/runtime/helpers/objectWithoutProperties.js");
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_3__);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11676,12 +11794,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> "use strict";
</span><span class="cx" style="display: block; padding: 0 10px"> __webpack_require__.r(__webpack_exports__);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "../../../../node_modules/@babel/runtime/helpers/slicedToArray.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js");
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _copy_pattern_button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../copy-pattern-button */ "./src/components/copy-pattern-button/index.js");
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _add_to_favorite_button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../add-to-favorite-button */ "./src/components/add-to-favorite-button/index.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _favorite_button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../favorite-button */ "./src/components/favorite-button/index.js");
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _copy_success_message__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./copy-success-message */ "./src/components/pattern-preview-actions/copy-success-message.js");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _copy_guide__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./copy-guide */ "./src/components/pattern-preview-actions/copy-guide.js");
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11700,7 +11818,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-var PatternPreviewActions = function PatternPreviewActions() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+var PatternPreviewActions = function PatternPreviewActions(_ref) {
+  var patternId = _ref.patternId;
+
</ins><span class="cx" style="display: block; padding: 0 10px">   var _useState = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useState"])(false),
</span><span class="cx" style="display: block; padding: 0 10px">       _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(_useState, 2),
</span><span class="cx" style="display: block; padding: 0 10px">       showSuccess = _useState2[0],
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11715,7 +11835,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">     onSuccess: function onSuccess() {
</span><span class="cx" style="display: block; padding: 0 10px">       return setShowSuccess(true);
</span><span class="cx" style="display: block; padding: 0 10px">     }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-  }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_add_to_favorite_button__WEBPACK_IMPORTED_MODULE_3__["default"], null), showSuccess && Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_copy_success_message__WEBPACK_IMPORTED_MODULE_4__["default"], {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_favorite_button__WEBPACK_IMPORTED_MODULE_3__["default"], {
+    patternId: patternId
+  }), showSuccess && Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_copy_success_message__WEBPACK_IMPORTED_MODULE_4__["default"], {
</ins><span class="cx" style="display: block; padding: 0 10px">     onClick: function onClick() {
</span><span class="cx" style="display: block; padding: 0 10px">       return setShowGuide(true);
</span><span class="cx" style="display: block; padding: 0 10px">     }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11781,9 +11903,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> "use strict";
</span><span class="cx" style="display: block; padding: 0 10px"> __webpack_require__.r(__webpack_exports__);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/extends */ "../../../../node_modules/@babel/runtime/helpers/extends.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/extends */ "./node_modules/@babel/runtime/helpers/extends.js");
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/objectWithoutProperties */ "../../../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/objectWithoutProperties */ "./node_modules/@babel/runtime/helpers/objectWithoutProperties.js");
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_2__);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11855,7 +11977,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> "use strict";
</span><span class="cx" style="display: block; padding: 0 10px"> __webpack_require__.r(__webpack_exports__);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "../../../../node_modules/@babel/runtime/helpers/slicedToArray.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js");
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11939,7 +12061,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> "use strict";
</span><span class="cx" style="display: block; padding: 0 10px"> __webpack_require__.r(__webpack_exports__);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "../../../../node_modules/@babel/runtime/helpers/slicedToArray.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js");
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12028,7 +12150,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> "use strict";
</span><span class="cx" style="display: block; padding: 0 10px"> __webpack_require__.r(__webpack_exports__);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "../../../../node_modules/@babel/runtime/helpers/slicedToArray.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js");
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12038,10 +12160,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _icons_heart_outline__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../icons/heart-outline */ "./src/components/icons/heart-outline.js");
-/* harmony import */ var _icons_heart_filled__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../icons/heart-filled */ "./src/components/icons/heart-filled.js");
-/* harmony import */ var _canvas__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./canvas */ "./src/components/pattern-thumbnail/canvas.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../utils */ "./src/utils/index.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _favorite_button__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../favorite-button */ "./src/components/favorite-button/index.js");
+/* harmony import */ var _canvas__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./canvas */ "./src/components/pattern-thumbnail/canvas.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../utils */ "./src/utils/index.js");
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12060,23 +12181,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><span class="cx" style="display: block; padding: 0 10px"> function PatternThumbnail(_ref) {
</span><span class="cx" style="display: block; padding: 0 10px">   var pattern = _ref.pattern;
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-  // @todo Implement a real favoriting process.
-  var _useState = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useState"])(Math.random() < 0.3),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  var _useState = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useState"])(false),
</ins><span class="cx" style="display: block; padding: 0 10px">       _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(_useState, 2),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-      isFavorite = _useState2[0],
-      setFavorite = _useState2[1];
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+      copied = _useState2[0],
+      setCopied = _useState2[1];
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-  var _useState3 = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useState"])(false),
-      _useState4 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(_useState3, 2),
-      copied = _useState4[0],
-      setCopied = _useState4[1];
-
</del><span class="cx" style="display: block; padding: 0 10px">   var handleCopy = function handleCopy() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-    var result = Object(_utils__WEBPACK_IMPORTED_MODULE_8__["copyToClipboard"])(pattern.pattern_content);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+    var result = Object(_utils__WEBPACK_IMPORTED_MODULE_7__["copyToClipboard"])(pattern.pattern_content);
</ins><span class="cx" style="display: block; padding: 0 10px">     setCopied(result);
</span><span class="cx" style="display: block; padding: 0 10px">   };
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12102,7 +12216,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">     rel: "bookmark"
</span><span class="cx" style="display: block; padding: 0 10px">   }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("span", {
</span><span class="cx" style="display: block; padding: 0 10px">     className: "screen-reader-text"
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-  }, pattern.title.rendered), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__["Disabled"], null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_canvas__WEBPACK_IMPORTED_MODULE_7__["default"], {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  }, pattern.title.rendered), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__["Disabled"], null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_canvas__WEBPACK_IMPORTED_MODULE_6__["default"], {
</ins><span class="cx" style="display: block; padding: 0 10px">     className: "pattern-grid__preview",
</span><span class="cx" style="display: block; padding: 0 10px">     html: pattern.content.rendered
</span><span class="cx" style="display: block; padding: 0 10px">   }))), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("div", {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12109,18 +12223,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">     className: "pattern-grid__actions"
</span><span class="cx" style="display: block; padding: 0 10px">   }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("h2", {
</span><span class="cx" style="display: block; padding: 0 10px">     className: "pattern-grid__title"
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-  }, pattern.title.rendered), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__["Tooltip"], {
-    text: isFavorite ? Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["__"])('Remove pattern from favorites', 'wporg-patterns') : Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["__"])('Favorite pattern', 'wporg-patterns')
-  }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("button", {
-    className: 'button button-link pattern__favorite-button' + (isFavorite ? ' is-favorited' : ''),
-    onClick: function onClick() {
-      return setFavorite(!isFavorite);
-    }
-  }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_icons_heart_filled__WEBPACK_IMPORTED_MODULE_6__["default"], {
-    className: "pattern__favorite-filled"
-  }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_icons_heart_outline__WEBPACK_IMPORTED_MODULE_5__["default"], {
-    className: "pattern__favorite-outline"
-  }))), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__["Button"], {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  }, pattern.title.rendered), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_favorite_button__WEBPACK_IMPORTED_MODULE_5__["default"], {
+    showLabel: false,
+    patternId: pattern.id
+  }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__["Button"], {
</ins><span class="cx" style="display: block; padding: 0 10px">     className: "pattern__copy-button is-small",
</span><span class="cx" style="display: block; padding: 0 10px">     isPrimary: true,
</span><span class="cx" style="display: block; padding: 0 10px">     onClick: handleCopy
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12173,7 +12279,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> "use strict";
</span><span class="cx" style="display: block; padding: 0 10px"> __webpack_require__.r(__webpack_exports__);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "../../../../node_modules/@babel/runtime/helpers/defineProperty.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js");
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12249,6 +12355,302 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /***/ }),
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/***/ "./src/components/report-pattern-button/index.js":
+/*!*******************************************************!*\
+  !*** ./src/components/report-pattern-button/index.js ***!
+  \*******************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js");
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
+/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/icons */ "../../../../node_modules/@wordpress/icons/build-module/index.js");
+/* harmony import */ var _wordpress_url__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/url */ "@wordpress/url");
+/* harmony import */ var _wordpress_url__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_url__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _report_pattern_modal__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../report-pattern-modal */ "./src/components/report-pattern-modal/index.js");
+
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+var ReportPatternButton = function ReportPatternButton(_ref) {
+  var postId = _ref.postId,
+      loggedIn = _ref.loggedIn,
+      userHasReported = _ref.userHasReported;
+
+  var _useState = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useState"])(false),
+      _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(_useState, 2),
+      showModal = _useState2[0],
+      setShowModal = _useState2[1];
+
+  var _useState3 = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useState"])(false),
+      _useState4 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(_useState3, 2),
+      hasSubmitted = _useState4[0],
+      setHasSubmitted = _useState4[1];
+
+  var alreadySubmitted = userHasReported || hasSubmitted;
+
+  if (alreadySubmitted) {
+    return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("p", {
+      className: "pattern-report-button__copy"
+    }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_icons__WEBPACK_IMPORTED_MODULE_4__["Icon"], {
+      icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_4__["check"]
+    }), Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["__"])("You've reported this pattern", 'wporg-patterns'));
+  }
+
+  if (!loggedIn) {
+    return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("p", {
+      className: "pattern-report-button__copy"
+    }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("a", {
+      href: Object(_wordpress_url__WEBPACK_IMPORTED_MODULE_5__["addQueryArgs"])('/wp-login.php', {
+        redirect_to: window.location.pathname
+      })
+    }, Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["__"])('Login to report this pattern', 'wporg-patterns')));
+  }
+
+  return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__["Button"], {
+    className: "pattern-report-button",
+    isLink: true,
+    onClick: function onClick() {
+      return setShowModal(true);
+    }
+  }, Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["__"])('Report this pattern', 'wporg-patterns')), showModal && Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_report_pattern_modal__WEBPACK_IMPORTED_MODULE_6__["default"], {
+    postId: postId,
+    onClose: function onClose(submitted) {
+      setShowModal(false);
+      setHasSubmitted(submitted);
+    }
+  }));
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (ReportPatternButton);
+
+/***/ }),
+
+/***/ "./src/components/report-pattern-modal/index.js":
+/*!******************************************************!*\
+  !*** ./src/components/report-pattern-modal/index.js ***!
+  \******************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js");
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
+/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _wordpress_a11y__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/a11y */ "@wordpress/a11y");
+/* harmony import */ var _wordpress_a11y__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_a11y__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
+/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
+/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
+/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _wordpress_api_fetch__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/api-fetch */ "@wordpress/api-fetch");
+/* harmony import */ var _wordpress_api_fetch__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_wordpress_api_fetch__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var _wordpress_url__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @wordpress/url */ "@wordpress/url");
+/* harmony import */ var _wordpress_url__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_wordpress_url__WEBPACK_IMPORTED_MODULE_7__);
+/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../store */ "./src/store/index.js");
+
+
+
+/**
+ * WordPress dependencies
+ */
+
+
+
+
+
+
+
+/**
+ * Internal dependencies
+ */
+
+
+
+var reducer = function reducer(state, action) {
+  switch (action.status) {
+    case 'submitting':
+      return {
+        isSubmitting: true
+      };
+
+    case 'submitted':
+      return {
+        isSubmitted: true
+      };
+
+    case 'error':
+      return {
+        hasError: true,
+        message: action.message
+      };
+
+    default:
+      return {};
+  }
+};
+
+var ReportPatternModal = function ReportPatternModal(_ref) {
+  var postId = _ref.postId,
+      onClose = _ref.onClose;
+
+  var _useReducer = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useReducer"])(reducer, {}),
+      _useReducer2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
+  var _useState = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useState"])(''),
+      _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(_useState, 2),
+      selectedOption = _useState2[0],
+      setOption = _useState2[1];
+
+  var _useState3 = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useState"])(''),
+      _useState4 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(_useState3, 2),
+      details = _useState4[0],
+      setDetails = _useState4[1];
+
+  var container = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["useRef"])();
+
+  var submittedText = Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["__"])('Your report has been submitted.', 'wporg-patterns');
+
+  var _useSelect = Object(_wordpress_data__WEBPACK_IMPORTED_MODULE_5__["useSelect"])(function (select) {
+    var _select = select(_store__WEBPACK_IMPORTED_MODULE_8__["store"]),
+        getPatternFlagReasons = _select.getPatternFlagReasons,
+        isLoadingPatternFlagReasons = _select.isLoadingPatternFlagReasons;
+
+    var reasons = getPatternFlagReasons() || [];
+    return {
+      isLoading: isLoadingPatternFlagReasons(),
+      mappedReasons: reasons.sort(function (a, b) {
+        return a.id - b.id;
+      }).map(function (i) {
+        // We need to convert id to string to make the RadioControl match the selected item.
+        return {
+          label: i.name,
+          value: i.id.toString()
+        };
+      })
+    };
+  }),
+      isLoading = _useSelect.isLoading,
+      mappedReasons = _useSelect.mappedReasons;
+
+  var handleSubmit = function handleSubmit(event) {
+    event.preventDefault();
+
+    if (!selectedOption || !details.length || state.isSubmitted || state.isSubmitting) {
+      return;
+    }
+
+    dispatch({
+      status: 'submitting'
+    });
+    _wordpress_api_fetch__WEBPACK_IMPORTED_MODULE_6___default()({
+      path: Object(_wordpress_url__WEBPACK_IMPORTED_MODULE_7__["addQueryArgs"])('/wp/v2/wporg-pattern-flag'),
+      method: 'POST',
+      data: {
+        parent: postId,
+        'wporg-pattern-flag-reason': selectedOption,
+        excerpt: details
+      }
+    }).then(function () {
+      dispatch({
+        status: 'submitted'
+      });
+      Object(_wordpress_a11y__WEBPACK_IMPORTED_MODULE_2__["speak"])(submittedText);
+      container.current.closest('[role="dialog"]').focus();
+    }).catch(function (err) {
+      dispatch({
+        status: 'error',
+        message: err.message
+      });
+      Object(_wordpress_a11y__WEBPACK_IMPORTED_MODULE_2__["speak"])(Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["sprintf"])(
+      /* translators: %s: Error message. */
+      Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["__"])('Error: %s', 'wporg-patterns'), err.message));
+    });
+  };
+
+  var handleClose = function handleClose() {
+    onClose(state.isSubmitted);
+  };
+
+  var renderView = function renderView() {
+    if (isLoading) {
+      return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__["Spinner"], null);
+    }
+
+    if (state.isSubmitted) {
+      return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("p", {
+        className: "pattern-report-modal__copy"
+      }, submittedText);
+    }
+
+    return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("form", {
+      onSubmit: handleSubmit
+    }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__["RadioControl"], {
+      className: "pattern-report-modal__radio",
+      label: Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["__"])('Please choose a reason:', 'wporg-patterns'),
+      selected: selectedOption,
+      options: mappedReasons,
+      onChange: setOption,
+      required: true
+    }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__["TextareaControl"], {
+      label: "Please provide details (required)",
+      value: details,
+      onChange: setDetails,
+      required: true
+    }), state.hasError && Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("div", {
+      className: "notice notice-large notice-alt notice-error"
+    }, state.message), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("div", {
+      className: "pattern-report-modal__actions"
+    }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__["Button"], {
+      isSecondary: true,
+      onClick: handleClose
+    }, Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["__"])('Cancel', 'wporg-patterns')), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__["Button"], {
+      type: "submit",
+      isBusy: state.isSubmitting,
+      isPrimary: true
+    }, state.isSubmitting ? Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["__"])('Submitting …', 'wporg-patterns') : Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["__"])('Report', 'wporg-patterns'))));
+  };
+
+  return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__["Modal"], {
+    className: "pattern-report-modal ".concat(!state.isSubmitted ? 'pattern-report-modal__has-fixed-height' : ''),
+    title: Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__["__"])('Report this pattern', 'wporg-patterns'),
+    onRequestClose: handleClose
+  }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_1__["createElement"])("div", {
+    ref: container
+  }, renderView()));
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (ReportPatternModal);
+
+/***/ }),
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /***/ "./src/hooks/index.js":
</span><span class="cx" style="display: block; padding: 0 10px"> /*!****************************!*\
</span><span class="cx" style="display: block; padding: 0 10px">   !*** ./src/hooks/index.js ***!
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12278,9 +12680,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> __webpack_require__.r(__webpack_exports__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RouteProvider", function() { return RouteProvider; });
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "useRoute", function() { return useRoute; });
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "../../../../node_modules/@babel/runtime/helpers/defineProperty.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js");
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "../../../../node_modules/@babel/runtime/helpers/slicedToArray.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js");
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_2__);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12392,7 +12794,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _components_pattern_preview__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/pattern-preview */ "./src/components/pattern-preview/index.js");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _components_pattern_preview_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/pattern-preview-actions */ "./src/components/pattern-preview-actions/index.js");
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _components_patterns__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/patterns */ "./src/components/patterns/index.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _components_report_pattern_button__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/report-pattern-button */ "./src/components/report-pattern-button/index.js");
+/* harmony import */ var _components_patterns__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/patterns */ "./src/components/patterns/index.js");
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12405,6 +12808,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px">  // Load the preview into any awaiting preview container.
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> var previewContainers = document.querySelectorAll('.pattern-preview__container');
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12429,7 +12833,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> var gridContainer = document.getElementById('patterns__container');
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> if (gridContainer) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-  Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["render"])(Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_components_patterns__WEBPACK_IMPORTED_MODULE_3__["default"], null), gridContainer);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["render"])(Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_components_patterns__WEBPACK_IMPORTED_MODULE_4__["default"], null), gridContainer);
</ins><span class="cx" style="display: block; padding: 0 10px"> } // Load the pattern preview actions
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12436,7 +12840,24 @@
</span><span class="cx" style="display: block; padding: 0 10px"> var patternActionsContainer = document.getElementById('pattern-actions');
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> if (patternActionsContainer) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-  Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["render"])(Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_components_pattern_preview_actions__WEBPACK_IMPORTED_MODULE_2__["default"], null), patternActionsContainer);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["render"])(Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_components_pattern_preview_actions__WEBPACK_IMPORTED_MODULE_2__["default"], {
+    patternId: Number(patternActionsContainer.dataset.id)
+  }), patternActionsContainer);
+} // Load report button
+
+
+var patternReportContainer = document.getElementById('pattern-report');
+
+if (patternReportContainer) {
+  var _patternReportContain = patternReportContainer.dataset,
+      loggedIn = _patternReportContain.loggedIn,
+      postId = _patternReportContain.postId,
+      userHasReported = _patternReportContain.userHasReported;
+  Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["render"])(Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_components_report_pattern_button__WEBPACK_IMPORTED_MODULE_3__["default"], {
+    userHasReported: userHasReported === 'true',
+    loggedIn: loggedIn === 'true',
+    postId: postId
+  }), patternReportContainer);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /***/ }),
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12445,7 +12866,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /*!******************************!*\
</span><span class="cx" style="display: block; padding: 0 10px">   !*** ./src/store/actions.js ***!
</span><span class="cx" style="display: block; padding: 0 10px">   \******************************/
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/*! exports provided: fetchPatterns, loadPatterns, setCurrentQuery, fetchCategories, loadCategories */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/*! exports provided: fetchPatterns, loadPatterns, setCurrentQuery, fetchCategories, loadCategories, fetchPatternFlagReasons, loadPatternFlagReasons, loadFavorites, addFavorite, removeFavorite */
</ins><span class="cx" style="display: block; padding: 0 10px"> /***/ (function(module, __webpack_exports__, __webpack_require__) {
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> "use strict";
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12455,7 +12876,25 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "setCurrentQuery", function() { return setCurrentQuery; });
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "fetchCategories", function() { return fetchCategories; });
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "loadCategories", function() { return loadCategories; });
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "fetchPatternFlagReasons", function() { return fetchPatternFlagReasons; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "loadPatternFlagReasons", function() { return loadPatternFlagReasons; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "loadFavorites", function() { return loadFavorites; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "addFavorite", function() { return addFavorite; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "removeFavorite", function() { return removeFavorite; });
+/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/regenerator */ "@babel/runtime/regenerator");
+/* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _wordpress_data_controls__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/data-controls */ "@wordpress/data-controls");
+/* harmony import */ var _wordpress_data_controls__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data_controls__WEBPACK_IMPORTED_MODULE_1__);
+
+
+var _marked = /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.mark(addFavorite),
+    _marked2 = /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.mark(removeFavorite);
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * WordPress dependencies
+ */
+
+/**
</ins><span class="cx" style="display: block; padding: 0 10px">  * Get the action object signalling that patterns have been requested.
</span><span class="cx" style="display: block; padding: 0 10px">  *
</span><span class="cx" style="display: block; padding: 0 10px">  * @param {string} query Search string.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12462,6 +12901,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">  *
</span><span class="cx" style="display: block; padding: 0 10px">  * @return {Object} Action object.
</span><span class="cx" style="display: block; padding: 0 10px">  */
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> function fetchPatterns(query) {
</span><span class="cx" style="display: block; padding: 0 10px">   return {
</span><span class="cx" style="display: block; padding: 0 10px">     type: 'FETCH_BLOCK_PATTERNS',
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12521,7 +12961,131 @@
</span><span class="cx" style="display: block; padding: 0 10px">     categories: categories
</span><span class="cx" style="display: block; padding: 0 10px">   };
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Get the action object signalling that pattern flag reasons have been requested.
+ *
+ * @return {Object} Action object.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+function fetchPatternFlagReasons() {
+  return {
+    type: 'FETCH_PATTERN_FLAG_REASONS'
+  };
+}
+/**
+ * Get the action object signalling that pattern flag reasons have been loaded.
+ *
+ * @param {Array} reasons A list of reasons.
+ * @return {Object} Action object.
+ */
+
+function loadPatternFlagReasons(reasons) {
+  return {
+    type: 'LOAD_PATTERN_FLAG_REASONS',
+    reasons: reasons
+  };
+}
+/**
+ * Get the action object signalling that the favorites list has been loaded.
+ *
+ * @param {number[]} patternIds A list of pattern IDs.
+ *
+ * @return {Object} Action object.
+ */
+
+function loadFavorites(patternIds) {
+  return {
+    type: 'LOAD_FAVORITES',
+    patternIds: patternIds
+  };
+}
+/**
+ * Get the action object to favorite a pattern.
+ *
+ * @param {number} patternId The pattern to favorite.
+ *
+ * @return {Object} Action object.
+ */
+
+function addFavorite(patternId) {
+  var success;
+  return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.wrap(function addFavorite$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return Object(_wordpress_data_controls__WEBPACK_IMPORTED_MODULE_1__["apiFetch"])({
+            path: '/wporg/v1/pattern-favorites',
+            method: 'POST',
+            data: {
+              id: patternId
+            }
+          });
+
+        case 2:
+          success = _context.sent;
+
+          if (!(success === true)) {
+            _context.next = 5;
+            break;
+          }
+
+          return _context.abrupt("return", {
+            type: 'ADD_FAVORITE',
+            patternId: patternId
+          });
+
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _marked);
+}
+/**
+ * Get the action object to unfavorite a pattern.
+ *
+ * @param {number} patternId The pattern to unfavorite.
+ *
+ * @return {Object} Action object.
+ */
+
+function removeFavorite(patternId) {
+  var success;
+  return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.wrap(function removeFavorite$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.next = 2;
+          return Object(_wordpress_data_controls__WEBPACK_IMPORTED_MODULE_1__["apiFetch"])({
+            path: '/wporg/v1/pattern-favorites',
+            method: 'DELETE',
+            data: {
+              id: patternId
+            }
+          });
+
+        case 2:
+          success = _context2.sent;
+
+          if (!(success === true)) {
+            _context2.next = 5;
+            break;
+          }
+
+          return _context2.abrupt("return", {
+            type: 'REMOVE_FAVORITE',
+            patternId: patternId
+          });
+
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }
+  }, _marked2);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /***/ }),
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /***/ "./src/store/index.js":
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12538,10 +13102,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_0__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_data_controls__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/data-controls */ "@wordpress/data-controls");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_data_controls__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data_controls__WEBPACK_IMPORTED_MODULE_1__);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _reducer__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./reducer */ "./src/store/reducer.js");
-/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./selectors */ "./src/store/selectors.js");
-/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./actions */ "./src/store/actions.js");
-/* harmony import */ var _resolvers__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./resolvers */ "./src/store/resolvers.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./actions */ "./src/store/actions.js");
+/* harmony import */ var _reducer__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./reducer */ "./src/store/reducer.js");
+/* harmony import */ var _resolvers__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./resolvers */ "./src/store/resolvers.js");
+/* harmony import */ var _selectors__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./selectors */ "./src/store/selectors.js");
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px">  * WordPress dependencies
</span><span class="cx" style="display: block; padding: 0 10px">  */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12569,11 +13133,11 @@
</span><span class="cx" style="display: block; padding: 0 10px">  */
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> var store = Object(_wordpress_data__WEBPACK_IMPORTED_MODULE_0__["createReduxStore"])(STORE_NAME, {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-  reducer: _reducer__WEBPACK_IMPORTED_MODULE_2__["default"],
-  selectors: _selectors__WEBPACK_IMPORTED_MODULE_3__,
-  actions: _actions__WEBPACK_IMPORTED_MODULE_4__,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  reducer: _reducer__WEBPACK_IMPORTED_MODULE_3__["default"],
+  selectors: _selectors__WEBPACK_IMPORTED_MODULE_5__,
+  actions: _actions__WEBPACK_IMPORTED_MODULE_2__,
</ins><span class="cx" style="display: block; padding: 0 10px">   controls: _wordpress_data_controls__WEBPACK_IMPORTED_MODULE_1__["controls"],
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-  resolvers: _resolvers__WEBPACK_IMPORTED_MODULE_5__
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  resolvers: _resolvers__WEBPACK_IMPORTED_MODULE_4__
</ins><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> Object(_wordpress_data__WEBPACK_IMPORTED_MODULE_0__["register"])(store);
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12583,7 +13147,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /*!******************************!*\
</span><span class="cx" style="display: block; padding: 0 10px">   !*** ./src/store/reducer.js ***!
</span><span class="cx" style="display: block; padding: 0 10px">   \******************************/
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/*! exports provided: patterns, categories, currentQuery, default */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/*! exports provided: patterns, categories, currentQuery, patternFlagReasons, favorites, default */
</ins><span class="cx" style="display: block; padding: 0 10px"> /***/ (function(module, __webpack_exports__, __webpack_require__) {
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> "use strict";
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12591,10 +13155,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "patterns", function() { return patterns; });
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "categories", function() { return categories; });
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "currentQuery", function() { return currentQuery; });
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "../../../../node_modules/@babel/runtime/helpers/defineProperty.js");
-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ "../../../../node_modules/@babel/runtime/helpers/toConsumableArray.js");
-/* harmony import */ var _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_1__);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "patternFlagReasons", function() { return patternFlagReasons; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "favorites", function() { return favorites; });
+/* harmony import */ var _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/toConsumableArray */ "./node_modules/@babel/runtime/helpers/toConsumableArray.js");
+/* harmony import */ var _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js");
+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1__);
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_2__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./utils */ "./src/store/utils.js");
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12603,7 +13169,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px">  * WordPress dependencies
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12630,6 +13196,39 @@
</span><span class="cx" style="display: block; padding: 0 10px">     queries: queries(state.queries, action)
</span><span class="cx" style="display: block; padding: 0 10px">   };
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+function byId() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var action = arguments.length > 1 ? arguments[1] : undefined;
+  var patternsById = (action.patterns || []).reduce(function (acc, cur) {
+    return _objectSpread(_objectSpread({}, acc), {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()({}, cur.id, cur));
+  }, {});
+
+  switch (action.type) {
+    case 'LOAD_BLOCK_PATTERNS':
+      return _objectSpread(_objectSpread({}, state), patternsById);
+
+    default:
+      return state;
+  }
+}
+
+function queries() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var action = arguments.length > 1 ? arguments[1] : undefined;
+  var patternIds = (action.patterns || []).map(function (_ref) {
+    var id = _ref.id;
+    return id;
+  });
+
+  switch (action.type) {
+    case 'LOAD_BLOCK_PATTERNS':
+      return _objectSpread(_objectSpread({}, state), {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()({}, action.query, [].concat(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default()(state[action.query] || []), _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default()(patternIds))));
+
+    default:
+      return state;
+  }
+}
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px">  * Reducer to track categories.
</span><span class="cx" style="display: block; padding: 0 10px">  *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12638,6 +13237,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">  * @return {Object} Updated state.
</span><span class="cx" style="display: block; padding: 0 10px">  */
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> function categories() {
</span><span class="cx" style="display: block; padding: 0 10px">   var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
</span><span class="cx" style="display: block; padding: 0 10px">   var action = arguments.length > 1 ? arguments[1] : undefined;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12653,7 +13253,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">       var sorted = (action.categories || []).sort(function (a, b) {
</span><span class="cx" style="display: block; padding: 0 10px">         return a.name.localeCompare(b.name);
</span><span class="cx" style="display: block; padding: 0 10px">       });
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-      return [Object(_utils__WEBPACK_IMPORTED_MODULE_3__["getAllCategory"])()].concat(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_1___default()(sorted));
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+      return [Object(_utils__WEBPACK_IMPORTED_MODULE_3__["getAllCategory"])()].concat(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default()(sorted));
</ins><span class="cx" style="display: block; padding: 0 10px">   }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">   return state;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12677,45 +13277,63 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">   return state;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Reducer to track pattern flag reasons.
+ *
+ * @param {Object} state Current state.
+ * @param {Object} action Dispatched action.
+ * @return {Object} Updated state.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-function byId() {
-  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+function patternFlagReasons() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
</ins><span class="cx" style="display: block; padding: 0 10px">   var action = arguments.length > 1 ? arguments[1] : undefined;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-  var patternsById = (action.patterns || []).reduce(function (acc, cur) {
-    return _objectSpread(_objectSpread({}, acc), {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()({}, cur.id, cur));
-  }, {});
</del><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">   switch (action.type) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-    case 'LOAD_BLOCK_PATTERNS':
-      return _objectSpread(_objectSpread({}, state), patternsById);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+    case 'FETCH_PATTERN_FLAG_REASONS':
+      return null;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+    case 'LOAD_PATTERN_FLAG_REASONS':
+      return _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default()(action.reasons);
+
</ins><span class="cx" style="display: block; padding: 0 10px">     default:
</span><span class="cx" style="display: block; padding: 0 10px">       return state;
</span><span class="cx" style="display: block; padding: 0 10px">   }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Reducer to track the user's favorites.
+ *
+ * @param {Object} state Current state.
+ * @param {Object} action Dispatched action.
+ * @return {Object} Updated state.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-function queries() {
-  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+function favorites() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
</ins><span class="cx" style="display: block; padding: 0 10px">   var action = arguments.length > 1 ? arguments[1] : undefined;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-  var patternIds = (action.patterns || []).map(function (_ref) {
-    var id = _ref.id;
-    return id;
-  });
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  var patternId = action.patternId;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">   switch (action.type) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-    case 'LOAD_BLOCK_PATTERNS':
-      return _objectSpread(_objectSpread({}, state), {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default()({}, action.query, [].concat(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_1___default()(state[action.query] || []), _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_1___default()(patternIds))));
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+    case 'LOAD_FAVORITES':
+      return action.patternIds;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-    default:
-      return state;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+    case 'ADD_FAVORITE':
+      return state.includes(patternId) ? state : [].concat(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default()(state), [patternId]);
+
+    case 'REMOVE_FAVORITE':
+      return state.filter(function (id) {
+        return id !== patternId;
+      });
</ins><span class="cx" style="display: block; padding: 0 10px">   }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+  return state;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><span class="cx" style="display: block; padding: 0 10px"> /* harmony default export */ __webpack_exports__["default"] = (Object(_wordpress_data__WEBPACK_IMPORTED_MODULE_2__["combineReducers"])({
</span><span class="cx" style="display: block; padding: 0 10px">   patterns: patterns,
</span><span class="cx" style="display: block; padding: 0 10px">   categories: categories,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-  currentQuery: currentQuery // favorites,
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  currentQuery: currentQuery,
+  patternFlagReasons: patternFlagReasons,
+  favorites: favorites
</ins><span class="cx" style="display: block; padding: 0 10px"> }));
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /***/ }),
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12724,7 +13342,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /*!********************************!*\
</span><span class="cx" style="display: block; padding: 0 10px">   !*** ./src/store/resolvers.js ***!
</span><span class="cx" style="display: block; padding: 0 10px">   \********************************/
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/*! exports provided: getPatternsByQuery, getCategories */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/*! exports provided: getPatternsByQuery, getCategories, getPatternFlagReasons, getFavorites */
</ins><span class="cx" style="display: block; padding: 0 10px"> /***/ (function(module, __webpack_exports__, __webpack_require__) {
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> "use strict";
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12731,6 +13349,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> __webpack_require__.r(__webpack_exports__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getPatternsByQuery", function() { return getPatternsByQuery; });
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getCategories", function() { return getCategories; });
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getPatternFlagReasons", function() { return getPatternFlagReasons; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getFavorites", function() { return getFavorites; });
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/regenerator */ "@babel/runtime/regenerator");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_url__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/url */ "@wordpress/url");
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12742,7 +13362,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> var _marked = /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.mark(getPatternsByQuery),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-    _marked2 = /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.mark(getCategories);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+    _marked2 = /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.mark(getCategories),
+    _marked3 = /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.mark(getPatternFlagReasons),
+    _marked4 = /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.mark(getFavorites);
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px">  * WordPress dependencies
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12828,7 +13450,75 @@
</span><span class="cx" style="display: block; padding: 0 10px">     }
</span><span class="cx" style="display: block; padding: 0 10px">   }, _marked2, null, [[0, 10]]);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+function getPatternFlagReasons() {
+  var results;
+  return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.wrap(function getPatternFlagReasons$(_context3) {
+    while (1) {
+      switch (_context3.prev = _context3.next) {
+        case 0:
+          _context3.prev = 0;
+          _context3.next = 3;
+          return Object(_actions__WEBPACK_IMPORTED_MODULE_3__["fetchPatternFlagReasons"])();
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+        case 3:
+          _context3.next = 5;
+          return Object(_wordpress_data_controls__WEBPACK_IMPORTED_MODULE_2__["apiFetch"])({
+            path: Object(_wordpress_url__WEBPACK_IMPORTED_MODULE_1__["addQueryArgs"])('/wp/v2/wporg-pattern-flag-reason')
+          });
+
+        case 5:
+          results = _context3.sent;
+          _context3.next = 8;
+          return Object(_actions__WEBPACK_IMPORTED_MODULE_3__["loadPatternFlagReasons"])(results);
+
+        case 8:
+          _context3.next = 12;
+          break;
+
+        case 10:
+          _context3.prev = 10;
+          _context3.t0 = _context3["catch"](0);
+
+        case 12:
+        case "end":
+          return _context3.stop();
+      }
+    }
+  }, _marked3, null, [[0, 10]]);
+}
+function getFavorites() {
+  var results;
+  return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.wrap(function getFavorites$(_context4) {
+    while (1) {
+      switch (_context4.prev = _context4.next) {
+        case 0:
+          _context4.prev = 0;
+          _context4.next = 3;
+          return Object(_wordpress_data_controls__WEBPACK_IMPORTED_MODULE_2__["apiFetch"])({
+            path: '/wporg/v1/pattern-favorites'
+          });
+
+        case 3:
+          results = _context4.sent;
+          _context4.next = 6;
+          return Object(_actions__WEBPACK_IMPORTED_MODULE_3__["loadFavorites"])(results);
+
+        case 6:
+          _context4.next = 10;
+          break;
+
+        case 8:
+          _context4.prev = 8;
+          _context4.t0 = _context4["catch"](0);
+
+        case 10:
+        case "end":
+          return _context4.stop();
+      }
+    }
+  }, _marked4, null, [[0, 8]]);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /***/ }),
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /***/ "./src/store/selectors.js":
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12835,7 +13525,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /*!********************************!*\
</span><span class="cx" style="display: block; padding: 0 10px">   !*** ./src/store/selectors.js ***!
</span><span class="cx" style="display: block; padding: 0 10px">   \********************************/
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/*! exports provided: isLoadingPatternsByQuery, getPatterns, getPatternsByQuery, getPattern, getCurrentQuery, isLoadingCategories, hasLoadedCategories, getCategories, getCategoryBySlug */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/*! exports provided: isLoadingPatternsByQuery, getPatterns, getPatternsByQuery, getPattern, getCurrentQuery, isLoadingCategories, hasLoadedCategories, getCategories, getCategoryBySlug, getPatternFlagReasons, isLoadingPatternFlagReasons, getFavorites, isFavorite */
</ins><span class="cx" style="display: block; padding: 0 10px"> /***/ (function(module, __webpack_exports__, __webpack_require__) {
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> "use strict";
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12849,7 +13539,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hasLoadedCategories", function() { return hasLoadedCategories; });
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getCategories", function() { return getCategories; });
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getCategoryBySlug", function() { return getCategoryBySlug; });
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "../../../../node_modules/@babel/runtime/helpers/slicedToArray.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getPatternFlagReasons", function() { return getPatternFlagReasons; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isLoadingPatternFlagReasons", function() { return isLoadingPatternFlagReasons; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getFavorites", function() { return getFavorites; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isFavorite", function() { return isFavorite; });
+/* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/slicedToArray */ "./node_modules/@babel/runtime/helpers/slicedToArray.js");
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./utils */ "./src/store/utils.js");
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12975,7 +13669,52 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">   return cat;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Get pattern flag reasons.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {Array} A list of pattern flag reasons.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+function getPatternFlagReasons(state) {
+  return state.patternFlagReasons;
+}
+/**
+ * Check if pattern flag reasons are loading.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {Array} A list of pattern flag reasons.
+ */
+
+function isLoadingPatternFlagReasons(state) {
+  return state.patternFlagReasons === null;
+}
+/**
+ * Get the list of favorites.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {number[]} A list of favorite pattern IDs.
+ */
+
+function getFavorites(state) {
+  return state.favorites;
+}
+/**
+ * Check if a pattern ID is in the list of favorites.
+ *
+ * @param {Object} state Global application state.
+ * @param {number} patternId The pattern to check.
+ *
+ * @return {number[]} A list of favorite pattern IDs.
+ */
+
+function isFavorite(state, patternId) {
+  return state.favorites.includes(patternId);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /***/ }),
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /***/ "./src/store/utils.js":
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12989,7 +13728,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> __webpack_require__.r(__webpack_exports__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getQueryString", function() { return getQueryString; });
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getAllCategory", function() { return getAllCategory; });
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "../../../../node_modules/@babel/runtime/helpers/defineProperty.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babel/runtime/helpers/defineProperty */ "./node_modules/@babel/runtime/helpers/defineProperty.js");
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_0__);
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_url__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/url */ "@wordpress/url");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_url__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_url__WEBPACK_IMPORTED_MODULE_1__);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -13209,6 +13948,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /***/ }),
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/***/ "@wordpress/api-fetch":
+/*!**********************************!*\
+  !*** external ["wp","apiFetch"] ***!
+  \**********************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+(function() { module.exports = window["wp"]["apiFetch"]; }());
+
+/***/ }),
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /***/ "@wordpress/components":
</span><span class="cx" style="display: block; padding: 0 10px"> /*!************************************!*\
</span><span class="cx" style="display: block; padding: 0 10px">   !*** external ["wp","components"] ***!
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -13231,6 +13981,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /***/ }),
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/***/ "@wordpress/core-data":
+/*!**********************************!*\
+  !*** external ["wp","coreData"] ***!
+  \**********************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+(function() { module.exports = window["wp"]["coreData"]; }());
+
+/***/ }),
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /***/ "@wordpress/data":
</span><span class="cx" style="display: block; padding: 0 10px"> /*!******************************!*\
</span><span class="cx" style="display: block; padding: 0 10px">   !*** external ["wp","data"] ***!
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_categorymenuscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_category-menu.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_category-menu.scss     2021-05-17 05:26:25 UTC (rev 10982)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_category-menu.scss       2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3,13 +3,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">        padding: 0;
</span><span class="cx" style="display: block; padding: 0 10px">        position: relative;
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 94%, $color__wp-blue 0);
-       background-repeat: no-repeat;
-       background-size: 0;
-       background-position-x: 0;
-       transition: all 75ms ease-out;
-       min-height: 45px;
-
</del><span class="cx" style="display: block; padding: 0 10px">         li {
</span><span class="cx" style="display: block; padding: 0 10px">                display: inline-block;
</span><span class="cx" style="display: block; padding: 0 10px">                margin: 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -18,7 +11,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        a {
</span><span class="cx" style="display: block; padding: 0 10px">                display: block;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                padding: $gutter-default / 2;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         padding: $gutter-default / 3 $gutter-default / 2;
</ins><span class="cx" style="display: block; padding: 0 10px">                 color: $color-gray-600;
</span><span class="cx" style="display: block; padding: 0 10px">                font-size: 0.875rem;
</span><span class="cx" style="display: block; padding: 0 10px">                text-decoration: none;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -31,7 +24,14 @@
</span><span class="cx" style="display: block; padding: 0 10px">        }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        li &--is-active {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                color: $color-black;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         color: $color-white;
+               background: $color__wp-blue;
+               border-radius: 2px;
+
+               &:hover,
+               &:focus {
+                       color: $color-white;
+               }
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        &__mobile {
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_componentsscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_components.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_components.scss        2021-05-17 05:26:25 UTC (rev 10982)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_components.scss  2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -30,6 +30,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> @import "pattern-grid-menu";
</span><span class="cx" style="display: block; padding: 0 10px"> @import "pattern-grid";
</span><span class="cx" style="display: block; padding: 0 10px"> @import "pattern-preview";
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@import "pattern-report-button";
+@import "pattern-report-modal";
</ins><span class="cx" style="display: block; padding: 0 10px"> @import "pattern";
</span><span class="cx" style="display: block; padding: 0 10px"> @import "search-form";
</span><span class="cx" style="display: block; padding: 0 10px"> @import "section-heading";
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_favoritebuttonscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_favorite-button.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_favorite-button.scss   2021-05-17 05:26:25 UTC (rev 10982)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_favorite-button.scss     2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -73,6 +73,12 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        left: 9px;
</span><span class="cx" style="display: block; padding: 0 10px">                }
</span><span class="cx" style="display: block; padding: 0 10px">        }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+       &[disabled] {
+               background: transparent !important;
+               text-shadow: none !important;
+               color: $color-gray-400 !important;
+       }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> @keyframes HeartBeat {
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_patternreportbuttonscss"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-report-button.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-report-button.scss                             (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-report-button.scss       2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,15 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.pattern-report-button {
+       color: $color-gray-800 !important;
+}
+
+.pattern-report-button__copy {
+       margin: 0;
+       display: flex;
+       justify-content: center;
+       align-items: center;
+
+       svg {
+               margin-right: $gutter-default / 4;
+       }
+}
+
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_patternreportmodalscss"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-report-modal.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-report-modal.scss                              (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-report-modal.scss        2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,36 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.pattern-report-modal {
+       max-width: 400px;
+       width: 100%;
+
+       @include breakpoint( $breakpoint-small ) {
+               width: 400px;
+       }
+
+       form > *:first-child {
+               padding-bottom: $gutter-default;
+       }
+}
+
+.pattern-report-modal__has-fixed-height {
+       min-height: 400px;
+}
+
+.pattern-report-modal__copy {
+       text-align: center;
+       line-height: 1.5;
+}
+
+.pattern-report-modal__actions {
+       margin-top: $gutter-default;
+       display: grid;
+       grid-template-columns: 48% 48%;
+       column-gap: 4%;
+
+       button {
+               justify-content: center;
+       }
+}
+
+.pattern-report-modal__radio .components-radio-control__option {
+       margin-top: $gutter-default / 2;
+}
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_patternscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern.scss   2021-05-17 05:26:25 UTC (rev 10982)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern.scss     2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -28,12 +28,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        .pattern-actions {
</span><span class="cx" style="display: block; padding: 0 10px">                display: flex;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                align-items: stretch;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         justify-content: flex-start;
+               align-items: center;
</ins><span class="cx" style="display: block; padding: 0 10px">                 flex-wrap: wrap;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                gap: 0.5em 2em;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                button + button {
-                       margin-left: 2em;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         button {
+                       margin: 0;
</ins><span class="cx" style="display: block; padding: 0 10px">                 }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+               @media (max-width: $breakpoint-mobile) {
+                       justify-content: center;
+               }
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        .pattern-actions__notice {
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscssstylecss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/style.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/style.css  2021-05-17 05:26:25 UTC (rev 10982)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/style.css    2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1 +1 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@charset "UTF-8";[class*=col-]{margin:inherit}.row{display:flex;flex-direction:row;flex-wrap:wrap}@media (max-width:768px){.row{flex-direction:column;flex-wrap:nowrap}}.row.gutters>.row{margin-left:-2%}@media (max-width:768px){.row.gutters>.row{margin-left:0}}.row.gutters>.row>[class*=col-]{margin-left:2%}@media (max-width:768px){.row.gutters>.row>[class*=col-]{margin-left:0}}.row.around{justify-content:space-around}.row.between{justify-content:space-between}.row.auto .col{flex-grow:1}.col-1{width:8.3333333333%}.offset-1{margin-left:8.3333333333%}.col-2{width:16.6666666667%}.offset-2{margin-left:16.6666666667%}.col-3{width:25%}.offset-3{margin-left:25%}.col-4{width:33.3333333333%}.offset-4{margin-left:33.3333333333%}.col-5{width:41.6666666667%}.offset-5{margin-left:41.6666666667%}.col-6{width:50%}.offset-6{margin-left:50%}.col-7{width:58.3333333333%}.offset-7{
 margin-left:58.3333333333%}.col-8{width:66.6666666667%}.offset-8{margin-left:66.6666666667%}.col-9{width:75%}.offset-9{margin-left:75%}.col-10{width:83.3333333333%}.offset-10{margin-left:83.3333333333%}.col-11{width:91.6666666667%}.offset-11{margin-left:91.6666666667%}.col-12{width:100%}.offset-12{margin-left:100%}.gutters>.col-1{width:6.33333%}.gutters>.col-1:nth-child(n+13){margin-top:2%}.gutters>.offset-1{margin-left:10.33333%!important}.gutters>.col-2{width:14.66667%}.gutters>.col-2:nth-child(n+7){margin-top:2%}.gutters>.offset-2{margin-left:18.66667%!important}.gutters>.col-3{width:23%}.gutters>.col-3:nth-child(n+5){margin-top:2%}.gutters>.offset-3{margin-left:27%!important}.gutters>.col-4{width:31.33333%}.gutters>.col-4:nth-child(n+4){margin-top:2%}.gutters>.offset-4{margin-left:35.33333%!important}.gutters>.col-5{width:39.66667%}.gutters>.offset-5{margin-left:43.66667%!important}.gutters>.col-6{width:48%}.gutters>.col-6:nth-chil
 d(n+3){margin-top:2%}.gutters>.offset-6{margin-left:52%!important}.gutters>.col-7{width:56.33333%}.gutters>.offset-7{margin-left:60.33333%!important}.gutters>.col-8{width:64.66667%}.gutters>.offset-8{margin-left:68.66667%!important}.gutters>.col-9{width:73%}.gutters>.offset-9{margin-left:77%!important}.gutters>.col-10{width:81.33333%}.gutters>.offset-10{margin-left:85.33333%!important}.gutters>.col-11{width:89.66667%}.gutters>.offset-11{margin-left:93.66667%!important}.gutters>.col-12{width:98%}.gutters>.offset-12{margin-left:102%!important}@media (max-width:768px){[class*=" offset-"],[class^=offset-]{margin-left:0}}.first{order:-1}.last{order:1}@media (max-width:768px){.row [class*=col-]{margin-left:0;width:100%}.row.gutters [class*=col-]{margin-bottom:16px}.first-sm{order:-1}.last-sm{order:1}}.gutters .column.push-left,.push-left{margin-right:auto}.gutters .column.push-right,.push-right{margin-left:auto}.gutters .column.push-center,
 .push-center{margin-left:auto;margin-right:auto}.gutters .column.push-middle,.push-middle{margin-top:auto;margin-bottom:auto}.push-bottom{margin-top:auto}@media (max-width:768px){.gutters .column.push-left-sm,.push-left-sm{margin-left:0}.gutters .column.push-center-sm,.push-center-sm{margin-left:auto;margin-right:auto}.push-top-sm{margin-top:0}}.align-middle{align-items:center}.align-right{justify-content:flex-end}.align-center{justify-content:center}@media (max-width:768px){.align-left-sm{justify-content:flex-start}}.float-right{float:right}.float-left{float:left}@media (max-width:768px){.float-left,.float-right{float:none}}.fixed{position:fixed;top:0;left:0;z-index:100;width:100%}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;he
 ight:0}[hidden],template{display:none}a{background-color:transparent}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webki
 t-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}optgroup{font-weight:700}table{border-spacing:0}td,th{padding:0}p{margin:1rem 0}cite,dfn,em,i{font-style:italic}blockquote{margin:0 1.5rem}address{margin:0 0 1.5rem}pre{background:#eee;font-family:Courier\ 10 Pitch,Courier,monospace;font-size:.9375rem;line-height:1.6;margin-bottom:1.6rem;max-width:100%;overflow:auto;padding:1.6rem}code,kbd,tt,var{font-family:Monaco,Consolas,Andale Mono,DejaVu Sans Mono,monospace;font-size:.9375rem}abbr,acronym{border-bottom:1px dotted #666;cursor:help}ins,mark{background:#fff9c0;text-decoration:none}big{font-size:125%}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{background:#fff}blockquote,q{quotes:"" ""}blockquote:af
 ter,blockquote:before,q:after,q:before{content:""}blockquote{border-left:2px solid #767676;color:#767676;margin:1rem 0;padding-left:.8rem}blockquote cite{font-size:.8rem}figure{margin:0}hr{background-color:#eee;border:0;height:2px;margin:5rem auto}img{height:auto;max-width:100%}h1,h2,h3,h4,h5,h6{font-family:Open Sans,sans-serif;clear:both;line-height:1.5;margin:2rem 0 1rem}.h1,h1{font-size:2.44140625rem}.h1,.h2,h1,h2{font-weight:300}.h2,h2{font-size:1.953125rem}.h3,h3{font-size:1.5625rem;font-weight:400}.h4,h4{font-size:1.25rem;color:#32373c;font-weight:600;padding:0}.h5,h5{font-size:1rem;letter-spacing:.01rem}.h5,.h6,h5,h6{font-weight:600;text-transform:uppercase}.h6,h6{font-size:.8rem;letter-spacing:.8px}a{color:#0073aa;text-decoration:none}a:active,a:focus,a:hover{text-decoration:underline}a:focus{outline:thin dotted}a:active,a:hover{outline:0}li>a,p a{text-decoration:underline}li>a:hover,p a:hover{color:#d54e21}ol,ul{margin:0 0 1.5em 1.5em;padding:0}ul{list-style
 :square}ol{list-style:decimal}ol.unmarked-list,ul.unmarked-list{list-style:none;padding-left:0}li>ol,li>ul{margin-bottom:0}dt{font-weight:700}dd{margin:0 1.5em 1.5em}table{border:1px solid #eee;border-collapse:collapse;font-size:.8rem;margin:0 0 1rem;padding:0;width:100%}table thead{background:#32373c;color:#fff}table td,table th{border:1px solid #eee;font-weight:400;margin:0;padding:.4rem;text-align:left;vertical-align:top}table tbody tr:nth-child(2n){background:#f7f7f7}html{font-size:100%}body,button,input,select,textarea{color:#32373c;font-family:Open Sans,sans-serif;font-size:100%;line-height:1.5}@media screen and (min-width:737px){html{font-size:1.125rem}}.custom-select{display:inline-block;box-sizing:border-box;padding:.5rem 2rem .5rem .8rem;width:auto;font-size:1em;line-height:1.3;border:1px solid #6c7782;box-shadow:none;border-radius:.5em;-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:transparent;background-image:url('data:image/svg+xml;c
 harset=US-ASCII,%3Csvg width="14" height="8" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M2 0L7 5L12 0L14 1L7 8L0 1L2 0Z" fill="%23555D66"/%3E%3C/svg%3E%0A');background-repeat:no-repeat;background-position:right .7em top 50%;background-size:.65em auto}.custom-select::-ms-expand{display:none}.custom-select:focus{box-shadow:0 0 1px 3px rgba(59,153,252,.7);box-shadow:0 0 0 3px -moz-mac-focusring;color:#222;outline:none}.custom-select option{font-weight:400}html{font-size:1rem}@media screen and (min-width:737px){html{font-size:1rem}}.screen-reader-text{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px}.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;color:#21759b;display:block;font-size:.875rem;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-in
 dex:100000}.site-content[tabindex="-1"]:focus{outline:0}.no-js .hide-if-no-js{display:none}.alignleft{display:inline;float:left;margin-right:1.5em}.alignright{display:inline;float:right;margin-left:1.5em}.aligncenter{clear:both;display:block;margin-left:auto;margin-right:auto}@media screen and (max-width:480px){.alignleft,.alignright{display:block;float:none;margin-left:auto;margin-right:auto}}.button,.button-primary,.button-secondary,.plugin-upload-form .button-primary{border:1px solid;border-radius:3px;box-sizing:border-box;cursor:pointer;display:inline-block;font-size:.8rem;height:1.5625rem;line-height:1;margin:0;padding:0 .8rem;text-decoration:none;white-space:nowrap;-webkit-appearance:none}button::-moz-focus-inner,input[type=button]::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{border:0;padding:0}.button-group.button-xl .button,.button.button-xl{font-size:1rem;height:2.44140625rem;line-height:1;padding:0 1.5rem}.button-grou
 p.button-large .button,.button.button-large{height:1.953125rem;line-height:1;padding:0 1rem}.button-group.button-small .button,.button.button-small{font-size:.64rem;height:1.25rem;line-height:1;padding:0 .5rem}a.button,a.button-primary,a.button-secondary{line-height:1.5625rem}.button-group.button-large a.button,a.button.button-large{line-height:1.953125rem}.button-group.button-xl a.button,a.button.button-xl{line-height:2.44140625rem}.button-group.button-small a.button,a.button.button-small{line-height:1.25rem}.button:active,.button:focus{outline:none}.button.hidden{display:none}input[type=reset],input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{background:none;border:none;box-shadow:none;padding:0 2px 1px;width:auto}.button,.button-secondary,.button:visited{background:#f7f7f7;border-color:#ccc;box-shadow:0 1px 0 #ccc;color:#555;vertical-align:top}p .button{vertical-align:baseline}.button-secondary:focus,.button-secondary:hover,.button.focus,.button.hover,.butt
 on:focus,.button:hover{background:#fafafa;border-color:#999;color:#23282d}.button-link:focus,.button-secondary:focus,.button.focus,.button:focus{border-color:#5b9dd9;box-shadow:0 0 3px rgba(0,115,170,.8)}.button-secondary:active,.button.active,.button.active:hover,.button:active{background:#eee;border-color:#999;box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5);transform:translateY(1px)}.button.active:focus{border-color:#5b9dd9;box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5),0 0 3px rgba(0,115,170,.8)}.button-disabled,.button-secondary.disabled,.button-secondary:disabled,.button-secondary[disabled],.button.disabled,.button:disabled,.button[disabled]{background:#f7f7f7!important;border-color:#ddd!important;box-shadow:none!important;color:#a0a5aa!important;cursor:default;text-shadow:0 1px 0 #fff!important;transform:none!important}.button-link,input[type=submit].button-link{background:none;border:0;border-radius:0;box-shadow:none;cursor:pointer;margin:0;outline:none;padding:0}.button-link:
 focus{outline:1px solid #5b9dd9}.button-primary,.download-button,.plugin-upload-form .button-primary{text-decoration:none;text-shadow:0 -1px 1px #006799,1px 0 1px #006799,0 1px 1px #006799,-1px 0 1px #006799}.button-primary,.button-primary:visited,.download-button,.download-button:visited,.plugin-upload-form .button-primary,.plugin-upload-form .button-primary:visited{background:#0085ba;border-color:#0073aa #006799 #006799;box-shadow:0 1px 0 #006799;color:#fff}.button-primary.focus,.button-primary.hover,.button-primary:focus,.button-primary:hover,.download-button.focus,.download-button.hover,.download-button:focus,.download-button:hover,.plugin-upload-form .button-primary.focus,.plugin-upload-form .button-primary.hover,.plugin-upload-form .button-primary:focus,.plugin-upload-form .button-primary:hover{background:#008ec2;border-color:#006799;box-shadow:0 1px 0 #006799;color:#fff}.button-primary.focus,.button-primary:focus,.download-button.focus,.download-button:focus,.plugin-upload-fo
 rm .button-primary.focus,.plugin-upload-form .button-primary:focus{box-shadow:0 1px 0 #0073aa,0 0 2px 1px #33b3db}.button-primary.active,.button-primary.active:focus,.button-primary.active:hover,.button-primary:active,.download-button.active,.download-button.active:focus,.download-button.active:hover,.download-button:active,.plugin-upload-form .button-primary.active,.plugin-upload-form .button-primary.active:focus,.plugin-upload-form .button-primary.active:hover,.plugin-upload-form .button-primary:active{background:#0073aa;border-color:#006799;box-shadow:inset 0 2px 0 #006799;vertical-align:top}.button-primary.disabled,.button-primary:disabled,.button-primary[disabled],.download-button.disabled,.download-button:disabled,.download-button[disabled],.plugin-upload-form .button-primary.disabled,.plugin-upload-form .button-primary:disabled,.plugin-upload-form .button-primary[disabled]{background:#008ec2!important;border-color:#007cb2!important;box-shadow:none!important;color:#66c6e4!impo
 rtant;cursor:default;text-shadow:0 -1px 0 rgba(0,0,0,.1)!important}.button-primary.button.button-hero,.download-button.button.button-hero,.plugin-upload-form .button-primary.button.button-hero{box-shadow:0 2px 0 #006799}.button-primary.button.button-hero.active,.button-primary.button.button-hero.active:focus,.button-primary.button.button-hero.active:hover,.button-primary.button.button-hero:active,.download-button.button.button-hero.active,.download-button.button.button-hero.active:focus,.download-button.button.button-hero.active:hover,.download-button.button.button-hero:active,.plugin-upload-form .button-primary.button.button-hero.active,.plugin-upload-form .button-primary.button.button-hero.active:focus,.plugin-upload-form .button-primary.button.button-hero.active:hover,.plugin-upload-form .button-primary.button.button-hero:active{box-shadow:inset 0 3px 0 #006799}.button-primary-disabled{background:#008ec2!important;border-color:#007cb2!important;box-shadow:none!important;color:#66
 c6e4!important;cursor:default;text-shadow:0 -1px 0 rgba(0,0,0,.1)!important}.button-group{display:inline-block;font-size:0;position:relative;vertical-align:middle;white-space:nowrap}.button-group>.button{border-radius:0;display:inline-block;margin-right:-1px;z-index:10}.button-group>.button-primary{z-index:100}.button-group>.button:hover{z-index:20}.button-group>.button:first-child{border-radius:3px 0 0 3px}.button-group>.button:last-child{border-radius:0 3px 3px 0}.button-group>.button:focus{position:relative;z-index:1}@media screen and (max-width:737px){.button,.button.button-large,.button.button-small,.plugin-upload-form .button-primary{font-size:14px;height:auto;line-height:normal;margin-bottom:4px;padding:6px 14px;vertical-align:middle}}.clear:after,.clear:before,.comment-content:after,.comment-content:before,.entry-content:after,.entry-content:before,.home-below:after,.home-below:before,.site-content:after,.site-content:before,.site-footer:after,.site-footer:
 before,.site-header:after,.site-header:before{content:"";display:table;table-layout:fixed}.clear:after,.comment-content:after,.entry-content:after,.home-below:after,.site-content:after,.site-footer:after,.site-header:after{clear:both}p.subheading{color:#82878c;font-weight:300;margin:-.4rem auto 2rem;text-align:center}p.intro,p.subheading{font-size:1.25rem}p.aside{font-size:.8rem}p.note{font-size:.64rem;letter-spacing:.01rem;max-width:18.1898940355rem}input,textarea{box-sizing:border-box}input[type=checkbox],input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=radio],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{background-color:#fff;border:1px solid #ddd;box-shadow:inset 0 1px 2px rgba(0,0,0,.07);color:#32373c;outline:none;transition:border-color .05s ease-in-out}input[type=checkbox]:foc
 us,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#5b9dd9;box-shadow:0 0 2px rgba(30,140,190,.8)}input[type=email],input[type=url]{direction:ltr}input[type=number]{height:28px;line-height:inherit}input[type=checkbox],input[type=radio]{background:#fff;border:1px solid #b4b9be;box-shadow:inset 0 1px 2px rgba(0,0,0,.1);clear:none;color:#555;cursor:pointer;display:inline-block;height:16px;line-height:0;margin:-4px 4px 0 0;min-width:16px;outline:0;padding:0!important;text-align:center;transition:border-color .05s ease-in-out;vertical-align:middle;width:16px;-webkit-appearance:none}input[type=checkbox]:checked:before,input[type=radi
 o]:checked:before{display:inline-block;float:left;font:normal 21px/1 dashicons;vertical-align:middle;width:16px;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=checkbox].disabled,input[type=checkbox].disabled:checked:before,input[type=checkbox]:disabled,input[type=checkbox]:disabled:checked:before,input[type=radio].disabled,input[type=radio].disabled:checked:before,input[type=radio]:disabled,input[type=radio]:disabled:checked:before{opacity:.7}input[type=checkbox]:checked:before{color:#1e8cbe;content:"";margin:-3px 0 0 -4px}input[type=radio]{border-radius:50%;line-height:10px;margin-right:4px}input[type=radio]:checked+label:before{color:#82878c}input[type=radio]:checked:before{background-color:#1e8cbe;border-radius:50px;content:"•";font-size:24px;height:6px;line-height:16px;margin:4px;text-indent:-9999px;width:6px}input[type=reset]:active,input[type=reset]:hover{color:#00a0d2}input[type=search]{-webkit-appearance:te
 xtfield}input[type=search]::-webkit-search-decoration{display:none}button,input,select,textarea{font-family:inherit;font-size:inherit;font-weight:inherit}input,select,textarea{border-radius:0;font-size:14px;padding:3px 5px}textarea{line-height:1.4;overflow:auto;padding:2px 6px;resize:vertical}textarea.code{line-height:1.4;padding:4px 6px 1px}label{cursor:pointer;vertical-align:middle}input,select{margin:1px;padding:3px 5px}input.code{padding-top:6px}input.readonly,input[readonly],textarea.readonly,textarea[readonly]{background-color:#eee}.wp-core-ui :-moz-placeholder,:-moz-placeholder{color:#a9a9a9}input.disabled,input:disabled,select.disabled,select:disabled,textarea.disabled,textarea:disabled{background:hsla(0,0%,100%,.5);border-color:hsla(0,0%,87.1%,.75);box-shadow:inset 0 1px 2px rgba(0,0,0,.04);color:rgba(51,51,51,.5)}input[type=file].disabled,input[type=file]:disabled,input[type=range].disabled,input[type=range]:disabled{background:none;box-shadow:none}input.large-text,textare
 a.large-text{width:99%}input.regular-text{width:25em}input.small-text{padding:1px 6px;width:50px}input[type=number].small-text{width:65px}input.tiny-text{width:35px}input[type=number].tiny-text{width:45px}@media screen and (max-width:782px){textarea{-webkit-appearance:none}input[type=email],input[type=number],input[type=password],input[type=search],input[type=text]{-webkit-appearance:none;padding:6px 10px}input[type=number]{height:40px}input.code{padding-bottom:5px;padding-top:10px}input[type=checkbox]{-webkit-appearance:none;padding:10px}input[type=checkbox]:checked:before{font:normal 30px/1 dashicons;margin:-3px -5px}input[type=checkbox],input[type=radio]{height:25px;width:25px}input[type=radio]:checked:before{vertical-align:middle;width:9px;height:9px;margin:7px;line-height:16px}input,textarea{font-size:16px}input[type=number].small-text,input[type=password].small-text,input[type=search].small-text,input[type=text].small-text{width:auto;max-width:55px;display:inline;padding:3px 6
 px;margin:0 3px}input.regular-text{width:100%}label{font-size:14px}fieldset label{display:block}}a.button:active,a.button:focus,a.button:hover{text-decoration:none}.notice{background:#fff;border-left:4px solid #fff;box-shadow:0 1px 1px 0 rgba(0,0,0,.1);margin:1em 0;padding:1px 12px}.notice p{font-size:.8rem;margin:.5em 0;padding:2px}.notice.notice-alt{box-shadow:none}.notice.notice-large{padding:10px 20px}.notice.notice-success{border-left-color:#46b450}.notice.notice-success.notice-alt{background-color:#ecf7ed}.notice.notice-warning{border-left-color:#ffb900}.notice.notice-warning.notice-alt{background-color:#fff8e5}.notice.notice-error{border-left-color:#dc3232}.notice.notice-error.notice-alt{background-color:#fbeaea}.notice.notice-info{border-left-color:#00a0d2}.notice.notice-info.notice-alt{background-color:#e5f5fa}.error-404 .page-content,.error-404 .page-title{text-align:center}.error-404 .page-content .logo-swing{height:10rem;margin:6rem auto;position:relative;text-align:cent
 er;width:10rem}.error-404 .page-content .logo-swing .wp-logo{left:0;max-width:none;position:absolute;top:0;width:10rem}@keyframes hinge{10%{width:180px;height:180px;transform:rotate(0deg)}15%{width:185px;height:185px;transform:rotate(0deg)}20%{width:180px;height:180px;transform:rotate(5deg)}40%{transform-origin:top left;animation-timing-function:ease-in-out}60%{transform:rotate(40deg);transform-origin:top left;animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);transform-origin:top left;animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0,700px,0);opacity:0}}.hinge{animation-duration:2s;animation-name:hinge}.comments-area{margin-top:5em}.comments-area>:last-child{margin-bottom:0}.comments-area .comment-list+.comment-respond{border-top:1px solid #eaeaea}.comments-area .comment-list+.comment-respond,.comments-area .comment-navigation+.comment-respond{padding-top:1.6em}.comments-area .comments-title{margin-bottom:1.3333em}.comments-area .comme
 nt-list{list-style:none;margin:0}.comments-area .comment-list .pingback,.comments-area .comment-list .trackback,.comments-area .comment-list article{border-top:1px solid #eaeaea;padding:1.6em 0}.comments-area .comment-list article:not(:only-child){padding-bottom:0}.comments-area .comment-list article+.comment-respond{padding-bottom:1.6em}.comments-area .comment-list .children{list-style:none;margin:0}.comments-area .comment-list .children>li{padding-left:.8em}.comments-area .comment-list .alt{background:none}.comments-area .comment-author{color:#999;margin-bottom:.4em}.comments-area .comment-author .avatar{float:left;height:24px;margin-right:.8em;width:24px}.comments-area .comment-metadata,.comments-area .pingback .edit-link{color:#999;line-height:1.5}.comments-area .comment-metadata a,.comments-area .pingback .edit-link a{color:#777}.comments-area .comment-metadata{font-size:.8rem;margin-bottom:1.6em}.comments-area .comment-metadata .edit-link,.comments-area .pingback .edit-link
 {margin-left:1em}.comments-area .pingback .edit-link:before{top:5px}.comments-area .comment-content ol,.comments-area .comment-content ul{margin:0 0 1.6em 1.3333em}.comments-area .comment-content>:last-child,.comments-area .comment-content li>ol,.comments-area .comment-content li>ul{margin-bottom:0}.comments-area .comment-content .reply{font-size:12px}.comments-area .comment-content .reply a{border:1px solid #eaeaea;color:#707070;display:inline-block;font-weight:700;line-height:1;margin-top:2em;padding:.4167em .8333em;text-transform:uppercase}.comments-area .comment-content .reply a:focus,.comments-area .comment-content .reply a:hover{border-color:#333;color:#333;outline:0}.comments-area .comment-reply-title a{font-weight:inherit}.comments-area .comment-form label{font-size:.8rem;font-weight:700;display:block;letter-spacing:.04em;line-height:1.5}.comments-area .comment-form input[type=email],.comments-area .comment-form input[type=text],.comments-area .comment-form input[ty
 pe=url],.comments-area .comment-form textarea{width:100%}.comments-area .comment-awaiting-moderation,.comments-area .comment-notes,.comments-area .form-allowed-tags,.comments-area .logged-in-as{font-size:1rem;line-height:1.5;margin-bottom:2em}.comments-area .no-comments{border-top:1px solid #eaeaea;color:#999;font-weight:700;padding-top:1.6em}.comments-area .comment-navigation+.no-comments{border-top:0}.comments-area .form-allowed-tags code{font-family:Inconsolata,monospace}.comments-area .form-submit{margin-bottom:0}.comments-area .required{color:#c0392b}.entry-content{hyphens:auto;word-wrap:break-word}.entry-content>p:first-child{margin-top:0}.entry-content [class*=col-]~h1,.entry-content [class*=col-]~h2,.entry-content [class*=col-]~h3,.entry-content [class*=col-]~h4,.entry-content [class*=col-]~h5,.entry-content [class*=col-]~h6{clear:none}.entry-header{position:relative}.entry-header .sticky-post{color:#999;font-size:.8rem;font-style:italic;position:absolute;top:-.8rem}.entr
 y-meta{color:#999;font-size:.8rem;margin-bottom:1rem}.entry-meta a{color:#777}.entry-meta>span{margin-right:1rem}.entry-meta>span :last-of-type{margin:0}.entry-meta .byline,.entry-meta .updated:not(.published),.sticky .entry-meta .posted-on{display:none}.group-blog .entry-meta .byline,.single .entry-meta .byline{display:inline}.entry-summary{hyphens:auto;word-wrap:break-word}body:not(.single):not(.search) .site-main .post{margin-bottom:3.0517578125rem;max-width:40em}.gallery{margin-bottom:1.5rem}.gallery .gallery-item{display:inline-block;margin:0;text-align:center;vertical-align:top;width:100%}.gallery.gallery-columns-2 .gallery-item{max-width:50%}.gallery.gallery-columns-3 .gallery-item{max-width:33.33%}.gallery.gallery-columns-4 .gallery-item{max-width:25%}.gallery.gallery-columns-5 .gallery-item{max-width:20%}.gallery.gallery-columns-6 .gallery-item{max-width:16.66%}.gallery.gallery-columns-7 .gallery-item{max-width:14.28%}.gallery.gallery-columns-8 .gallery-item{max-width
 :12.5%}.gallery.gallery-columns-9 .gallery-item{max-width:11.11%}.gallery .gallery-caption{display:block}.main-navigation{background:#0073aa;clear:both;left:0;position:absolute;top:60px;width:100%}.main-navigation ul{display:none;list-style:none;margin:0;padding-left:0}.main-navigation ul ul{box-shadow:0 3px 3px rgba(0,0,0,.2);float:left;left:-999em;position:absolute;top:1.5em;z-index:99999}.main-navigation ul ul ul{left:-999em;top:0}.main-navigation ul ul li.focus>ul,.main-navigation ul ul li:hover>ul{left:100%}.main-navigation ul ul a{width:200px}.main-navigation ul li.focus>ul,.main-navigation ul li:hover>ul{left:auto}.main-navigation li{border-top:1px solid hsla(0,0%,100%,.2);padding:1rem}.main-navigation a{color:hsla(0,0%,100%,.8);display:block;font-size:.8rem;text-decoration:none}.main-navigation a.active,.main-navigation a:hover{color:#fff}@media screen and (min-width:737px){.main-navigation a.active{border-bottom:1px solid}}.main-navigation.toggled{z-index:1}.mai
 n-navigation.toggled ul{display:block}.menu-toggle{background:transparent;border:none;color:#fff;height:3.5rem;position:absolute;right:1rem;top:-58px;width:3.5rem}.toggled .menu-toggle:before{content:""}@media screen and (min-width:737px){.menu-toggle{display:none}.main-navigation{float:right;position:static;width:auto}.main-navigation.toggled{padding:1px 0}.main-navigation ul{display:inline-block;font-size:0}.main-navigation ul li{border:0;display:inline-block;font-size:1rem;margin-right:1rem;padding:0}.main-navigation ul li:last-of-type{margin-right:0}}.comment-content .wp-smiley,.entry-content .wp-smiley,.page-content .wp-smiley{border:none;margin-bottom:0;margin-top:0;padding:0}embed,iframe,object{max-width:100%}body.page .gutters .col-12{width:100%}body.page .entry-header{background:#0073aa;padding:1rem 0}body.page .entry-header .entry-title{color:#fff;font-size:1.5625rem;font-weight:300;line-height:1;margin:0 auto;padding:0 1.5625rem}body.page .entry-header.home{p
 adding:1.5625rem 1.143rem;text-align:center}@media screen and (min-width:737px){body.page .site-header+.site-main .entry-title{padding:initial}}body.page .entry-content,body.page .entry-footer{margin:0 auto;max-width:960px;padding:3.0517578125rem 1.5625rem}.post-navigation{margin:5em auto;padding:0}.post-navigation a{border-bottom:1px solid #eaeaea;color:#444;display:block;font-weight:600;padding:11px 0 12px;text-transform:none;width:100%}.post-navigation a:hover{color:#21759b}.post-navigation .nav-links{border-top:1px solid #eaeaea;hyphens:auto;word-wrap:break-word}.post-navigation .meta-nav{color:#777;display:block;font-size:13px;line-height:2;text-transform:uppercase}.post-navigation .nav-next{text-align:right}.pagination .nav-links{text-align:center}.pagination .nav-links .page-numbers{background-color:#f9f9f9;cursor:hand;display:inline-block;min-width:2em;padding:8px}.pagination .nav-links .page-numbers.dots,.pagination .nav-links .page-numbers.next,.pagination .nav-links .page
 -numbers.prev{background:none;font-size:.9em;width:auto}.pagination .nav-links .page-numbers.dots{cursor:inherit}@media screen and (max-width:737px){.pagination .nav-links .page-numbers.next,.pagination .nav-links .page-numbers.prev{font-size:0;min-width:0;padding:0}.pagination .nav-links .page-numbers.next:after,.pagination .nav-links .page-numbers.prev:before{background-color:#f9f9f9;display:inline-block;font-size:1rem;line-height:1.5;min-width:2em;padding:8px}.pagination .nav-links .page-numbers.prev:before{content:"‹"}.pagination .nav-links .page-numbers.next:after{content:"›"}}.pagination .nav-links span.page-numbers{background-color:#f7f7f7;font-weight:700}.search-form .search-field{line-height:normal;margin:0;padding:4px 5px;vertical-align:text-bottom}body.search .gutters .col-12{width:100%}body.search .site-main{margin:0 auto;max-width:960px;padding:0 1.5625rem 3.0517578125rem}.site-content{max-width:960px;padding:0 1.5625rem}@media screen and (min-wi
 dth:737px){.site-content{padding:0 10px 3.0517578125rem}}@media screen and (max-width:737px){.site-content .site-main{float:none;margin:0;width:auto}}.home .site-content,.page .site-content,.site-content.page{margin:auto;max-width:none;padding:0}.site-content .page-title{font-size:1.25rem;font-weight:400}.site-content .no-results{margin:0 auto 3.0517578125rem;max-width:40em;padding:0 2rem}.site-description{color:hsla(0,0%,100%,.8);font-size:1.25rem;font-weight:300;margin:-.4rem auto 2rem;text-align:center}.site-header{background:#0073aa;padding:1rem 0;position:relative}.site-header .site-branding{margin:0 auto;max-width:960px;padding:0 1.5625rem}@media screen and (min-width:737px){.site-header .site-branding{padding:0 10px}}.site-header.home{padding:1.5625rem 1.143rem;text-align:center}.site-title{display:inline-block;font-size:1.5625rem;font-weight:300;line-height:1;margin:0 2rem 0 0;max-width:none}.site-title a{color:#fff;font-weight:300}.site-title a:active,.site-title a:focus,.s
 ite-title a:hover{text-decoration:none}.site-header.home .site-title{display:inherit;font-size:3.8146972656rem;margin:2rem 0 1rem}.widget-area{font-size:.8rem}@media screen and (min-width:480px) and (max-width:768px){.widget-area{display:flex}.widget-area .widget{width:48%}}#wporg-footer{background-color:#f7f7f7;border-top:1px solid #dfdfdf;padding:22px 14px 65px}#wporg-footer,#wporg-footer .wrapper{clear:both;margin:0 auto;overflow:auto}#wporg-footer .wrapper{max-width:930px}#wporg-footer ul{float:left;margin-bottom:20px;margin-left:24px;overflow:auto;padding-left:0;width:135px}@media screen and (min-width:960px){#wporg-footer ul:first-child{margin-left:0}}#wporg-footer ul li{color:#bbb;font-size:14px;list-style-type:none;margin-bottom:1px}#wporg-footer ul li a{text-decoration:none;text-decoration-skip-ink:none}#wporg-footer ul li a:hover{color:#0073aa;text-decoration:underline}#wporg-footer .cip{clear:both;color:#ccc;float:none;font-size:.8rem;letter-spacing:.3em;margin:35px auto 
 0;text-align:center;text-transform:uppercase}#wporg-footer .cip.cip-image{background:url(//s.w.org/style/images/codeispoetry.png?1=) 50% no-repeat;background-size:190px 15px;height:15px;text-indent:-9999px;width:190px}@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:1.5dppx),only screen and (min-resolution:144dpi){#wporg-footer .cip.cip-image{background-image:url(//s.w.org/style/images/codeispoetry-2x.png?1=)}}@media screen and (min-width:561px) and (max-width:959px){#wporg-footer .wrapper{max-width:600px}#wporg-footer ul{margin-left:2%;width:32%}#wporg-footer ul:nth-child(3n+1){margin-left:0}#wporg-footer ul:nth-child(4n){clear:both}}@media screen and (max-width:560px){#wporg-footer .wrapper{max-width:360px}#wporg-footer ul{margin-left:4%;width:48%}#wporg-footer ul:nth-child(odd){margin-left:0;clear:both}}#wporg-header{background:#23282d;height:140px;position:relative;text-align:center;width:100%}#wporg-header .wrapper{margin:0 auto;max-wi
 dth:960px}#wporg-header h1{display:inline-block;margin:auto;width:303px}#wporg-header h1 a{background:url(//s.w.org/style/images/wporg-logo.svg?3=) 0 no-repeat;background-size:290px 46px;display:block;height:88px;text-indent:-9999px}#wporg-header h2.rosetta{clear:none;color:#dfdfdf;font-family:Georgia,Times New Roman,serif;font-size:30px;margin:0 0 0 60px}#wporg-header h2.rosetta a{border-bottom:none;color:#dfdfdf;display:block;height:52px;line-height:22px;padding:0}#wporg-header h2.rosetta a:hover{text-decoration:none}#wporg-header #wporg-header-menu{background:#23282d;left:-75%;list-style:none;margin:0;max-width:75%;min-width:200px;position:absolute;text-align:left;top:100%;transition:left .3s;z-index:100000}#wporg-header #wporg-header-menu.toggled{left:0}#wporg-header ul li{list-style-type:none;position:relative}#wporg-header ul li a{color:#eee;display:block;font-family:Open Sans,Helvetica,Arial,Liberation Sans,sans-serif;font-size:13px;font-weight:600;height:34px;line-height:34p
 x;margin:0 4px;padding:10px 30px;text-decoration:none}#wporg-header ul li a.subcurrent{font-weight:700}@media (max-width:768px){#wporg-header ul li a{height:auto}}#wporg-header ul li.current-menu-item a,#wporg-header ul li.current_page_parent a,#wporg-header ul li a.current,#wporg-header ul li a:hover{color:#00a0d2}#wporg-header ul li#download,#wporg-header ul li.download{float:right;height:34px;margin-right:14px;overflow:hidden;padding:0 0 34px}@media screen and (max-width:767px){#wporg-header ul li#download,#wporg-header ul li.download{display:block;float:none;margin:10px 20px 20px;padding-bottom:0;height:auto}#wporg-header ul li#download a,#wporg-header ul li.download a{padding:4px 10px;text-align:center}}#wporg-header ul li#download a,#wporg-header ul li.download a{margin:0;padding:0 16px}#wporg-header ul li#download a:hover,#wporg-header ul li.download a:hover{color:#eee}#wporg-header ul li#download.current,#wporg-header ul li#download.current-menu-item,#wporg-header ul li#down
 load .uparrow,#wporg-header ul li.download.current,#wporg-header ul li.download.current-menu-item,#wporg-header ul li.download .uparrow{display:none}#wporg-header ul li .nav-submenu{clip:rect(1px,1px,1px,1px);height:1px;left:-2px;margin:0;overflow:hidden;padding:0;position:absolute;width:1px;z-index:99999}#wporg-header ul li .nav-submenu li a{display:inline-block;height:24px;line-height:24px;margin:0;white-space:nowrap}@media screen and (min-width:768px){#wporg-header #head-search{float:right;margin-right:14px;padding-top:30px}}#wporg-header #head-search form{border-bottom:1px solid #3f3f3f;display:inline-block;margin-left:60px;width:288px}#wporg-header #head-search form input.text{background:#191e23;border:0;border-radius:0;box-sizing:content-box;color:#b4b9be;float:left;font-family:Open Sans,sans-serif;font-size:12px;height:24px;margin:0;outline:none;padding:3px;vertical-align:top;width:256px}#wporg-header #head-search form input.text::-moz-placeholder{color:#eee}@media screen and
  (max-width:480px){#wporg-header #head-search form input.text{width:216px}}#wporg-header #head-search form .button{background:#191e23 url(//s.w.org/wp-includes/images/admin-bar-sprite.png?d=20120831) no-repeat 2px 5px;border:none;border-radius:0;box-shadow:none;float:left;height:30px;margin:0;padding:0;text-shadow:none!important;width:26px}@media screen and (max-width:480px){#wporg-header #head-search form{width:248px}}@media screen and (min-width:480px){#wporg-header #head-search form{margin-left:0}}@media screen and (min-width:768px){#wporg-header{height:120px;text-align:inherit}#wporg-header h1{float:left;padding-left:10px}#wporg-header h2.rosetta{float:left;margin-left:0;padding:36px 27px 0}#wporg-header #headline h2{text-rendering:optimizeLegibility}#wporg-header #wporg-header-menu{float:left;height:46px;list-style:none;margin:-15px 0 0;max-width:inherit;min-width:0;padding:0;position:static;width:100%}#wporg-header ul li{float:left;position:relative}#wporg-header ul li a{heigh
 t:46px;padding:0 6px}#wporg-header ul li a.current~.uparrow{border-bottom:9px solid #f7f7f7;border-left:9px solid transparent;border-right:9px solid transparent;height:0;margin:-8px auto 0;width:0}#wporg-header ul li.current-menu-item:after,#wporg-header ul li.current_page_parent:after{border-bottom:9px solid #f7f7f7;border-left:9px solid transparent;border-right:9px solid transparent;content:"";height:0;left:50%;margin:-8px 0 0 -9px;position:absolute;width:0}#wporg-header ul li .nav-submenu:hover~.uparrow,#wporg-header ul li:hover .nav-submenu~.uparrow{border-bottom:9px solid #32373c;border-left:9px solid transparent;border-right:9px solid transparent;height:0;margin:-10px auto 0;width:0}#wporg-header ul li .nav-submenu{background:#32373c;border:1px solid #32373c;border-top:0;margin-top:-1px;min-width:0}#wporg-header ul li .nav-submenu li{float:none}#wporg-header ul li .nav-submenu li a{height:34px;line-height:34px}#wporg-header .nav-menu .focus>ul,#wporg-header .nav-m
 enu ul li:hover>ul,#wporg-header ul.nav-menu .focus>ul,#wporg-header ul.nav-menu li:hover>ul{clip:inherit;height:inherit;overflow:inherit;width:inherit}#wporg-header ul li.current-menu-item:after,#wporg-header ul li.current_page_parent:after,#wporg-header ul li a.current~.uparrow{border-bottom-color:#0073aa}}.page-download #wporg-header #download,.page-parent-download #wporg-header #download{display:none}#mobile-menu-button{background:none;border:none;box-shadow:none;display:block;float:left;font-family:dashicons;font-size:16px;font-style:normal;font-weight:400;left:10px;line-height:1;padding:1px;position:absolute;text-align:center;text-decoration:inherit;text-shadow:none;top:75px;transition:color .1s ease-in;vertical-align:top;-webkit-font-smoothing:antialiased}#mobile-menu-button:before{border:none;box-sizing:border-box;color:#888;content:"";display:inline-block;float:left;font:normal 50px/1 Dashicons;margin:0;outline:none;padding:3px;text-decoration:none;ver
 tical-align:middle;-webkit-font-smoothing:antialiased}@media screen and (min-width:768px){#mobile-menu-button{display:none}}#download-mobile{background:#f7f7f7;border-bottom:1px solid #ddd}#download-mobile .wrapper{padding:20px 0;text-align:center}#download-mobile span.download-ready{font-size:1.6em;margin:0 .25em}#download-mobile a.download-button{font-size:1.6em;height:inherit;margin:10px .25em;padding:10px 15px}.category-context__bar{margin:0 1.5rem;background:#edeff0;border-radius:2px;font-size:.8125rem;overflow:auto;transition:all .1s ease-out;transition-delay:.1s}.category-context__bar>div{display:flex;align-items:center;justify-content:space-between}@media only screen and (min-width:782px){.category-context__bar{margin:0 1.5rem}}@media only screen and (min-width:960px){.category-context__bar{margin:0 auto;max-width:960px}}.category-context__bar ul{margin:0;padding:0;display:flex;justify-content:space-between}.category-context__bar ul li{list-style:none;font-size:.8125rem}.
 category-context__bar ul li a{display:block;padding:1.125rem .75rem;text-decoration:none}.category-context__bar ul li:last-child a{padding-right:1.5rem}.category-context__bar__copy{margin:0;padding:1.125rem 1.5rem;font-size:.8125rem;font-weight:400}.category-context__bar__title{margin:0;padding-right:1.5rem;color:#555d66;font-size:.75rem;font-weight:400;text-transform:uppercase}.category-context__bar__links{display:flex;align-items:center}@media only screen and (max-width:782px){.category-context__bar__links{display:none}}.category-context__bar--is-hidden{height:0;overflow:hidden}.category-menu{margin:0;padding:0;position:relative;background:linear-gradient(180deg,hsla(0,0%,100%,0) 94%,#0073aa 0);background-repeat:no-repeat;background-size:0;background-position-x:0;transition:all 75ms ease-out;min-height:45px}.category-menu li{display:inline-block;margin:0;list-style:none}.category-menu a{display:block;padding:.75rem;color:#40464d;font-size:.875rem;text-decoration:none}.category-men
 u a:active,.category-menu a:focus,.category-menu a:hover,li .category-menu--is-active{color:#000}.category-menu__mobile{padding:0!important;border-top:none!important}.category-menu__mobile ul{margin:0;padding:0;background:#23282d}.category-menu__mobile li{list-style:none;border-top:1px solid #32373c}.category-menu__mobile li a{display:block;padding:1rem 1.5rem;font-size:.875rem;text-decoration:none;color:#ccd0d4}.category-menu__mobile>.components-panel__body-title{margin:0!important}.category-menu__mobile>.components-panel__body-title>button{padding:1.5rem}.category-menu--is-loading{height:24px;position:relative}.category-menu--is-loading:after{content:"";position:absolute;background:#f3f4f5;border-radius:4px;width:80%;height:24px;left:0;top:calc(50% - 12px);transition:none}.category-search{display:flex;align-items:center;background:#fff;border:1px solid #6c7782;border-radius:2px}.category-search input[type=search]{flex-grow:1;margin:0;padding:.25rem .5rem;border:
 none;box-shadow:none;font-size:.8125rem}.category-search input[type=search]:focus{outline:1px auto #0073aa}.category-search__button{display:flex;background:transparent;border:none;color:#6c7782}.category-search__button:active{background:#d7dade}.category-search__button:focus{outline:1px auto #0073aa}.category-search--is-loading{display:block;height:24px;min-width:100%;background:#f3f4f5;border-radius:4px}@media only screen and (min-width:480px){.category-search--is-loading{width:224px!important;min-width:auto!important}}.pattern__copy-button{transition:all 75ms ease-in-out}.pattern__copy-button.is-small{font-size:.75rem;padding:.75rem;height:auto}.pattern__favorite-button{position:relative;font-size:.875rem;height:2.25rem;width:2.25rem;border-radius:2px;color:#606a74}.pattern__favorite-button svg{position:absolute;top:calc(50% - .75rem);left:calc(50% - .75rem);height:1.5rem;width:1.5rem;transition:all .15s ease-out}.pattern__favorite-button svg path{fill:#6c7782}.pattern__favorite-b
 utton .pattern__favorite-filled{opacity:0}.pattern__favorite-button:hover{color:#555d66;background:transparent}.pattern__favorite-button:hover svg path{fill:#555d66}.pattern__favorite-button:active{background:transparent;box-shadow:none;transform:none}.pattern__favorite-button.is-favorited{color:#555d66}.pattern__favorite-button.is-favorited svg path{fill:#d94f4f}.pattern__favorite-button.is-favorited .pattern__favorite-outline{opacity:0;transform:scale(2.8)}.pattern__favorite-button.is-favorited .pattern__favorite-filled{opacity:1}.pattern__favorite-button.is-favorited:hover .pattern__favorite-filled{animation:HeartBeat .9s infinite}@media (prefers-reduced-motion){.pattern__favorite-button.is-favorited:hover .pattern__favorite-filled{animation:none}}.pattern__favorite-button.has-label{padding:12px 18px 12px 38px;height:auto;width:auto}.pattern__favorite-button.has-label svg{top:calc(50% - 12px);left:9px}@keyframes HeartBeat{0%{transform:scale(1)}25%{transform:scale(1.2)}40%{transfo
 rm:scale(1)}60%{transform:scale(1.2)}to{transform:scale(1)}}.main-navigation{float:none;position:static;width:auto}.main-navigation a{font-size:.8125rem}.main-navigation.toggled div.menu{position:absolute;top:57px;right:0;width:100%;background:#0073aa}.menu-toggle{position:static;height:auto;width:auto;font-size:1.5625rem;overflow:hidden;-webkit-appearance:none}body.page .entry-header{background:none;padding:0}body.page .entry-header .entry-title{color:inherit;margin:2rem auto 1rem;max-width:960px}@media screen and (min-width:737px){body.page .entry-header .entry-title{padding:0 10px}}.pattern-grid-menu{margin:0 auto;max-width:960px;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.pattern-grid-menu>:first-child,.pattern-grid-menu>:last-child{width:100%}.pattern-grid-menu>:last-child{margin:1.5rem;width:calc(100% - 3rem)}@media only screen and (min-width:782px){.pattern-grid-menu{margin:1.5rem;flex-direction:row}.pattern-grid-menu>:last
 -child{margin:0;width:auto}}@media only screen and (min-width:960px){.pattern-grid-menu{margin:1.5rem auto}}.pattern-grid{max-width:960px;margin:1.5rem}@media screen and (min-width:600px){.pattern-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.pattern-grid>*{align-self:baseline}}@media screen and (min-width:960px){.pattern-grid{margin-left:auto;margin-right:auto}}.pattern-grid__pattern{position:relative;margin:0 0 1.5rem;border:1px solid #d7dade;border-radius:2px;transition:all 75ms ease-in-out}@media screen and (min-width:600px){.pattern-grid__pattern{display:inline-block;margin:0}}.pattern-grid__pattern .pattern-grid__preview{overflow:hidden}.pattern-grid__pattern .pattern-grid__actions{position:absolute;right:0;bottom:0;left:0;display:flex;align-items:center;padding:.375rem;background:hsla(0,0%,100%,.8);backdrop-filter:blur(3px);opacity:0;transform:translateY(6px);transition:all 75ms ease-in-out}.pattern-grid__pattern .pattern-grid__act
 ions .pattern-grid__title{flex-grow:1;margin:0;padding:0 .375rem 0 .75rem;font-size:.75rem;pointer-events:none}.pattern-grid__pattern .pattern-grid__actions .pattern__copy-button,.pattern-grid__pattern .pattern-grid__actions .pattern__favorite-button{flex-shrink:0}.pattern-grid__pattern .pattern-grid__actions .button+.button{margin-left:.375rem}.pattern-grid__pattern:focus-within .pattern-grid__actions,.pattern-grid__pattern:hover .pattern-grid__actions{opacity:1;transform:translateY(0)}.pattern-preview__container{padding:2rem 0 0;background:#f3f4f5}.pattern-preview__viewport{position:relative;margin:0 auto;padding:0 20px;max-width:100vw;min-width:320px}.pattern-preview__viewport .pattern-preview__viewport-iframe{background:#fff;border:1px solid #e8eaeb;vertical-align:middle;max-width:100vw}.pattern-preview__viewport:focus-within .pattern-preview__resize-help{clip:auto;clip-path:none;height:auto;margin:initial;overflow:initial;width:auto;bottom:-1rem;left:20px;right:20px;padding:8px
  16px;background:#fff;border-radius:2px;border:1px solid #d7dade;text-align:center}.pattern-preview__drag-handle{position:absolute;top:0;bottom:0;width:20px}.pattern-preview__drag-handle.is-left{left:0}.pattern-preview__drag-handle.is-right{right:0}.pattern-preview__drag-handle-button{position:absolute;top:calc(50% - 50px);left:6px;padding:0;width:8px;height:100px;appearance:none;cursor:grab;outline:none;background:#7e8993;border-radius:99999px;border:none}.pattern-preview__drag-handle-button:hover{background:#6c7782}.pattern-preview__drag-handle-button:active{cursor:grabbing;background:#606a74}.pattern-preview__drag-handle-button:focus{box-shadow:0 1px 0 #0073aa,0 0 2px 1px #33b3db}body.single-wporg-pattern{box-sizing:border-box;font-size:14px;font-weight:400;line-height:1.2}body.single-wporg-pattern .site-content{margin:auto;max-width:none;padding:0}body.single-wporg-pattern .entry-header{max-width:960px;padding:1.5rem;margin-left:auto;margin-right:auto}@media only screen and (min
 -width:960px){body.single-wporg-pattern .entry-header{padding:1.5rem 0}}body.single-wporg-pattern .entry-header .entry-title{margin-top:0;line-height:1.2}body.single-wporg-pattern .pattern-actions{display:flex;align-items:stretch;flex-wrap:wrap}body.single-wporg-pattern .pattern-actions button+button{margin-left:2em}body.single-wporg-pattern .pattern-actions__notice{margin:1.5rem 0 0;height:auto;flex-basis:100%}body.single-wporg-pattern .pattern-actions__notice>*{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;margin:0}body.single-wporg-pattern .pattern-actions__notice>* button{margin-top:.75rem}@media only screen and (min-width:600px){body.single-wporg-pattern .pattern-actions__notice>*{align-items:center;flex-direction:row}body.single-wporg-pattern .pattern-actions__notice>* button{margin-top:0}}body.single-wporg-pattern .pattern-actions__guide{max-width:384px;height:auto;max-height:none}body.single-wporg-pattern .pattern-actions
 __guide-content{padding:1.5rem;line-height:1.5}body.single-wporg-pattern .pattern-actions__guide-title{margin:0}body.single-wporg-pattern .pattern-actions__guide-shortcut{background:#edeff0;box-shadow:0 0 0 1px #ccd0d4;padding:1px;font-weight:600;min-width:20px;display:inline-block;text-align:center;border-radius:2px}body.single-wporg-pattern .entry-content{max-width:960px;margin-left:auto;margin-right:auto}body.single-wporg-pattern .pattern__meta{padding:2rem 0;background:#f3f4f5}body.single-wporg-pattern .pattern__meta>div{max-width:960px;margin-left:auto;margin-right:auto;display:flex;justify-content:space-between}body.single-wporg-pattern .pattern__meta .pattern-preview__report{text-align:right}.site-header:not(.home) .search-form{display:flex;align-items:center}.site-header:not(.home) .search-form>input{flex:1;border:0;border-radius:2px 0 0 2px;display:inline-block;font-size:12px;padding:5px 10px;position:relative;width:auto;height:100%}.site-header:not(.home) .search-for
 m button{margin:0;border-radius:0 2px 2px 0;padding:3px 12px;height:unset}.search-form--is-inline .search-form{display:flex;justify-content:space-between;background:#fff}.search-form--is-inline .search-form>label{flex:1}.search-form--is-inline .search-form input{padding:.5rem;background:transparent;border:none;box-shadow:none;width:100%;font-size:14px}@media only screen and (min-width:768px){.search-form--is-inline .search-form input{font-size:16px}}.search-form--is-inline .search-form button{background:transparent;margin-bottom:0;border:0;box-shadow:none;height:inherit;text-shadow:none;color:#32373c}.search-form--is-inline .search-form button:focus{-webkit-box-shadow:0 0 2px 1px #0073aa;box-shadow:0 0 2px 1px #0073aa}.search-form--is-centered .search-form{margin:0 auto}.search-form--is-constrained .search-form{max-width:36rem}.search-form--is-muted .search-form{border-color:#d7dade!important}.search-form--is-muted .search-form button,.search-form--is-muted .search-form input{bac
 kground:#f8f9f9;color:#7e8993}.search-form--has-medium-text .search-form input{font-size:14px}.search-form--has-border .search-form{border:1px solid #7e8993}.section-heading_link,.section-heading_title{margin-bottom:0}.section-heading_title{font-weight:300}.section-heading_title .archive-title-prefix{display:block;font-size:1rem}.section-heading_link{text-decoration:underline;font-weight:600;margin-top:1.5rem!important}@media only screen and (min-width:768px){.section-heading_link{margin-top:0!important}}.section-heading_description{margin:1rem 0 0}.section-heading_description :last-child{margin-bottom:0}.section-heading--with-space{padding-bottom:16px}.site-content{margin:0 auto;max-width:none;padding:0}body.home .site-header{padding:3.75rem 1rem;text-align:left}body.home .site-branding{display:grid;grid-template-rows:auto 1fr;grid-template-columns:1fr 22rem}body.home .site-branding>*{align-self:center}@media screen and (max-width:736px){body.home .site-branding{display:block}}b
 ody.home .site-title.site-title{grid-column-start:1;grid-row-start:1;margin-top:0;text-align:left;font-size:3rem;line-height:1.25}body.home .site-description{grid-column-start:1;grid-row-start:2;margin:0;font-size:1.25rem;line-height:1.6;text-align:left;color:#fff}body.home .site-callout{grid-column-start:2;grid-row-start:1;grid-row-end:span 2;margin-left:4rem;padding:1.125rem 1.5rem 1.5rem;font-size:.875rem;line-height:1.6;background:#fff;box-shadow:.75rem .75rem 0 rgba(0,0,0,.15)}body.home .site-callout h2{margin-top:0;font-size:1.125rem;line-height:1.25;font-weight:600}body.home .site-callout p:last-child{margin-bottom:0}@media screen and (max-width:736px){body.home .site-callout{margin:2rem auto 0;max-width:24rem}}body:not(.home) .site-branding{display:flex;align-items:center;justify-content:space-between;font-size:.8125rem;color:#fff}body:not(.home) .site-branding a{color:#fff}body:not(.home) .site-branding .sep{margin-left:.5rem;margin-right:.5rem}body:not(.home) .site-brandin
 g .is-current-page{font-weight:600}.site-title a{text-decoration:none}.site-title a:active,.site-title a:focus,.site-title a:hover{color:#fff}.has-wporg-blue-color{color:#1e8cbe}.has-wporg-blue-background-color{background-color:#1e8cbe}.has-wporg-purple-color{color:#826eb4}.has-wporg-purple-background-color{background-color:#826eb4}.has-wporg-white-color{color:#fff}.has-wporg-white-background-color{background-color:#fff}.home-page .shapes{position:relative;margin:0 auto}.home-page .shapes .parallelogram p:before{font-size:64px;height:64px;left:-16px;position:relative}.home-page .shapes .parallelogram{color:#fff;display:block;margin:0 auto;opacity:.9;padding:60px 40px;text-align:center;text-decoration:none}.home-page .shapes strong{display:block;font-size:28px;font-weight:300;padding-bottom:15px;padding-top:15px}.home-page .shapes p{color:#fff;font-size:16px;font-weight:300;margin:0}.home-page .shapes u{display:block;font-size:18px;padding-top:15px}@media only screen and (min-width:7
 68px){.home-page .shapes{height:400px}.home-page .shapes .parallelogram{width:50%;position:absolute;padding:50px 90px}}@media only screen and (min-width:960px){.home-page .shapes .parallelogram{-webkit-transform:skew(-15deg);-ms-transform:skew(-15deg);transform:skew(-15deg)}.home-page .shapes .parallelogram:before,.home-page .shapes p{-webkit-transform:skew(15deg);-ms-transform:skew(15deg);transform:skew(15deg)}}@media only screen and (min-width:1200px){.home-page .shapes{margin:0 -60px}}.terms{font-style:italic;font-size:14px}
</del><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@charset "UTF-8";[class*=col-]{margin:inherit}.row{display:flex;flex-direction:row;flex-wrap:wrap}@media (max-width:768px){.row{flex-direction:column;flex-wrap:nowrap}}.row.gutters>.row{margin-left:-2%}@media (max-width:768px){.row.gutters>.row{margin-left:0}}.row.gutters>.row>[class*=col-]{margin-left:2%}@media (max-width:768px){.row.gutters>.row>[class*=col-]{margin-left:0}}.row.around{justify-content:space-around}.row.between{justify-content:space-between}.row.auto .col{flex-grow:1}.col-1{width:8.3333333333%}.offset-1{margin-left:8.3333333333%}.col-2{width:16.6666666667%}.offset-2{margin-left:16.6666666667%}.col-3{width:25%}.offset-3{margin-left:25%}.col-4{width:33.3333333333%}.offset-4{margin-left:33.3333333333%}.col-5{width:41.6666666667%}.offset-5{margin-left:41.6666666667%}.col-6{width:50%}.offset-6{margin-left:50%}.col-7{width:58.3333333333%}.offset-7{
 margin-left:58.3333333333%}.col-8{width:66.6666666667%}.offset-8{margin-left:66.6666666667%}.col-9{width:75%}.offset-9{margin-left:75%}.col-10{width:83.3333333333%}.offset-10{margin-left:83.3333333333%}.col-11{width:91.6666666667%}.offset-11{margin-left:91.6666666667%}.col-12{width:100%}.offset-12{margin-left:100%}.gutters>.col-1{width:6.33333%}.gutters>.col-1:nth-child(n+13){margin-top:2%}.gutters>.offset-1{margin-left:10.33333%!important}.gutters>.col-2{width:14.66667%}.gutters>.col-2:nth-child(n+7){margin-top:2%}.gutters>.offset-2{margin-left:18.66667%!important}.gutters>.col-3{width:23%}.gutters>.col-3:nth-child(n+5){margin-top:2%}.gutters>.offset-3{margin-left:27%!important}.gutters>.col-4{width:31.33333%}.gutters>.col-4:nth-child(n+4){margin-top:2%}.gutters>.offset-4{margin-left:35.33333%!important}.gutters>.col-5{width:39.66667%}.gutters>.offset-5{margin-left:43.66667%!important}.gutters>.col-6{width:48%}.gutters>.col-6:nth-chil
 d(n+3){margin-top:2%}.gutters>.offset-6{margin-left:52%!important}.gutters>.col-7{width:56.33333%}.gutters>.offset-7{margin-left:60.33333%!important}.gutters>.col-8{width:64.66667%}.gutters>.offset-8{margin-left:68.66667%!important}.gutters>.col-9{width:73%}.gutters>.offset-9{margin-left:77%!important}.gutters>.col-10{width:81.33333%}.gutters>.offset-10{margin-left:85.33333%!important}.gutters>.col-11{width:89.66667%}.gutters>.offset-11{margin-left:93.66667%!important}.gutters>.col-12{width:98%}.gutters>.offset-12{margin-left:102%!important}@media (max-width:768px){[class*=" offset-"],[class^=offset-]{margin-left:0}}.first{order:-1}.last{order:1}@media (max-width:768px){.row [class*=col-]{margin-left:0;width:100%}.row.gutters [class*=col-]{margin-bottom:16px}.first-sm{order:-1}.last-sm{order:1}}.gutters .column.push-left,.push-left{margin-right:auto}.gutters .column.push-right,.push-right{margin-left:auto}.gutters .column.push-center,
 .push-center{margin-left:auto;margin-right:auto}.gutters .column.push-middle,.push-middle{margin-top:auto;margin-bottom:auto}.push-bottom{margin-top:auto}@media (max-width:768px){.gutters .column.push-left-sm,.push-left-sm{margin-left:0}.gutters .column.push-center-sm,.push-center-sm{margin-left:auto;margin-right:auto}.push-top-sm{margin-top:0}}.align-middle{align-items:center}.align-right{justify-content:flex-end}.align-center{justify-content:center}@media (max-width:768px){.align-left-sm{justify-content:flex-start}}.float-right{float:right}.float-left{float:left}@media (max-width:768px){.float-left,.float-right{float:none}}.fixed{position:fixed;top:0;left:0;z-index:100;width:100%}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;he
 ight:0}[hidden],template{display:none}a{background-color:transparent}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webki
 t-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}optgroup{font-weight:700}table{border-spacing:0}td,th{padding:0}p{margin:1rem 0}cite,dfn,em,i{font-style:italic}blockquote{margin:0 1.5rem}address{margin:0 0 1.5rem}pre{background:#eee;font-family:Courier\ 10 Pitch,Courier,monospace;font-size:.9375rem;line-height:1.6;margin-bottom:1.6rem;max-width:100%;overflow:auto;padding:1.6rem}code,kbd,tt,var{font-family:Monaco,Consolas,Andale Mono,DejaVu Sans Mono,monospace;font-size:.9375rem}abbr,acronym{border-bottom:1px dotted #666;cursor:help}ins,mark{background:#fff9c0;text-decoration:none}big{font-size:125%}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}body{background:#fff}blockquote,q{quotes:"" ""}blockquote:af
 ter,blockquote:before,q:after,q:before{content:""}blockquote{border-left:2px solid #767676;color:#767676;margin:1rem 0;padding-left:.8rem}blockquote cite{font-size:.8rem}figure{margin:0}hr{background-color:#eee;border:0;height:2px;margin:5rem auto}img{height:auto;max-width:100%}h1,h2,h3,h4,h5,h6{font-family:Open Sans,sans-serif;clear:both;line-height:1.5;margin:2rem 0 1rem}.h1,h1{font-size:2.44140625rem}.h1,.h2,h1,h2{font-weight:300}.h2,h2{font-size:1.953125rem}.h3,h3{font-size:1.5625rem;font-weight:400}.h4,h4{font-size:1.25rem;color:#32373c;font-weight:600;padding:0}.h5,h5{font-size:1rem;letter-spacing:.01rem}.h5,.h6,h5,h6{font-weight:600;text-transform:uppercase}.h6,h6{font-size:.8rem;letter-spacing:.8px}a{color:#0073aa;text-decoration:none}a:active,a:focus,a:hover{text-decoration:underline}a:focus{outline:thin dotted}a:active,a:hover{outline:0}li>a,p a{text-decoration:underline}li>a:hover,p a:hover{color:#d54e21}ol,ul{margin:0 0 1.5em 1.5em;padding:0}ul{list-style
 :square}ol{list-style:decimal}ol.unmarked-list,ul.unmarked-list{list-style:none;padding-left:0}li>ol,li>ul{margin-bottom:0}dt{font-weight:700}dd{margin:0 1.5em 1.5em}table{border:1px solid #eee;border-collapse:collapse;font-size:.8rem;margin:0 0 1rem;padding:0;width:100%}table thead{background:#32373c;color:#fff}table td,table th{border:1px solid #eee;font-weight:400;margin:0;padding:.4rem;text-align:left;vertical-align:top}table tbody tr:nth-child(2n){background:#f7f7f7}html{font-size:100%}body,button,input,select,textarea{color:#32373c;font-family:Open Sans,sans-serif;font-size:100%;line-height:1.5}@media screen and (min-width:737px){html{font-size:1.125rem}}.custom-select{display:inline-block;box-sizing:border-box;padding:.5rem 2rem .5rem .8rem;width:auto;font-size:1em;line-height:1.3;border:1px solid #6c7782;box-shadow:none;border-radius:.5em;-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:transparent;background-image:url('data:image/svg+xml;c
 harset=US-ASCII,%3Csvg width="14" height="8" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M2 0L7 5L12 0L14 1L7 8L0 1L2 0Z" fill="%23555D66"/%3E%3C/svg%3E%0A');background-repeat:no-repeat;background-position:right .7em top 50%;background-size:.65em auto}.custom-select::-ms-expand{display:none}.custom-select:focus{box-shadow:0 0 1px 3px rgba(59,153,252,.7);box-shadow:0 0 0 3px -moz-mac-focusring;color:#222;outline:none}.custom-select option{font-weight:400}html{font-size:1rem}@media screen and (min-width:737px){html{font-size:1rem}}.screen-reader-text{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px}.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;color:#21759b;display:block;font-size:.875rem;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-in
 dex:100000}.site-content[tabindex="-1"]:focus{outline:0}.no-js .hide-if-no-js{display:none}.alignleft{display:inline;float:left;margin-right:1.5em}.alignright{display:inline;float:right;margin-left:1.5em}.aligncenter{clear:both;display:block;margin-left:auto;margin-right:auto}@media screen and (max-width:480px){.alignleft,.alignright{display:block;float:none;margin-left:auto;margin-right:auto}}.button,.button-primary,.button-secondary,.plugin-upload-form .button-primary{border:1px solid;border-radius:3px;box-sizing:border-box;cursor:pointer;display:inline-block;font-size:.8rem;height:1.5625rem;line-height:1;margin:0;padding:0 .8rem;text-decoration:none;white-space:nowrap;-webkit-appearance:none}button::-moz-focus-inner,input[type=button]::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner{border:0;padding:0}.button-group.button-xl .button,.button.button-xl{font-size:1rem;height:2.44140625rem;line-height:1;padding:0 1.5rem}.button-grou
 p.button-large .button,.button.button-large{height:1.953125rem;line-height:1;padding:0 1rem}.button-group.button-small .button,.button.button-small{font-size:.64rem;height:1.25rem;line-height:1;padding:0 .5rem}a.button,a.button-primary,a.button-secondary{line-height:1.5625rem}.button-group.button-large a.button,a.button.button-large{line-height:1.953125rem}.button-group.button-xl a.button,a.button.button-xl{line-height:2.44140625rem}.button-group.button-small a.button,a.button.button-small{line-height:1.25rem}.button:active,.button:focus{outline:none}.button.hidden{display:none}input[type=reset],input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{background:none;border:none;box-shadow:none;padding:0 2px 1px;width:auto}.button,.button-secondary,.button:visited{background:#f7f7f7;border-color:#ccc;box-shadow:0 1px 0 #ccc;color:#555;vertical-align:top}p .button{vertical-align:baseline}.button-secondary:focus,.button-secondary:hover,.button.focus,.button.hover,.butt
 on:focus,.button:hover{background:#fafafa;border-color:#999;color:#23282d}.button-link:focus,.button-secondary:focus,.button.focus,.button:focus{border-color:#5b9dd9;box-shadow:0 0 3px rgba(0,115,170,.8)}.button-secondary:active,.button.active,.button.active:hover,.button:active{background:#eee;border-color:#999;box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5);transform:translateY(1px)}.button.active:focus{border-color:#5b9dd9;box-shadow:inset 0 2px 5px -3px rgba(0,0,0,.5),0 0 3px rgba(0,115,170,.8)}.button-disabled,.button-secondary.disabled,.button-secondary:disabled,.button-secondary[disabled],.button.disabled,.button:disabled,.button[disabled]{background:#f7f7f7!important;border-color:#ddd!important;box-shadow:none!important;color:#a0a5aa!important;cursor:default;text-shadow:0 1px 0 #fff!important;transform:none!important}.button-link,input[type=submit].button-link{background:none;border:0;border-radius:0;box-shadow:none;cursor:pointer;margin:0;outline:none;padding:0}.button-link:
 focus{outline:1px solid #5b9dd9}.button-primary,.download-button,.plugin-upload-form .button-primary{text-decoration:none;text-shadow:0 -1px 1px #006799,1px 0 1px #006799,0 1px 1px #006799,-1px 0 1px #006799}.button-primary,.button-primary:visited,.download-button,.download-button:visited,.plugin-upload-form .button-primary,.plugin-upload-form .button-primary:visited{background:#0085ba;border-color:#0073aa #006799 #006799;box-shadow:0 1px 0 #006799;color:#fff}.button-primary.focus,.button-primary.hover,.button-primary:focus,.button-primary:hover,.download-button.focus,.download-button.hover,.download-button:focus,.download-button:hover,.plugin-upload-form .button-primary.focus,.plugin-upload-form .button-primary.hover,.plugin-upload-form .button-primary:focus,.plugin-upload-form .button-primary:hover{background:#008ec2;border-color:#006799;box-shadow:0 1px 0 #006799;color:#fff}.button-primary.focus,.button-primary:focus,.download-button.focus,.download-button:focus,.plugin-upload-fo
 rm .button-primary.focus,.plugin-upload-form .button-primary:focus{box-shadow:0 1px 0 #0073aa,0 0 2px 1px #33b3db}.button-primary.active,.button-primary.active:focus,.button-primary.active:hover,.button-primary:active,.download-button.active,.download-button.active:focus,.download-button.active:hover,.download-button:active,.plugin-upload-form .button-primary.active,.plugin-upload-form .button-primary.active:focus,.plugin-upload-form .button-primary.active:hover,.plugin-upload-form .button-primary:active{background:#0073aa;border-color:#006799;box-shadow:inset 0 2px 0 #006799;vertical-align:top}.button-primary.disabled,.button-primary:disabled,.button-primary[disabled],.download-button.disabled,.download-button:disabled,.download-button[disabled],.plugin-upload-form .button-primary.disabled,.plugin-upload-form .button-primary:disabled,.plugin-upload-form .button-primary[disabled]{background:#008ec2!important;border-color:#007cb2!important;box-shadow:none!important;color:#66c6e4!impo
 rtant;cursor:default;text-shadow:0 -1px 0 rgba(0,0,0,.1)!important}.button-primary.button.button-hero,.download-button.button.button-hero,.plugin-upload-form .button-primary.button.button-hero{box-shadow:0 2px 0 #006799}.button-primary.button.button-hero.active,.button-primary.button.button-hero.active:focus,.button-primary.button.button-hero.active:hover,.button-primary.button.button-hero:active,.download-button.button.button-hero.active,.download-button.button.button-hero.active:focus,.download-button.button.button-hero.active:hover,.download-button.button.button-hero:active,.plugin-upload-form .button-primary.button.button-hero.active,.plugin-upload-form .button-primary.button.button-hero.active:focus,.plugin-upload-form .button-primary.button.button-hero.active:hover,.plugin-upload-form .button-primary.button.button-hero:active{box-shadow:inset 0 3px 0 #006799}.button-primary-disabled{background:#008ec2!important;border-color:#007cb2!important;box-shadow:none!important;color:#66
 c6e4!important;cursor:default;text-shadow:0 -1px 0 rgba(0,0,0,.1)!important}.button-group{display:inline-block;font-size:0;position:relative;vertical-align:middle;white-space:nowrap}.button-group>.button{border-radius:0;display:inline-block;margin-right:-1px;z-index:10}.button-group>.button-primary{z-index:100}.button-group>.button:hover{z-index:20}.button-group>.button:first-child{border-radius:3px 0 0 3px}.button-group>.button:last-child{border-radius:0 3px 3px 0}.button-group>.button:focus{position:relative;z-index:1}@media screen and (max-width:737px){.button,.button.button-large,.button.button-small,.plugin-upload-form .button-primary{font-size:14px;height:auto;line-height:normal;margin-bottom:4px;padding:6px 14px;vertical-align:middle}}.clear:after,.clear:before,.comment-content:after,.comment-content:before,.entry-content:after,.entry-content:before,.home-below:after,.home-below:before,.site-content:after,.site-content:before,.site-footer:after,.site-footer:
 before,.site-header:after,.site-header:before{content:"";display:table;table-layout:fixed}.clear:after,.comment-content:after,.entry-content:after,.home-below:after,.site-content:after,.site-footer:after,.site-header:after{clear:both}p.subheading{color:#82878c;font-weight:300;margin:-.4rem auto 2rem;text-align:center}p.intro,p.subheading{font-size:1.25rem}p.aside{font-size:.8rem}p.note{font-size:.64rem;letter-spacing:.01rem;max-width:18.1898940355rem}input,textarea{box-sizing:border-box}input[type=checkbox],input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=radio],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{background-color:#fff;border:1px solid #ddd;box-shadow:inset 0 1px 2px rgba(0,0,0,.07);color:#32373c;outline:none;transition:border-color .05s ease-in-out}input[type=checkbox]:foc
 us,input[type=color]:focus,input[type=date]:focus,input[type=datetime-local]:focus,input[type=datetime]:focus,input[type=email]:focus,input[type=month]:focus,input[type=number]:focus,input[type=password]:focus,input[type=radio]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=time]:focus,input[type=url]:focus,input[type=week]:focus,select:focus,textarea:focus{border-color:#5b9dd9;box-shadow:0 0 2px rgba(30,140,190,.8)}input[type=email],input[type=url]{direction:ltr}input[type=number]{height:28px;line-height:inherit}input[type=checkbox],input[type=radio]{background:#fff;border:1px solid #b4b9be;box-shadow:inset 0 1px 2px rgba(0,0,0,.1);clear:none;color:#555;cursor:pointer;display:inline-block;height:16px;line-height:0;margin:-4px 4px 0 0;min-width:16px;outline:0;padding:0!important;text-align:center;transition:border-color .05s ease-in-out;vertical-align:middle;width:16px;-webkit-appearance:none}input[type=checkbox]:checked:before,input[type=radi
 o]:checked:before{display:inline-block;float:left;font:normal 21px/1 dashicons;vertical-align:middle;width:16px;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=checkbox].disabled,input[type=checkbox].disabled:checked:before,input[type=checkbox]:disabled,input[type=checkbox]:disabled:checked:before,input[type=radio].disabled,input[type=radio].disabled:checked:before,input[type=radio]:disabled,input[type=radio]:disabled:checked:before{opacity:.7}input[type=checkbox]:checked:before{color:#1e8cbe;content:"";margin:-3px 0 0 -4px}input[type=radio]{border-radius:50%;line-height:10px;margin-right:4px}input[type=radio]:checked+label:before{color:#82878c}input[type=radio]:checked:before{background-color:#1e8cbe;border-radius:50px;content:"•";font-size:24px;height:6px;line-height:16px;margin:4px;text-indent:-9999px;width:6px}input[type=reset]:active,input[type=reset]:hover{color:#00a0d2}input[type=search]{-webkit-appearance:te
 xtfield}input[type=search]::-webkit-search-decoration{display:none}button,input,select,textarea{font-family:inherit;font-size:inherit;font-weight:inherit}input,select,textarea{border-radius:0;font-size:14px;padding:3px 5px}textarea{line-height:1.4;overflow:auto;padding:2px 6px;resize:vertical}textarea.code{line-height:1.4;padding:4px 6px 1px}label{cursor:pointer;vertical-align:middle}input,select{margin:1px;padding:3px 5px}input.code{padding-top:6px}input.readonly,input[readonly],textarea.readonly,textarea[readonly]{background-color:#eee}.wp-core-ui :-moz-placeholder,:-moz-placeholder{color:#a9a9a9}input.disabled,input:disabled,select.disabled,select:disabled,textarea.disabled,textarea:disabled{background:hsla(0,0%,100%,.5);border-color:hsla(0,0%,87.1%,.75);box-shadow:inset 0 1px 2px rgba(0,0,0,.04);color:rgba(51,51,51,.5)}input[type=file].disabled,input[type=file]:disabled,input[type=range].disabled,input[type=range]:disabled{background:none;box-shadow:none}input.large-text,textare
 a.large-text{width:99%}input.regular-text{width:25em}input.small-text{padding:1px 6px;width:50px}input[type=number].small-text{width:65px}input.tiny-text{width:35px}input[type=number].tiny-text{width:45px}@media screen and (max-width:782px){textarea{-webkit-appearance:none}input[type=email],input[type=number],input[type=password],input[type=search],input[type=text]{-webkit-appearance:none;padding:6px 10px}input[type=number]{height:40px}input.code{padding-bottom:5px;padding-top:10px}input[type=checkbox]{-webkit-appearance:none;padding:10px}input[type=checkbox]:checked:before{font:normal 30px/1 dashicons;margin:-3px -5px}input[type=checkbox],input[type=radio]{height:25px;width:25px}input[type=radio]:checked:before{vertical-align:middle;width:9px;height:9px;margin:7px;line-height:16px}input,textarea{font-size:16px}input[type=number].small-text,input[type=password].small-text,input[type=search].small-text,input[type=text].small-text{width:auto;max-width:55px;display:inline;padding:3px 6
 px;margin:0 3px}input.regular-text{width:100%}label{font-size:14px}fieldset label{display:block}}a.button:active,a.button:focus,a.button:hover{text-decoration:none}.notice{background:#fff;border-left:4px solid #fff;box-shadow:0 1px 1px 0 rgba(0,0,0,.1);margin:1em 0;padding:1px 12px}.notice p{font-size:.8rem;margin:.5em 0;padding:2px}.notice.notice-alt{box-shadow:none}.notice.notice-large{padding:10px 20px}.notice.notice-success{border-left-color:#46b450}.notice.notice-success.notice-alt{background-color:#ecf7ed}.notice.notice-warning{border-left-color:#ffb900}.notice.notice-warning.notice-alt{background-color:#fff8e5}.notice.notice-error{border-left-color:#dc3232}.notice.notice-error.notice-alt{background-color:#fbeaea}.notice.notice-info{border-left-color:#00a0d2}.notice.notice-info.notice-alt{background-color:#e5f5fa}.error-404 .page-content,.error-404 .page-title{text-align:center}.error-404 .page-content .logo-swing{height:10rem;margin:6rem auto;position:relative;text-align:cent
 er;width:10rem}.error-404 .page-content .logo-swing .wp-logo{left:0;max-width:none;position:absolute;top:0;width:10rem}@keyframes hinge{10%{width:180px;height:180px;transform:rotate(0deg)}15%{width:185px;height:185px;transform:rotate(0deg)}20%{width:180px;height:180px;transform:rotate(5deg)}40%{transform-origin:top left;animation-timing-function:ease-in-out}60%{transform:rotate(40deg);transform-origin:top left;animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);transform-origin:top left;animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0,700px,0);opacity:0}}.hinge{animation-duration:2s;animation-name:hinge}.comments-area{margin-top:5em}.comments-area>:last-child{margin-bottom:0}.comments-area .comment-list+.comment-respond{border-top:1px solid #eaeaea}.comments-area .comment-list+.comment-respond,.comments-area .comment-navigation+.comment-respond{padding-top:1.6em}.comments-area .comments-title{margin-bottom:1.3333em}.comments-area .comme
 nt-list{list-style:none;margin:0}.comments-area .comment-list .pingback,.comments-area .comment-list .trackback,.comments-area .comment-list article{border-top:1px solid #eaeaea;padding:1.6em 0}.comments-area .comment-list article:not(:only-child){padding-bottom:0}.comments-area .comment-list article+.comment-respond{padding-bottom:1.6em}.comments-area .comment-list .children{list-style:none;margin:0}.comments-area .comment-list .children>li{padding-left:.8em}.comments-area .comment-list .alt{background:none}.comments-area .comment-author{color:#999;margin-bottom:.4em}.comments-area .comment-author .avatar{float:left;height:24px;margin-right:.8em;width:24px}.comments-area .comment-metadata,.comments-area .pingback .edit-link{color:#999;line-height:1.5}.comments-area .comment-metadata a,.comments-area .pingback .edit-link a{color:#777}.comments-area .comment-metadata{font-size:.8rem;margin-bottom:1.6em}.comments-area .comment-metadata .edit-link,.comments-area .pingback .edit-link
 {margin-left:1em}.comments-area .pingback .edit-link:before{top:5px}.comments-area .comment-content ol,.comments-area .comment-content ul{margin:0 0 1.6em 1.3333em}.comments-area .comment-content>:last-child,.comments-area .comment-content li>ol,.comments-area .comment-content li>ul{margin-bottom:0}.comments-area .comment-content .reply{font-size:12px}.comments-area .comment-content .reply a{border:1px solid #eaeaea;color:#707070;display:inline-block;font-weight:700;line-height:1;margin-top:2em;padding:.4167em .8333em;text-transform:uppercase}.comments-area .comment-content .reply a:focus,.comments-area .comment-content .reply a:hover{border-color:#333;color:#333;outline:0}.comments-area .comment-reply-title a{font-weight:inherit}.comments-area .comment-form label{font-size:.8rem;font-weight:700;display:block;letter-spacing:.04em;line-height:1.5}.comments-area .comment-form input[type=email],.comments-area .comment-form input[type=text],.comments-area .comment-form input[ty
 pe=url],.comments-area .comment-form textarea{width:100%}.comments-area .comment-awaiting-moderation,.comments-area .comment-notes,.comments-area .form-allowed-tags,.comments-area .logged-in-as{font-size:1rem;line-height:1.5;margin-bottom:2em}.comments-area .no-comments{border-top:1px solid #eaeaea;color:#999;font-weight:700;padding-top:1.6em}.comments-area .comment-navigation+.no-comments{border-top:0}.comments-area .form-allowed-tags code{font-family:Inconsolata,monospace}.comments-area .form-submit{margin-bottom:0}.comments-area .required{color:#c0392b}.entry-content{hyphens:auto;word-wrap:break-word}.entry-content>p:first-child{margin-top:0}.entry-content [class*=col-]~h1,.entry-content [class*=col-]~h2,.entry-content [class*=col-]~h3,.entry-content [class*=col-]~h4,.entry-content [class*=col-]~h5,.entry-content [class*=col-]~h6{clear:none}.entry-header{position:relative}.entry-header .sticky-post{color:#999;font-size:.8rem;font-style:italic;position:absolute;top:-.8rem}.entr
 y-meta{color:#999;font-size:.8rem;margin-bottom:1rem}.entry-meta a{color:#777}.entry-meta>span{margin-right:1rem}.entry-meta>span :last-of-type{margin:0}.entry-meta .byline,.entry-meta .updated:not(.published),.sticky .entry-meta .posted-on{display:none}.group-blog .entry-meta .byline,.single .entry-meta .byline{display:inline}.entry-summary{hyphens:auto;word-wrap:break-word}body:not(.single):not(.search) .site-main .post{margin-bottom:3.0517578125rem;max-width:40em}.gallery{margin-bottom:1.5rem}.gallery .gallery-item{display:inline-block;margin:0;text-align:center;vertical-align:top;width:100%}.gallery.gallery-columns-2 .gallery-item{max-width:50%}.gallery.gallery-columns-3 .gallery-item{max-width:33.33%}.gallery.gallery-columns-4 .gallery-item{max-width:25%}.gallery.gallery-columns-5 .gallery-item{max-width:20%}.gallery.gallery-columns-6 .gallery-item{max-width:16.66%}.gallery.gallery-columns-7 .gallery-item{max-width:14.28%}.gallery.gallery-columns-8 .gallery-item{max-width
 :12.5%}.gallery.gallery-columns-9 .gallery-item{max-width:11.11%}.gallery .gallery-caption{display:block}.main-navigation{background:#0073aa;clear:both;left:0;position:absolute;top:60px;width:100%}.main-navigation ul{display:none;list-style:none;margin:0;padding-left:0}.main-navigation ul ul{box-shadow:0 3px 3px rgba(0,0,0,.2);float:left;left:-999em;position:absolute;top:1.5em;z-index:99999}.main-navigation ul ul ul{left:-999em;top:0}.main-navigation ul ul li.focus>ul,.main-navigation ul ul li:hover>ul{left:100%}.main-navigation ul ul a{width:200px}.main-navigation ul li.focus>ul,.main-navigation ul li:hover>ul{left:auto}.main-navigation li{border-top:1px solid hsla(0,0%,100%,.2);padding:1rem}.main-navigation a{color:hsla(0,0%,100%,.8);display:block;font-size:.8rem;text-decoration:none}.main-navigation a.active,.main-navigation a:hover{color:#fff}@media screen and (min-width:737px){.main-navigation a.active{border-bottom:1px solid}}.main-navigation.toggled{z-index:1}.mai
 n-navigation.toggled ul{display:block}.menu-toggle{background:transparent;border:none;color:#fff;height:3.5rem;position:absolute;right:1rem;top:-58px;width:3.5rem}.toggled .menu-toggle:before{content:""}@media screen and (min-width:737px){.menu-toggle{display:none}.main-navigation{float:right;position:static;width:auto}.main-navigation.toggled{padding:1px 0}.main-navigation ul{display:inline-block;font-size:0}.main-navigation ul li{border:0;display:inline-block;font-size:1rem;margin-right:1rem;padding:0}.main-navigation ul li:last-of-type{margin-right:0}}.comment-content .wp-smiley,.entry-content .wp-smiley,.page-content .wp-smiley{border:none;margin-bottom:0;margin-top:0;padding:0}embed,iframe,object{max-width:100%}body.page .gutters .col-12{width:100%}body.page .entry-header{background:#0073aa;padding:1rem 0}body.page .entry-header .entry-title{color:#fff;font-size:1.5625rem;font-weight:300;line-height:1;margin:0 auto;padding:0 1.5625rem}body.page .entry-header.home{p
 adding:1.5625rem 1.143rem;text-align:center}@media screen and (min-width:737px){body.page .site-header+.site-main .entry-title{padding:initial}}body.page .entry-content,body.page .entry-footer{margin:0 auto;max-width:960px;padding:3.0517578125rem 1.5625rem}.post-navigation{margin:5em auto;padding:0}.post-navigation a{border-bottom:1px solid #eaeaea;color:#444;display:block;font-weight:600;padding:11px 0 12px;text-transform:none;width:100%}.post-navigation a:hover{color:#21759b}.post-navigation .nav-links{border-top:1px solid #eaeaea;hyphens:auto;word-wrap:break-word}.post-navigation .meta-nav{color:#777;display:block;font-size:13px;line-height:2;text-transform:uppercase}.post-navigation .nav-next{text-align:right}.pagination .nav-links{text-align:center}.pagination .nav-links .page-numbers{background-color:#f9f9f9;cursor:hand;display:inline-block;min-width:2em;padding:8px}.pagination .nav-links .page-numbers.dots,.pagination .nav-links .page-numbers.next,.pagination .nav-links .page
 -numbers.prev{background:none;font-size:.9em;width:auto}.pagination .nav-links .page-numbers.dots{cursor:inherit}@media screen and (max-width:737px){.pagination .nav-links .page-numbers.next,.pagination .nav-links .page-numbers.prev{font-size:0;min-width:0;padding:0}.pagination .nav-links .page-numbers.next:after,.pagination .nav-links .page-numbers.prev:before{background-color:#f9f9f9;display:inline-block;font-size:1rem;line-height:1.5;min-width:2em;padding:8px}.pagination .nav-links .page-numbers.prev:before{content:"‹"}.pagination .nav-links .page-numbers.next:after{content:"›"}}.pagination .nav-links span.page-numbers{background-color:#f7f7f7;font-weight:700}.search-form .search-field{line-height:normal;margin:0;padding:4px 5px;vertical-align:text-bottom}body.search .gutters .col-12{width:100%}body.search .site-main{margin:0 auto;max-width:960px;padding:0 1.5625rem 3.0517578125rem}.site-content{max-width:960px;padding:0 1.5625rem}@media screen and (min-wi
 dth:737px){.site-content{padding:0 10px 3.0517578125rem}}@media screen and (max-width:737px){.site-content .site-main{float:none;margin:0;width:auto}}.home .site-content,.page .site-content,.site-content.page{margin:auto;max-width:none;padding:0}.site-content .page-title{font-size:1.25rem;font-weight:400}.site-content .no-results{margin:0 auto 3.0517578125rem;max-width:40em;padding:0 2rem}.site-description{color:hsla(0,0%,100%,.8);font-size:1.25rem;font-weight:300;margin:-.4rem auto 2rem;text-align:center}.site-header{background:#0073aa;padding:1rem 0;position:relative}.site-header .site-branding{margin:0 auto;max-width:960px;padding:0 1.5625rem}@media screen and (min-width:737px){.site-header .site-branding{padding:0 10px}}.site-header.home{padding:1.5625rem 1.143rem;text-align:center}.site-title{display:inline-block;font-size:1.5625rem;font-weight:300;line-height:1;margin:0 2rem 0 0;max-width:none}.site-title a{color:#fff;font-weight:300}.site-title a:active,.site-title a:focus,.s
 ite-title a:hover{text-decoration:none}.site-header.home .site-title{display:inherit;font-size:3.8146972656rem;margin:2rem 0 1rem}.widget-area{font-size:.8rem}@media screen and (min-width:480px) and (max-width:768px){.widget-area{display:flex}.widget-area .widget{width:48%}}#wporg-footer{background-color:#f7f7f7;border-top:1px solid #dfdfdf;padding:22px 14px 65px}#wporg-footer,#wporg-footer .wrapper{clear:both;margin:0 auto;overflow:auto}#wporg-footer .wrapper{max-width:930px}#wporg-footer ul{float:left;margin-bottom:20px;margin-left:24px;overflow:auto;padding-left:0;width:135px}@media screen and (min-width:960px){#wporg-footer ul:first-child{margin-left:0}}#wporg-footer ul li{color:#bbb;font-size:14px;list-style-type:none;margin-bottom:1px}#wporg-footer ul li a{text-decoration:none;text-decoration-skip-ink:none}#wporg-footer ul li a:hover{color:#0073aa;text-decoration:underline}#wporg-footer .cip{clear:both;color:#ccc;float:none;font-size:.8rem;letter-spacing:.3em;margin:35px auto 
 0;text-align:center;text-transform:uppercase}#wporg-footer .cip.cip-image{background:url(//s.w.org/style/images/codeispoetry.png?1=) 50% no-repeat;background-size:190px 15px;height:15px;text-indent:-9999px;width:190px}@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:1.5dppx),only screen and (min-resolution:144dpi){#wporg-footer .cip.cip-image{background-image:url(//s.w.org/style/images/codeispoetry-2x.png?1=)}}@media screen and (min-width:561px) and (max-width:959px){#wporg-footer .wrapper{max-width:600px}#wporg-footer ul{margin-left:2%;width:32%}#wporg-footer ul:nth-child(3n+1){margin-left:0}#wporg-footer ul:nth-child(4n){clear:both}}@media screen and (max-width:560px){#wporg-footer .wrapper{max-width:360px}#wporg-footer ul{margin-left:4%;width:48%}#wporg-footer ul:nth-child(odd){margin-left:0;clear:both}}#wporg-header{background:#23282d;height:140px;position:relative;text-align:center;width:100%}#wporg-header .wrapper{margin:0 auto;max-wi
 dth:960px}#wporg-header h1{display:inline-block;margin:auto;width:303px}#wporg-header h1 a{background:url(//s.w.org/style/images/wporg-logo.svg?3=) 0 no-repeat;background-size:290px 46px;display:block;height:88px;text-indent:-9999px}#wporg-header h2.rosetta{clear:none;color:#dfdfdf;font-family:Georgia,Times New Roman,serif;font-size:30px;margin:0 0 0 60px}#wporg-header h2.rosetta a{border-bottom:none;color:#dfdfdf;display:block;height:52px;line-height:22px;padding:0}#wporg-header h2.rosetta a:hover{text-decoration:none}#wporg-header #wporg-header-menu{background:#23282d;left:-75%;list-style:none;margin:0;max-width:75%;min-width:200px;position:absolute;text-align:left;top:100%;transition:left .3s;z-index:100000}#wporg-header #wporg-header-menu.toggled{left:0}#wporg-header ul li{list-style-type:none;position:relative}#wporg-header ul li a{color:#eee;display:block;font-family:Open Sans,Helvetica,Arial,Liberation Sans,sans-serif;font-size:13px;font-weight:600;height:34px;line-height:34p
 x;margin:0 4px;padding:10px 30px;text-decoration:none}#wporg-header ul li a.subcurrent{font-weight:700}@media (max-width:768px){#wporg-header ul li a{height:auto}}#wporg-header ul li.current-menu-item a,#wporg-header ul li.current_page_parent a,#wporg-header ul li a.current,#wporg-header ul li a:hover{color:#00a0d2}#wporg-header ul li#download,#wporg-header ul li.download{float:right;height:34px;margin-right:14px;overflow:hidden;padding:0 0 34px}@media screen and (max-width:767px){#wporg-header ul li#download,#wporg-header ul li.download{display:block;float:none;margin:10px 20px 20px;padding-bottom:0;height:auto}#wporg-header ul li#download a,#wporg-header ul li.download a{padding:4px 10px;text-align:center}}#wporg-header ul li#download a,#wporg-header ul li.download a{margin:0;padding:0 16px}#wporg-header ul li#download a:hover,#wporg-header ul li.download a:hover{color:#eee}#wporg-header ul li#download.current,#wporg-header ul li#download.current-menu-item,#wporg-header ul li#down
 load .uparrow,#wporg-header ul li.download.current,#wporg-header ul li.download.current-menu-item,#wporg-header ul li.download .uparrow{display:none}#wporg-header ul li .nav-submenu{clip:rect(1px,1px,1px,1px);height:1px;left:-2px;margin:0;overflow:hidden;padding:0;position:absolute;width:1px;z-index:99999}#wporg-header ul li .nav-submenu li a{display:inline-block;height:24px;line-height:24px;margin:0;white-space:nowrap}@media screen and (min-width:768px){#wporg-header #head-search{float:right;margin-right:14px;padding-top:30px}}#wporg-header #head-search form{border-bottom:1px solid #3f3f3f;display:inline-block;margin-left:60px;width:288px}#wporg-header #head-search form input.text{background:#191e23;border:0;border-radius:0;box-sizing:content-box;color:#b4b9be;float:left;font-family:Open Sans,sans-serif;font-size:12px;height:24px;margin:0;outline:none;padding:3px;vertical-align:top;width:256px}#wporg-header #head-search form input.text::-moz-placeholder{color:#eee}@media screen and
  (max-width:480px){#wporg-header #head-search form input.text{width:216px}}#wporg-header #head-search form .button{background:#191e23 url(//s.w.org/wp-includes/images/admin-bar-sprite.png?d=20120831) no-repeat 2px 5px;border:none;border-radius:0;box-shadow:none;float:left;height:30px;margin:0;padding:0;text-shadow:none!important;width:26px}@media screen and (max-width:480px){#wporg-header #head-search form{width:248px}}@media screen and (min-width:480px){#wporg-header #head-search form{margin-left:0}}@media screen and (min-width:768px){#wporg-header{height:120px;text-align:inherit}#wporg-header h1{float:left;padding-left:10px}#wporg-header h2.rosetta{float:left;margin-left:0;padding:36px 27px 0}#wporg-header #headline h2{text-rendering:optimizeLegibility}#wporg-header #wporg-header-menu{float:left;height:46px;list-style:none;margin:-15px 0 0;max-width:inherit;min-width:0;padding:0;position:static;width:100%}#wporg-header ul li{float:left;position:relative}#wporg-header ul li a{heigh
 t:46px;padding:0 6px}#wporg-header ul li a.current~.uparrow{border-bottom:9px solid #f7f7f7;border-left:9px solid transparent;border-right:9px solid transparent;height:0;margin:-8px auto 0;width:0}#wporg-header ul li.current-menu-item:after,#wporg-header ul li.current_page_parent:after{border-bottom:9px solid #f7f7f7;border-left:9px solid transparent;border-right:9px solid transparent;content:"";height:0;left:50%;margin:-8px 0 0 -9px;position:absolute;width:0}#wporg-header ul li .nav-submenu:hover~.uparrow,#wporg-header ul li:hover .nav-submenu~.uparrow{border-bottom:9px solid #32373c;border-left:9px solid transparent;border-right:9px solid transparent;height:0;margin:-10px auto 0;width:0}#wporg-header ul li .nav-submenu{background:#32373c;border:1px solid #32373c;border-top:0;margin-top:-1px;min-width:0}#wporg-header ul li .nav-submenu li{float:none}#wporg-header ul li .nav-submenu li a{height:34px;line-height:34px}#wporg-header .nav-menu .focus>ul,#wporg-header .nav-m
 enu ul li:hover>ul,#wporg-header ul.nav-menu .focus>ul,#wporg-header ul.nav-menu li:hover>ul{clip:inherit;height:inherit;overflow:inherit;width:inherit}#wporg-header ul li.current-menu-item:after,#wporg-header ul li.current_page_parent:after,#wporg-header ul li a.current~.uparrow{border-bottom-color:#0073aa}}.page-download #wporg-header #download,.page-parent-download #wporg-header #download{display:none}#mobile-menu-button{background:none;border:none;box-shadow:none;display:block;float:left;font-family:dashicons;font-size:16px;font-style:normal;font-weight:400;left:10px;line-height:1;padding:1px;position:absolute;text-align:center;text-decoration:inherit;text-shadow:none;top:75px;transition:color .1s ease-in;vertical-align:top;-webkit-font-smoothing:antialiased}#mobile-menu-button:before{border:none;box-sizing:border-box;color:#888;content:"";display:inline-block;float:left;font:normal 50px/1 Dashicons;margin:0;outline:none;padding:3px;text-decoration:none;ver
 tical-align:middle;-webkit-font-smoothing:antialiased}@media screen and (min-width:768px){#mobile-menu-button{display:none}}#download-mobile{background:#f7f7f7;border-bottom:1px solid #ddd}#download-mobile .wrapper{padding:20px 0;text-align:center}#download-mobile span.download-ready{font-size:1.6em;margin:0 .25em}#download-mobile a.download-button{font-size:1.6em;height:inherit;margin:10px .25em;padding:10px 15px}.category-context__bar{margin:0 1.5rem;background:#edeff0;border-radius:2px;font-size:.8125rem;overflow:auto;transition:all .1s ease-out;transition-delay:.1s}.category-context__bar>div{display:flex;align-items:center;justify-content:space-between}@media only screen and (min-width:782px){.category-context__bar{margin:0 1.5rem}}@media only screen and (min-width:960px){.category-context__bar{margin:0 auto;max-width:960px}}.category-context__bar ul{margin:0;padding:0;display:flex;justify-content:space-between}.category-context__bar ul li{list-style:none;font-size:.8125rem}.
 category-context__bar ul li a{display:block;padding:1.125rem .75rem;text-decoration:none}.category-context__bar ul li:last-child a{padding-right:1.5rem}.category-context__bar__copy{margin:0;padding:1.125rem 1.5rem;font-size:.8125rem;font-weight:400}.category-context__bar__title{margin:0;padding-right:1.5rem;color:#555d66;font-size:.75rem;font-weight:400;text-transform:uppercase}.category-context__bar__links{display:flex;align-items:center}@media only screen and (max-width:782px){.category-context__bar__links{display:none}}.category-context__bar--is-hidden{height:0;overflow:hidden}.category-menu{margin:0;padding:0;position:relative}.category-menu li{display:inline-block;margin:0;list-style:none}.category-menu a{display:block;padding:.5rem .75rem;color:#40464d;font-size:.875rem;text-decoration:none}.category-menu a:active,.category-menu a:focus,.category-menu a:hover{color:#000}li .category-menu--is-active{color:#fff;background:#0073aa;border-radius:2px}li .category-menu--is-active:fo
 cus,li .category-menu--is-active:hover{color:#fff}.category-menu__mobile{padding:0!important;border-top:none!important}.category-menu__mobile ul{margin:0;padding:0;background:#23282d}.category-menu__mobile li{list-style:none;border-top:1px solid #32373c}.category-menu__mobile li a{display:block;padding:1rem 1.5rem;font-size:.875rem;text-decoration:none;color:#ccd0d4}.category-menu__mobile>.components-panel__body-title{margin:0!important}.category-menu__mobile>.components-panel__body-title>button{padding:1.5rem}.category-menu--is-loading{height:24px;position:relative}.category-menu--is-loading:after{content:"";position:absolute;background:#f3f4f5;border-radius:4px;width:80%;height:24px;left:0;top:calc(50% - 12px);transition:none}.category-search{display:flex;align-items:center;background:#fff;border:1px solid #6c7782;border-radius:2px}.category-search input[type=search]{flex-grow:1;margin:0;padding:.25rem .5rem;border:none;box-shadow:none;font-size:.8125rem}.catego
 ry-search input[type=search]:focus{outline:1px auto #0073aa}.category-search__button{display:flex;background:transparent;border:none;color:#6c7782}.category-search__button:active{background:#d7dade}.category-search__button:focus{outline:1px auto #0073aa}.category-search--is-loading{display:block;height:24px;min-width:100%;background:#f3f4f5;border-radius:4px}@media only screen and (min-width:480px){.category-search--is-loading{width:224px!important;min-width:auto!important}}.pattern__copy-button{transition:all 75ms ease-in-out}.pattern__copy-button.is-small{font-size:.75rem;padding:.75rem;height:auto}.pattern__favorite-button{position:relative;font-size:.875rem;height:2.25rem;width:2.25rem;border-radius:2px;color:#606a74}.pattern__favorite-button svg{position:absolute;top:calc(50% - .75rem);left:calc(50% - .75rem);height:1.5rem;width:1.5rem;transition:all .15s ease-out}.pattern__favorite-button svg path{fill:#6c7782}.pattern__favorite-button .pattern__favorite-filled{opacity:0}.patt
 ern__favorite-button:hover{color:#555d66;background:transparent}.pattern__favorite-button:hover svg path{fill:#555d66}.pattern__favorite-button:active{background:transparent;box-shadow:none;transform:none}.pattern__favorite-button.is-favorited{color:#555d66}.pattern__favorite-button.is-favorited svg path{fill:#d94f4f}.pattern__favorite-button.is-favorited .pattern__favorite-outline{opacity:0;transform:scale(2.8)}.pattern__favorite-button.is-favorited .pattern__favorite-filled{opacity:1}.pattern__favorite-button.is-favorited:hover .pattern__favorite-filled{animation:HeartBeat .9s infinite}@media (prefers-reduced-motion){.pattern__favorite-button.is-favorited:hover .pattern__favorite-filled{animation:none}}.pattern__favorite-button.has-label{padding:12px 18px 12px 38px;height:auto;width:auto}.pattern__favorite-button.has-label svg{top:calc(50% - 12px);left:9px}.pattern__favorite-button[disabled]{background:transparent!important;text-shadow:none!important;color:#606a74!important}@keyfr
 ames HeartBeat{0%{transform:scale(1)}25%{transform:scale(1.2)}40%{transform:scale(1)}60%{transform:scale(1.2)}to{transform:scale(1)}}.main-navigation{float:none;position:static;width:auto}.main-navigation a{font-size:.8125rem}.main-navigation.toggled div.menu{position:absolute;top:57px;right:0;width:100%;background:#0073aa}.menu-toggle{position:static;height:auto;width:auto;font-size:1.5625rem;overflow:hidden;-webkit-appearance:none}body.page .entry-header{background:none;padding:0}body.page .entry-header .entry-title{color:inherit;margin:2rem auto 1rem;max-width:960px}@media screen and (min-width:737px){body.page .entry-header .entry-title{padding:0 10px}}.pattern-grid-menu{margin:0 auto;max-width:960px;display:flex;flex-direction:column;justify-content:space-between;align-items:center}.pattern-grid-menu>:first-child,.pattern-grid-menu>:last-child{width:100%}.pattern-grid-menu>:last-child{margin:1.5rem;width:calc(100% - 3rem)}@media only screen and (min-width:782px){.patte
 rn-grid-menu{margin:1.5rem;flex-direction:row}.pattern-grid-menu>:last-child{margin:0;width:auto}}@media only screen and (min-width:960px){.pattern-grid-menu{margin:1.5rem auto}}.pattern-grid{max-width:960px;margin:1.5rem}@media screen and (min-width:600px){.pattern-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.pattern-grid>*{align-self:baseline}}@media screen and (min-width:960px){.pattern-grid{margin-left:auto;margin-right:auto}}.pattern-grid__pattern{position:relative;margin:0 0 1.5rem;border:1px solid #d7dade;border-radius:2px;transition:all 75ms ease-in-out}@media screen and (min-width:600px){.pattern-grid__pattern{display:inline-block;margin:0}}.pattern-grid__pattern .pattern-grid__preview{overflow:hidden}.pattern-grid__pattern .pattern-grid__actions{position:absolute;right:0;bottom:0;left:0;display:flex;align-items:center;padding:.375rem;background:hsla(0,0%,100%,.8);backdrop-filter:blur(3px);opacity:0;transform:translateY(6px);
 transition:all 75ms ease-in-out}.pattern-grid__pattern .pattern-grid__actions .pattern-grid__title{flex-grow:1;margin:0;padding:0 .375rem 0 .75rem;font-size:.75rem;pointer-events:none}.pattern-grid__pattern .pattern-grid__actions .pattern__copy-button,.pattern-grid__pattern .pattern-grid__actions .pattern__favorite-button{flex-shrink:0}.pattern-grid__pattern .pattern-grid__actions .button+.button{margin-left:.375rem}.pattern-grid__pattern:focus-within .pattern-grid__actions,.pattern-grid__pattern:hover .pattern-grid__actions{opacity:1;transform:translateY(0)}.pattern-preview__container{padding:2rem 0 0;background:#f3f4f5}.pattern-preview__viewport{position:relative;margin:0 auto;padding:0 20px;max-width:100vw;min-width:320px}.pattern-preview__viewport .pattern-preview__viewport-iframe{background:#fff;border:1px solid #e8eaeb;vertical-align:middle;max-width:100vw}.pattern-preview__viewport:focus-within .pattern-preview__resize-help{clip:auto;clip-path:none;height:auto;margin:initial;
 overflow:initial;width:auto;bottom:-1rem;left:20px;right:20px;padding:8px 16px;background:#fff;border-radius:2px;border:1px solid #d7dade;text-align:center}.pattern-preview__drag-handle{position:absolute;top:0;bottom:0;width:20px}.pattern-preview__drag-handle.is-left{left:0}.pattern-preview__drag-handle.is-right{right:0}.pattern-preview__drag-handle-button{position:absolute;top:calc(50% - 50px);left:6px;padding:0;width:8px;height:100px;appearance:none;cursor:grab;outline:none;background:#7e8993;border-radius:99999px;border:none}.pattern-preview__drag-handle-button:hover{background:#6c7782}.pattern-preview__drag-handle-button:active{cursor:grabbing;background:#606a74}.pattern-preview__drag-handle-button:focus{box-shadow:0 1px 0 #0073aa,0 0 2px 1px #33b3db}.pattern-report-button{color:#23282d!important}.pattern-report-button__copy{margin:0;display:flex;justify-content:center;align-items:center}.pattern-report-button__copy svg{margin-right:.375rem}.pattern-report-modal{max-width:400px;
 width:100%}@media screen and (min-width:600px){.pattern-report-modal{width:400px}}.pattern-report-modal form>:first-child{padding-bottom:1.5rem}.pattern-report-modal__has-fixed-height{min-height:400px}.pattern-report-modal__copy{text-align:center;line-height:1.5}.pattern-report-modal__actions{margin-top:1.5rem;display:grid;grid-template-columns:48% 48%;column-gap:4%}.pattern-report-modal__actions button{justify-content:center}.pattern-report-modal__radio .components-radio-control__option{margin-top:.75rem}body.single-wporg-pattern{box-sizing:border-box;font-size:14px;font-weight:400;line-height:1.2}body.single-wporg-pattern .site-content{margin:auto;max-width:none;padding:0}body.single-wporg-pattern .entry-header{max-width:960px;padding:1.5rem;margin-left:auto;margin-right:auto}@media only screen and (min-width:960px){body.single-wporg-pattern .entry-header{padding:1.5rem 0}}body.single-wporg-pattern .entry-header .entry-title{margin-top:0;line-height:1.2}body.single-wporg-patter
 n .pattern-actions{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:.5em 2em}body.single-wporg-pattern .pattern-actions button{margin:0}@media (max-width:480px){body.single-wporg-pattern .pattern-actions{justify-content:center}}body.single-wporg-pattern .pattern-actions__notice{margin:1.5rem 0 0;height:auto;flex-basis:100%}body.single-wporg-pattern .pattern-actions__notice>*{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;margin:0}body.single-wporg-pattern .pattern-actions__notice>* button{margin-top:.75rem}@media only screen and (min-width:600px){body.single-wporg-pattern .pattern-actions__notice>*{align-items:center;flex-direction:row}body.single-wporg-pattern .pattern-actions__notice>* button{margin-top:0}}body.single-wporg-pattern .pattern-actions__guide{max-width:384px;height:auto;max-height:none}body.single-wporg-pattern .pattern-actions__guide-content{padding:1.5rem;line-height:1.5}body.single-wp
 org-pattern .pattern-actions__guide-title{margin:0}body.single-wporg-pattern .pattern-actions__guide-shortcut{background:#edeff0;box-shadow:0 0 0 1px #ccd0d4;padding:1px;font-weight:600;min-width:20px;display:inline-block;text-align:center;border-radius:2px}body.single-wporg-pattern .entry-content{max-width:960px;margin-left:auto;margin-right:auto}body.single-wporg-pattern .pattern__meta{padding:2rem 0;background:#f3f4f5}body.single-wporg-pattern .pattern__meta>div{max-width:960px;margin-left:auto;margin-right:auto;display:flex;justify-content:space-between}body.single-wporg-pattern .pattern__meta .pattern-preview__report{text-align:right}.site-header:not(.home) .search-form{display:flex;align-items:center}.site-header:not(.home) .search-form>input{flex:1;border:0;border-radius:2px 0 0 2px;display:inline-block;font-size:12px;padding:5px 10px;position:relative;width:auto;height:100%}.site-header:not(.home) .search-form button{margin:0;border-radius:0 2px 2px 0;padding:3px 12px;
 height:unset}.search-form--is-inline .search-form{display:flex;justify-content:space-between;background:#fff}.search-form--is-inline .search-form>label{flex:1}.search-form--is-inline .search-form input{padding:.5rem;background:transparent;border:none;box-shadow:none;width:100%;font-size:14px}@media only screen and (min-width:768px){.search-form--is-inline .search-form input{font-size:16px}}.search-form--is-inline .search-form button{background:transparent;margin-bottom:0;border:0;box-shadow:none;height:inherit;text-shadow:none;color:#32373c}.search-form--is-inline .search-form button:focus{-webkit-box-shadow:0 0 2px 1px #0073aa;box-shadow:0 0 2px 1px #0073aa}.search-form--is-centered .search-form{margin:0 auto}.search-form--is-constrained .search-form{max-width:36rem}.search-form--is-muted .search-form{border-color:#d7dade!important}.search-form--is-muted .search-form button,.search-form--is-muted .search-form input{background:#f8f9f9;color:#7e8993}.search-form--has-medium-text .
 search-form input{font-size:14px}.search-form--has-border .search-form{border:1px solid #7e8993}.section-heading_link,.section-heading_title{margin-bottom:0}.section-heading_title{font-weight:300}.section-heading_title .archive-title-prefix{display:block;font-size:1rem}.section-heading_link{text-decoration:underline;font-weight:600;margin-top:1.5rem!important}@media only screen and (min-width:768px){.section-heading_link{margin-top:0!important}}.section-heading_description{margin:1rem 0 0}.section-heading_description :last-child{margin-bottom:0}.section-heading--with-space{padding-bottom:16px}.site-content{margin:0 auto;max-width:none;padding:0}body.home .site-header{padding:3.75rem 1rem;text-align:left}body.home .site-branding{display:grid;grid-template-rows:auto 1fr;grid-template-columns:1fr 22rem}body.home .site-branding>*{align-self:center}@media screen and (max-width:736px){body.home .site-branding{display:block}}body.home .site-title.site-title{grid-column-start:1;grid-row-
 start:1;margin-top:0;text-align:left;font-size:3rem;line-height:1.25}body.home .site-description{grid-column-start:1;grid-row-start:2;margin:0;font-size:1.25rem;line-height:1.6;text-align:left;color:#fff}body.home .site-callout{grid-column-start:2;grid-row-start:1;grid-row-end:span 2;margin-left:4rem;padding:1.125rem 1.5rem 1.5rem;font-size:.875rem;line-height:1.6;background:#fff;box-shadow:.75rem .75rem 0 rgba(0,0,0,.15)}body.home .site-callout h2{margin-top:0;font-size:1.125rem;line-height:1.25;font-weight:600}body.home .site-callout p:last-child{margin-bottom:0}@media screen and (max-width:736px){body.home .site-callout{margin:2rem auto 0;max-width:24rem}}body:not(.home) .site-branding{display:flex;align-items:center;justify-content:space-between;font-size:.8125rem;color:#fff}body:not(.home) .site-branding a{color:#fff}body:not(.home) .site-branding .sep{margin-left:.5rem;margin-right:.5rem}body:not(.home) .site-branding .is-current-page{font-weight:600}.site-title a{text-decorat
 ion:none}.site-title a:active,.site-title a:focus,.site-title a:hover{color:#fff}.has-wporg-blue-color{color:#1e8cbe}.has-wporg-blue-background-color{background-color:#1e8cbe}.has-wporg-purple-color{color:#826eb4}.has-wporg-purple-background-color{background-color:#826eb4}.has-wporg-white-color{color:#fff}.has-wporg-white-background-color{background-color:#fff}.home-page .shapes{position:relative;margin:0 auto}.home-page .shapes .parallelogram p:before{font-size:64px;height:64px;left:-16px;position:relative}.home-page .shapes .parallelogram{color:#fff;display:block;margin:0 auto;opacity:.9;padding:60px 40px;text-align:center;text-decoration:none}.home-page .shapes strong{display:block;font-size:28px;font-weight:300;padding-bottom:15px;padding-top:15px}.home-page .shapes p{color:#fff;font-size:16px;font-weight:300;margin:0}.home-page .shapes u{display:block;font-size:18px;padding-top:15px}@media only screen and (min-width:768px){.home-page .shapes{height:400px}.home-page .shapes .par
 allelogram{width:50%;position:absolute;padding:50px 90px}}@media only screen and (min-width:960px){.home-page .shapes .parallelogram{-webkit-transform:skew(-15deg);-ms-transform:skew(-15deg);transform:skew(-15deg)}.home-page .shapes .parallelogram:before,.home-page .shapes p{-webkit-transform:skew(15deg);-ms-transform:skew(15deg);transform:skew(15deg)}}@media only screen and (min-width:1200px){.home-page .shapes{margin:0 -60px}}.terms{font-style:italic;font-size:14px}
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternsfunctionsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/functions.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/functions.php  2021-05-17 05:26:25 UTC (rev 10982)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/functions.php    2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3,6 +3,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> namespace WordPressdotorg\Pattern_Directory\Theme;
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> use const WordPressdotorg\Pattern_Directory\Pattern_Post_Type\POST_TYPE;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+use const WordPressdotorg\Pattern_Directory\Pattern_Flag_Post_Type\POST_TYPE as FLAG_POST_TYPE;
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'after_setup_theme', __NAMESPACE__ . '\setup' );
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_assets' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -136,3 +137,21 @@
</span><span class="cx" style="display: block; padding: 0 10px"> function use_index_php_as_template() {
</span><span class="cx" style="display: block; padding: 0 10px">        return __DIR__ . '/index.php';
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+/**
+ * Checks whether the user has a pending flag for a specific pattern.
+ *
+ * @return bool
+ */
+function user_has_flagged_pattern() {
+       $args = array(
+               'author' => get_current_user_id(),
+               'post_parent' => get_the_ID(),
+               'post_type' => FLAG_POST_TYPE,
+               'post_status' => 'pending',
+       );
+
+       $items = new \WP_Query( $args );
+
+       return $items->have_posts();
+}
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternspackagejson"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/package.json</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/package.json   2021-05-17 05:26:25 UTC (rev 10982)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/package.json     2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -26,6 +26,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">        ],
</span><span class="cx" style="display: block; padding: 0 10px">        "devDependencies": {
</span><span class="cx" style="display: block; padding: 0 10px">                "@wordpress/a11y": "2.15.2",
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                "@wordpress/api-fetch": "3.23.1",
</ins><span class="cx" style="display: block; padding: 0 10px">                 "@wordpress/block-editor": "5.3.0",
</span><span class="cx" style="display: block; padding: 0 10px">                "@wordpress/browserslist-config": "3.0.1",
</span><span class="cx" style="display: block; padding: 0 10px">                "@wordpress/components": "13.0.0",
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -42,6 +43,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                "@wordpress/url": "2.22.0",
</span><span class="cx" style="display: block; padding: 0 10px">                "@wordpress/viewport": "2.26.0",
</span><span class="cx" style="display: block; padding: 0 10px">                "autoprefixer": "9.8.6",
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                "classnames": "2.3.1",
</ins><span class="cx" style="display: block; padding: 0 10px">                 "cssnano": "4.1.10",
</span><span class="cx" style="display: block; padding: 0 10px">                "grunt": "1.3.0",
</span><span class="cx" style="display: block; padding: 0 10px">                "grunt-contrib-watch": "1.1.0",
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssinglewporgpatternphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/single-wporg-pattern.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/single-wporg-pattern.php       2021-05-17 05:26:25 UTC (rev 10982)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/single-wporg-pattern.php 2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -10,6 +10,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> namespace WordPressdotorg\Pattern_Directory\Theme;
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> get_header();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+$user_has_reported = is_user_logged_in() ? user_has_flagged_pattern() : false;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><span class="cx" style="display: block; padding: 0 10px">        <input id="block-data" type="hidden" value="<?php echo rawurlencode( wp_json_encode( get_the_content() ) ); ?>" />
</span><span class="cx" style="display: block; padding: 0 10px">        <main id="main" class="site-main col-12" role="main">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -23,7 +26,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                <header class="entry-header">
</span><span class="cx" style="display: block; padding: 0 10px">                                        <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</span><span class="cx" style="display: block; padding: 0 10px">                                        <p>A large hero section with an example background image and a heading in the center.</p>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        <div id="pattern-actions" class="pattern-actions">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 <div id="pattern-actions" class="pattern-actions" data-id="<?php the_ID(); ?>">
</ins><span class="cx" style="display: block; padding: 0 10px">                                                 <button class="button button-primary">Copy Pattern</button>
</span><span class="cx" style="display: block; padding: 0 10px">                                                <button class="button">Add to favorites</button>
</span><span class="cx" style="display: block; padding: 0 10px">                                        </div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -44,7 +47,12 @@
</span><span class="cx" style="display: block; padding: 0 10px">                                                        }
</span><span class="cx" style="display: block; padding: 0 10px">                                                        ?>
</span><span class="cx" style="display: block; padding: 0 10px">                                                </div>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                                <div class="pattern__report">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                         <div id="pattern-report"
+                                                       class="pattern__report"
+                                                       data-post-id="<?php echo intval( get_the_ID() ); ?>"
+                                                       data-logged-in="<?php echo json_encode( is_user_logged_in() ); ?>"
+                                                       data-user-has-reported="<?php echo json_encode( $user_has_reported ); ?>"
+                                                       ">
</ins><span class="cx" style="display: block; padding: 0 10px">                                                         <button class="button">Report this pattern</button>
</span><span class="cx" style="display: block; padding: 0 10px">                                                </div>
</span><span class="cx" style="display: block; padding: 0 10px">                                        </div>
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentscategorymenudefaultjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/category-menu/default.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/category-menu/default.js        2021-05-17 05:26:25 UTC (rev 10982)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/category-menu/default.js  2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,57 +1,26 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px">  * External dependencies
</span><span class="cx" style="display: block; padding: 0 10px">  */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import { useEffect, useRef } from '@wordpress/element';
</del><span class="cx" style="display: block; padding: 0 10px"> import { ifViewportMatches } from '@wordpress/viewport';
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-const updateIndicatorLocation = ( container, { top, left, width, height } ) => {
-       if ( ! container ) {
-               return;
-       }
-
-       container.style.backgroundPositionX = `${ left }px`;
-       container.style.backgroundSize = `${ width }px ${ top + height }px`;
-};
-
</del><span class="cx" style="display: block; padding: 0 10px"> const DefaultMenu = ( { path, options, onClick, isLoading } ) => {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        const containerRef = useRef( null );
-       const activeRef = useRef( null );
-
-       useEffect( () => {
-               if ( ! containerRef || ! containerRef.current || ! activeRef || ! activeRef.current ) {
-                       return;
-               }
-
-               updateIndicatorLocation( containerRef.current, {
-                       top: activeRef.current.offsetTop,
-                       left: activeRef.current.offsetLeft,
-                       width: activeRef.current.offsetWidth,
-                       height: activeRef.current.offsetHeight,
-               } );
-       } );
-
</del><span class="cx" style="display: block; padding: 0 10px">         if ( ! isLoading && ! options.length ) {
</span><span class="cx" style="display: block; padding: 0 10px">                return null;
</span><span class="cx" style="display: block; padding: 0 10px">        }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        return (
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                <ul className={ `category-menu ${ isLoading ? 'category-menu--is-loading' : '' } ` } ref={ containerRef }>
-                       { options.map( ( i ) => {
-                               const isActive = path === i.value;
-
-                               return (
-                                       <li key={ i.value }>
-                                               <a
-                                                       className={ isActive ? 'category-menu--is-active' : '' }
-                                                       href={ i.value }
-                                                       ref={ isActive ? activeRef : null }
-                                                       onClick={ onClick }
-                                               >
-                                                       { i.label }
-                                               </a>
-                                       </li>
-                               );
-                       } ) }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         <ul className={ `category-menu ${ isLoading ? 'category-menu--is-loading' : '' } ` }>
+                       { options.map( ( i ) => (
+                               <li key={ i.value }>
+                                       <a
+                                               className={ path === i.value ? 'category-menu--is-active' : '' }
+                                               href={ i.value }
+                                               onClick={ onClick }
+                                       >
+                                               { i.label }
+                                       </a>
+                               </li>
+                       ) ) }
</ins><span class="cx" style="display: block; padding: 0 10px">                 </ul>
</span><span class="cx" style="display: block; padding: 0 10px">        );
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentsfavoritebuttonindexjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/favorite-button/index.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/favorite-button/index.js                                (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/favorite-button/index.js  2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,65 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { store as coreStore } from '@wordpress/core-data';
+import { useCallback } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import IconHeartOutline from '../icons/heart-outline';
+import IconHeartFilled from '../icons/heart-filled';
+import { store as patternStore } from '../../store';
+
+const FavoriteButton = ( { showLabel = true, patternId } ) => {
+       const { hasPermission, isFavorite } = useSelect( ( select ) => {
+               // Fetch favorites so that the state is synced.
+               select( patternStore ).getFavorites();
+               return {
+                       // canUser defaults to adding `/wp/v2/` prefix, so we need to backtrack up the path.
+                       hasPermission: !! select( coreStore ).canUser( 'create', '../../wporg/v1/pattern-favorites' ),
+                       isFavorite: select( patternStore ).isFavorite( patternId ),
+               };
+       } );
+       const { addFavorite, removeFavorite } = useDispatch( patternStore );
+       const onClick = useCallback( () => {
+               if ( isFavorite ) {
+                       removeFavorite( patternId );
+               } else {
+                       addFavorite( patternId );
+               }
+       }, [ isFavorite ] );
+
+       if ( ! hasPermission ) {
+               return null;
+       }
+
+       const buttonClasses = classnames( 'button button-link pattern__favorite-button', {
+               'is-favorited': isFavorite,
+               'has-label': showLabel,
+       } );
+       const labelClasses = classnames( {
+               'screen-reader-text': ! showLabel,
+       } );
+
+       return (
+               <button className={ buttonClasses } onClick={ onClick }>
+                       <IconHeartFilled className="pattern__favorite-filled" />
+                       <IconHeartOutline className="pattern__favorite-outline" />
+                       <span className={ labelClasses }>
+                               { isFavorite
+                                       ? __( 'Remove from favorites', 'wporg-patterns' )
+                                       : __( 'Add to favorites', 'wporg-patterns' ) }
+                       </span>
+               </button>
+       );
+};
+
+export default FavoriteButton;
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatternpreviewactionsindexjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview-actions/index.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview-actions/index.js        2021-05-17 05:26:25 UTC (rev 10982)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview-actions/index.js  2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7,11 +7,11 @@
</span><span class="cx" style="display: block; padding: 0 10px">  * Internal dependencies
</span><span class="cx" style="display: block; padding: 0 10px">  */
</span><span class="cx" style="display: block; padding: 0 10px"> import CopyPatternButton from '../copy-pattern-button';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import AddToFavoriteButton from '../add-to-favorite-button';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import FavoriteButton from '../favorite-button';
</ins><span class="cx" style="display: block; padding: 0 10px"> import CopySuccessMessage from './copy-success-message';
</span><span class="cx" style="display: block; padding: 0 10px"> import CopyGuide from './copy-guide';
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-const PatternPreviewActions = () => {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+const PatternPreviewActions = ( { patternId } ) => {
</ins><span class="cx" style="display: block; padding: 0 10px">         const [ showSuccess, setShowSuccess ] = useState( false );
</span><span class="cx" style="display: block; padding: 0 10px">        const [ showGuide, setShowGuide ] = useState( false );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -18,7 +18,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">        return (
</span><span class="cx" style="display: block; padding: 0 10px">                <>
</span><span class="cx" style="display: block; padding: 0 10px">                        <CopyPatternButton onSuccess={ () => setShowSuccess( true ) } />
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        <AddToFavoriteButton />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 <FavoriteButton patternId={ patternId } />
</ins><span class="cx" style="display: block; padding: 0 10px">                         { showSuccess && <CopySuccessMessage onClick={ () => setShowGuide( true ) } /> }
</span><span class="cx" style="display: block; padding: 0 10px">                        { showGuide && <CopyGuide onFinish={ () => setShowGuide( false ) } /> }
</span><span class="cx" style="display: block; padding: 0 10px">                </>
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatternthumbnailindexjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-thumbnail/index.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-thumbnail/index.js      2021-05-17 05:26:25 UTC (rev 10982)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-thumbnail/index.js        2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3,20 +3,17 @@
</span><span class="cx" style="display: block; padding: 0 10px">  */
</span><span class="cx" style="display: block; padding: 0 10px"> import { speak } from '@wordpress/a11y';
</span><span class="cx" style="display: block; padding: 0 10px"> import { __, sprintf } from '@wordpress/i18n';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import { Button, Disabled, Tooltip } from '@wordpress/components';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import { Button, Disabled } from '@wordpress/components';
</ins><span class="cx" style="display: block; padding: 0 10px"> import { useEffect, useState } from '@wordpress/element';
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px">  * Internal dependencies
</span><span class="cx" style="display: block; padding: 0 10px">  */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import IconHeartOutline from '../icons/heart-outline';
-import IconHeartFilled from '../icons/heart-filled';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import FavoriteButton from '../favorite-button';
</ins><span class="cx" style="display: block; padding: 0 10px"> import Canvas from './canvas';
</span><span class="cx" style="display: block; padding: 0 10px"> import { copyToClipboard } from '../../utils';
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> function PatternThumbnail( { pattern } ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        // @todo Implement a real favoriting process.
-       const [ isFavorite, setFavorite ] = useState( Math.random() < 0.3 );
</del><span class="cx" style="display: block; padding: 0 10px">         const [ copied, setCopied ] = useState( false );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        const handleCopy = () => {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -54,23 +51,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        </a>
</span><span class="cx" style="display: block; padding: 0 10px">                        <div className="pattern-grid__actions">
</span><span class="cx" style="display: block; padding: 0 10px">                                <h2 className="pattern-grid__title">{ pattern.title.rendered }</h2>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                <Tooltip
-                                       text={
-                                               isFavorite
-                                                       ? __( 'Remove pattern from favorites', 'wporg-patterns' )
-                                                       : __( 'Favorite pattern', 'wporg-patterns' )
-                                       }
-                               >
-                                       <button
-                                               className={
-                                                       'button button-link pattern__favorite-button' + ( isFavorite ? ' is-favorited' : '' )
-                                               }
-                                               onClick={ () => setFavorite( ! isFavorite ) }
-                                       >
-                                               <IconHeartFilled className="pattern__favorite-filled" />
-                                               <IconHeartOutline className="pattern__favorite-outline" />
-                                       </button>
-                               </Tooltip>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         <FavoriteButton showLabel={ false } patternId={ pattern.id } />
</ins><span class="cx" style="display: block; padding: 0 10px">                                 <Button className="pattern__copy-button is-small" isPrimary onClick={ handleCopy }>
</span><span class="cx" style="display: block; padding: 0 10px">                                        { copied ? __( 'Copied!', 'wporg-patterns' ) : __( 'Copy', 'wporg-patterns' ) }
</span><span class="cx" style="display: block; padding: 0 10px">                                </Button>
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentsreportpatternbuttonindexjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/report-pattern-button/index.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/report-pattern-button/index.js                          (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/report-pattern-button/index.js    2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,58 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Icon, check } from '@wordpress/icons';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import ReportPatternModal from '../report-pattern-modal';
+
+const ReportPatternButton = ( { postId, loggedIn, userHasReported } ) => {
+       const [ showModal, setShowModal ] = useState( false );
+       const [ hasSubmitted, setHasSubmitted ] = useState( false );
+       const alreadySubmitted = userHasReported || hasSubmitted;
+
+       if ( alreadySubmitted ) {
+               return (
+                       <p className="pattern-report-button__copy">
+                               <Icon icon={ check } />
+                               { __( "You've reported this pattern", 'wporg-patterns' ) }
+                       </p>
+               );
+       }
+
+       if ( ! loggedIn ) {
+               return (
+                       <p className="pattern-report-button__copy">
+                               <a href={ addQueryArgs( '/wp-login.php', { redirect_to: window.location.pathname } ) }>
+                                       { __( 'Login to report this pattern', 'wporg-patterns' ) }
+                               </a>
+                       </p>
+               );
+       }
+
+       return (
+               <>
+                       <Button className="pattern-report-button" isLink onClick={ () => setShowModal( true ) }>
+                               { __( 'Report this pattern', 'wporg-patterns' ) }
+                       </Button>
+
+                       { showModal && (
+                               <ReportPatternModal
+                                       postId={ postId }
+                                       onClose={ ( submitted ) => {
+                                               setShowModal( false );
+                                               setHasSubmitted( submitted );
+                                       } }
+                               />
+                       ) }
+               </>
+       );
+};
+
+export default ReportPatternButton;
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentsreportpatternmodalindexjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/report-pattern-modal/index.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/report-pattern-modal/index.js                           (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/report-pattern-modal/index.js     2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,152 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * WordPress dependencies
+ */
+import { speak } from '@wordpress/a11y';
+import { useReducer, useRef, useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { Button, Modal, RadioControl, Spinner, TextareaControl } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import { store as patternStore } from '../../store';
+
+const reducer = ( state, action ) => {
+       switch ( action.status ) {
+               case 'submitting':
+                       return { isSubmitting: true };
+               case 'submitted':
+                       return { isSubmitted: true };
+               case 'error':
+                       return { hasError: true, message: action.message };
+               default:
+                       return {};
+       }
+};
+
+const ReportPatternModal = ( { postId, onClose } ) => {
+       const [ state, dispatch ] = useReducer( reducer, {} );
+       const [ selectedOption, setOption ] = useState( '' );
+       const [ details, setDetails ] = useState( '' );
+       const container = useRef();
+
+       const submittedText = __( 'Your report has been submitted.', 'wporg-patterns' );
+
+       const { isLoading, mappedReasons } = useSelect( ( select ) => {
+               const { getPatternFlagReasons, isLoadingPatternFlagReasons } = select( patternStore );
+               const reasons = getPatternFlagReasons() || [];
+
+               return {
+                       isLoading: isLoadingPatternFlagReasons(),
+                       mappedReasons: reasons
+                               .sort( ( a, b ) => a.id - b.id )
+                               .map( ( i ) => {
+                                       // We need to convert id to string to make the RadioControl match the selected item.
+                                       return { label: i.name, value: i.id.toString() };
+                               } ),
+               };
+       } );
+
+       const handleSubmit = ( event ) => {
+               event.preventDefault();
+
+               if ( ! selectedOption || ! details.length || state.isSubmitted || state.isSubmitting ) {
+                       return;
+               }
+
+               dispatch( { status: 'submitting' } );
+
+               apiFetch( {
+                       path: addQueryArgs( '/wp/v2/wporg-pattern-flag' ),
+                       method: 'POST',
+                       data: {
+                               parent: postId,
+                               'wporg-pattern-flag-reason': selectedOption,
+                               excerpt: details,
+                       },
+               } )
+                       .then( () => {
+                               dispatch( { status: 'submitted' } );
+                               speak( submittedText );
+                               container.current.closest( '[role="dialog"]' ).focus();
+                       } )
+                       .catch( ( err ) => {
+                               dispatch( {
+                                       status: 'error',
+                                       message: err.message,
+                               } );
+
+                               speak(
+                                       sprintf(
+                                               /* translators: %s: Error message. */
+                                               __( 'Error: %s', 'wporg-patterns' ),
+                                               err.message
+                                       )
+                               );
+                       } );
+       };
+
+       const handleClose = () => {
+               onClose( state.isSubmitted );
+       };
+
+       const renderView = () => {
+               if ( isLoading ) {
+                       return <Spinner />;
+               }
+
+               if ( state.isSubmitted ) {
+                       return <p className="pattern-report-modal__copy">{ submittedText }</p>;
+               }
+
+               return (
+                       <form onSubmit={ handleSubmit }>
+                               <RadioControl
+                                       className="pattern-report-modal__radio"
+                                       label={ __( 'Please choose a reason:', 'wporg-patterns' ) }
+                                       selected={ selectedOption }
+                                       options={ mappedReasons }
+                                       onChange={ setOption }
+                                       required={ true }
+                               />
+                               <TextareaControl
+                                       label="Please provide details (required)"
+                                       value={ details }
+                                       onChange={ setDetails }
+                                       required={ true }
+                               />
+
+                               { state.hasError && (
+                                       <div className="notice notice-large notice-alt notice-error">{ state.message }</div>
+                               ) }
+                               <div className="pattern-report-modal__actions">
+                                       <Button isSecondary onClick={ handleClose }>
+                                               { __( 'Cancel', 'wporg-patterns' ) }
+                                       </Button>
+                                       <Button type="submit" isBusy={ state.isSubmitting } isPrimary>
+                                               { state.isSubmitting
+                                                       ? __( 'Submitting …', 'wporg-patterns' )
+                                                       : __( 'Report', 'wporg-patterns' ) }
+                                       </Button>
+                               </div>
+                       </form>
+               );
+       };
+
+       return (
+               <Modal
+                       className={ `pattern-report-modal ${
+                               ! state.isSubmitted ? 'pattern-report-modal__has-fixed-height' : ''
+                       }` }
+                       title={ __( 'Report this pattern', 'wporg-patterns' ) }
+                       onRequestClose={ handleClose }
+               >
+                       <div ref={ container }>{ renderView() }</div>
+               </Modal>
+       );
+};
+
+export default ReportPatternModal;
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcindexjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/index.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/index.js   2021-05-17 05:26:25 UTC (rev 10982)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/index.js     2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -8,6 +8,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">  */
</span><span class="cx" style="display: block; padding: 0 10px"> import PatternPreview from './components/pattern-preview';
</span><span class="cx" style="display: block; padding: 0 10px"> import PatternPreviewActions from './components/pattern-preview-actions';
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import ReportPatternButton from './components/report-pattern-button';
</ins><span class="cx" style="display: block; padding: 0 10px"> import Patterns from './components/patterns';
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> // Load the preview into any awaiting preview container.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -32,5 +33,23 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // Load the pattern preview actions
</span><span class="cx" style="display: block; padding: 0 10px"> const patternActionsContainer = document.getElementById( 'pattern-actions' );
</span><span class="cx" style="display: block; padding: 0 10px"> if ( patternActionsContainer ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        render( <PatternPreviewActions />, patternActionsContainer );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ render(
+               <PatternPreviewActions patternId={ Number( patternActionsContainer.dataset.id ) } />,
+               patternActionsContainer
+       );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+// Load report button
+const patternReportContainer = document.getElementById( 'pattern-report' );
+if ( patternReportContainer ) {
+       const { loggedIn, postId, userHasReported } = patternReportContainer.dataset;
+
+       render(
+               <ReportPatternButton
+                       userHasReported={ userHasReported === 'true' }
+                       loggedIn={ loggedIn === 'true' }
+                       postId={ postId }
+               />,
+               patternReportContainer
+       );
+}
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcstoreactionsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/actions.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/actions.js   2021-05-17 05:26:25 UTC (rev 10982)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/actions.js     2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,4 +1,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * WordPress dependencies
+ */
+import { apiFetch } from '@wordpress/data-controls';
+
+/**
</ins><span class="cx" style="display: block; padding: 0 10px">  * Get the action object signalling that patterns have been requested.
</span><span class="cx" style="display: block; padding: 0 10px">  *
</span><span class="cx" style="display: block; padding: 0 10px">  * @param {string} query Search string.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -49,3 +54,71 @@
</span><span class="cx" style="display: block; padding: 0 10px"> export function loadCategories( categories ) {
</span><span class="cx" style="display: block; padding: 0 10px">        return { type: 'LOAD_CATEGORIES', categories: categories };
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+/**
+ * Get the action object signalling that pattern flag reasons have been requested.
+ *
+ * @return {Object} Action object.
+ */
+export function fetchPatternFlagReasons() {
+       return { type: 'FETCH_PATTERN_FLAG_REASONS' };
+}
+
+/**
+ * Get the action object signalling that pattern flag reasons have been loaded.
+ *
+ * @param {Array} reasons A list of reasons.
+ * @return {Object} Action object.
+ */
+export function loadPatternFlagReasons( reasons ) {
+       return { type: 'LOAD_PATTERN_FLAG_REASONS', reasons: reasons };
+}
+
+/**
+ * Get the action object signalling that the favorites list has been loaded.
+ *
+ * @param {number[]} patternIds A list of pattern IDs.
+ *
+ * @return {Object} Action object.
+ */
+export function loadFavorites( patternIds ) {
+       return { type: 'LOAD_FAVORITES', patternIds: patternIds };
+}
+
+/**
+ * Get the action object to favorite a pattern.
+ *
+ * @param {number} patternId The pattern to favorite.
+ *
+ * @return {Object} Action object.
+ */
+export function* addFavorite( patternId ) {
+       const success = yield apiFetch( {
+               path: '/wporg/v1/pattern-favorites',
+               method: 'POST',
+               data: { id: patternId },
+       } );
+       // Silently discarding any errors.
+       if ( success === true ) {
+               return { type: 'ADD_FAVORITE', patternId: patternId };
+       }
+}
+
+/**
+ * Get the action object to unfavorite a pattern.
+ *
+ * @param {number} patternId The pattern to unfavorite.
+ *
+ * @return {Object} Action object.
+ */
+export function* removeFavorite( patternId ) {
+       const success = yield apiFetch( {
+               path: '/wporg/v1/pattern-favorites',
+               method: 'DELETE',
+               data: { id: patternId },
+       } );
+       // Silently discarding any errors.
+       if ( success === true ) {
+               return { type: 'REMOVE_FAVORITE', patternId: patternId };
+       }
+}
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcstoreindexjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/index.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/index.js     2021-05-17 05:26:25 UTC (rev 10982)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/index.js       2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7,10 +7,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px">  * Internal dependencies
</span><span class="cx" style="display: block; padding: 0 10px">  */
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import * as actions from './actions';
</ins><span class="cx" style="display: block; padding: 0 10px"> import reducer from './reducer';
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import * as resolvers from './resolvers';
</ins><span class="cx" style="display: block; padding: 0 10px"> import * as selectors from './selectors';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import * as actions from './actions';
-import * as resolvers from './resolvers';
</del><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px">  * Module Constants
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcstorereducerjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/reducer.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/reducer.js   2021-05-17 05:26:25 UTC (rev 10982)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/reducer.js     2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -22,6 +22,26 @@
</span><span class="cx" style="display: block; padding: 0 10px">        };
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+function byId( state = {}, action ) {
+       const patternsById = ( action.patterns || [] ).reduce( ( acc, cur ) => ( { ...acc, [ cur.id ]: cur } ), {} );
+       switch ( action.type ) {
+               case 'LOAD_BLOCK_PATTERNS':
+                       return { ...state, ...patternsById };
+               default:
+                       return state;
+       }
+}
+
+function queries( state = {}, action ) {
+       const patternIds = ( action.patterns || [] ).map( ( { id } ) => id );
+       switch ( action.type ) {
+               case 'LOAD_BLOCK_PATTERNS':
+                       return { ...state, [ action.query ]: [ ...( state[ action.query ] || [] ), ...patternIds ] };
+               default:
+                       return state;
+       }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px">  * Reducer to track categories.
</span><span class="cx" style="display: block; padding: 0 10px">  *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -60,24 +80,43 @@
</span><span class="cx" style="display: block; padding: 0 10px">        return state;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-function byId( state = {}, action ) {
-       const patternsById = ( action.patterns || [] ).reduce( ( acc, cur ) => ( { ...acc, [ cur.id ]: cur } ), {} );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Reducer to track pattern flag reasons.
+ *
+ * @param {Object} state Current state.
+ * @param {Object} action Dispatched action.
+ * @return {Object} Updated state.
+ */
+export function patternFlagReasons( state = undefined, action ) {
</ins><span class="cx" style="display: block; padding: 0 10px">         switch ( action.type ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                case 'LOAD_BLOCK_PATTERNS':
-                       return { ...state, ...patternsById };
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         case 'FETCH_PATTERN_FLAG_REASONS':
+                       return null;
+               case 'LOAD_PATTERN_FLAG_REASONS':
+                       return [ ...action.reasons ];
</ins><span class="cx" style="display: block; padding: 0 10px">                 default:
</span><span class="cx" style="display: block; padding: 0 10px">                        return state;
</span><span class="cx" style="display: block; padding: 0 10px">        }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-function queries( state = {}, action ) {
-       const patternIds = ( action.patterns || [] ).map( ( { id } ) => id );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Reducer to track the user's favorites.
+ *
+ * @param {Object} state Current state.
+ * @param {Object} action Dispatched action.
+ * @return {Object} Updated state.
+ */
+export function favorites( state = [], action ) {
+       const { patternId } = action;
</ins><span class="cx" style="display: block; padding: 0 10px">         switch ( action.type ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                case 'LOAD_BLOCK_PATTERNS':
-                       return { ...state, [ action.query ]: [ ...( state[ action.query ] || [] ), ...patternIds ] };
-               default:
-                       return state;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         case 'LOAD_FAVORITES':
+                       return action.patternIds;
+               case 'ADD_FAVORITE':
+                       return state.includes( patternId ) ? state : [ ...state, patternId ];
+               case 'REMOVE_FAVORITE':
+                       return state.filter( ( id ) => id !== patternId );
</ins><span class="cx" style="display: block; padding: 0 10px">         }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+       return state;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> export default combineReducers( {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -84,5 +123,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">        patterns,
</span><span class="cx" style="display: block; padding: 0 10px">        categories,
</span><span class="cx" style="display: block; padding: 0 10px">        currentQuery,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        // favorites,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ patternFlagReasons,
+       favorites,
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcstoreresolversjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/resolvers.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/resolvers.js 2021-05-17 05:26:25 UTC (rev 10982)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/resolvers.js   2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7,7 +7,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px">  * Internal dependencies
</span><span class="cx" style="display: block; padding: 0 10px">  */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import { fetchCategories, fetchPatterns, loadCategories, loadPatterns } from './actions';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import {
+       fetchCategories,
+       fetchPatternFlagReasons,
+       fetchPatterns,
+       loadCategories,
+       loadFavorites,
+       loadPatternFlagReasons,
+       loadPatterns,
+} from './actions';
</ins><span class="cx" style="display: block; padding: 0 10px"> import { getQueryString } from './utils';
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> export function* getPatternsByQuery( query ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -30,3 +38,23 @@
</span><span class="cx" style="display: block; padding: 0 10px">                yield loadCategories( results );
</span><span class="cx" style="display: block; padding: 0 10px">        } catch ( error ) {}
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+export function* getPatternFlagReasons() {
+       try {
+               yield fetchPatternFlagReasons();
+
+               const results = yield apiFetch( {
+                       path: addQueryArgs( '/wp/v2/wporg-pattern-flag-reason' ),
+               } );
+               yield loadPatternFlagReasons( results );
+       } catch ( error ) {}
+}
+
+export function* getFavorites() {
+       try {
+               const results = yield apiFetch( {
+                       path: '/wporg/v1/pattern-favorites',
+               } );
+               yield loadFavorites( results );
+       } catch ( error ) {}
+}
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcstoreselectorsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/selectors.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/selectors.js 2021-05-17 05:26:25 UTC (rev 10982)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/selectors.js   2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -112,3 +112,48 @@
</span><span class="cx" style="display: block; padding: 0 10px">        const [ cat ] = state.categories.filter( ( i ) => i.slug === slug );
</span><span class="cx" style="display: block; padding: 0 10px">        return cat;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+/**
+ * Get pattern flag reasons.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {Array} A list of pattern flag reasons.
+ */
+export function getPatternFlagReasons( state ) {
+       return state.patternFlagReasons;
+}
+
+/**
+ * Check if pattern flag reasons are loading.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {Array} A list of pattern flag reasons.
+ */
+export function isLoadingPatternFlagReasons( state ) {
+       return state.patternFlagReasons === null;
+}
+
+/**
+ * Get the list of favorites.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {number[]} A list of favorite pattern IDs.
+ */
+export function getFavorites( state ) {
+       return state.favorites;
+}
+
+/**
+ * Check if a pattern ID is in the list of favorites.
+ *
+ * @param {Object} state Global application state.
+ * @param {number} patternId The pattern to check.
+ *
+ * @return {number[]} A list of favorite pattern IDs.
+ */
+export function isFavorite( state, patternId ) {
+       return state.favorites.includes( patternId );
+}
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcstoretestfixturespatternflagreasonsjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/test/fixtures/pattern-flag-reasons.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/test/fixtures/pattern-flag-reasons.js                                (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/test/fixtures/pattern-flag-reasons.js  2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,42 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+export default [
+       {
+               id: 8,
+               count: 0,
+               description: '',
+               link: 'http://localhost:8888/wporg-pattern-flag-reason/broken-unusable/',
+               name: 'Broken or unusable',
+               slug: 'broken-unusable',
+               taxonomy: 'wporg-pattern-flag-reason',
+               parent: 0,
+               meta: [],
+               _links: {
+                       self: [ { href: 'http://localhost:8888/wp-json/wp/v2/wporg-pattern-flag-reason/8' } ],
+                       collection: [ { href: 'http://localhost:8888/wp-json/wp/v2/wporg-pattern-flag-reason' } ],
+                       about: [ { href: 'http://localhost:8888/wp-json/wp/v2/taxonomies/wporg-pattern-flag-reason' } ],
+                       'wp:post_type': [
+                               { href: 'http://localhost:8888/wp-json/wp/v2/wporg-pattern-flag?wporg-pattern-flag-reason=8' },
+                       ],
+                       curies: [ { name: 'wp', href: 'https://api.w.org/{rel}', templated: true } ],
+               },
+       },
+       {
+               id: 7,
+               count: 0,
+               description: '',
+               link: 'http://localhost:8888/wporg-pattern-flag-reason/rude-crude-no-good/',
+               name: 'Rude, Crude, No good',
+               slug: 'rude-crude-no-good',
+               taxonomy: 'wporg-pattern-flag-reason',
+               parent: 0,
+               meta: [],
+               _links: {
+                       self: [ { href: 'http://localhost:8888/wp-json/wp/v2/wporg-pattern-flag-reason/7' } ],
+                       collection: [ { href: 'http://localhost:8888/wp-json/wp/v2/wporg-pattern-flag-reason' } ],
+                       about: [ { href: 'http://localhost:8888/wp-json/wp/v2/taxonomies/wporg-pattern-flag-reason' } ],
+                       'wp:post_type': [
+                               { href: 'http://localhost:8888/wp-json/wp/v2/wporg-pattern-flag?wporg-pattern-flag-reason=7' },
+                       ],
+                       curies: [ { name: 'wp', href: 'https://api.w.org/{rel}', templated: true } ],
+               },
+       },
+];
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcstoretestreducerjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/test/reducer.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/test/reducer.js      2021-05-17 05:26:25 UTC (rev 10982)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/test/reducer.js        2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4,7 +4,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> import apiPatterns from './fixtures/patterns';
</span><span class="cx" style="display: block; padding: 0 10px"> import apiPatternsPage2 from './fixtures/patterns-page-2';
</span><span class="cx" style="display: block; padding: 0 10px"> import apiCategories from './fixtures/categories';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import { categories, patterns } from '../reducer';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import apiPatternFlagReasons from './fixtures/pattern-flag-reasons';
+import { categories, favorites, patternFlagReasons, patterns } from '../reducer';
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> describe( 'state', () => {
</span><span class="cx" style="display: block; padding: 0 10px">        describe( 'patterns', () => {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -86,4 +87,60 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        expect( state ).toHaveLength( lengthWithAll );
</span><span class="cx" style="display: block; padding: 0 10px">                } );
</span><span class="cx" style="display: block; padding: 0 10px">        } );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+       describe( 'pattern flag reasons', () => {
+               it( 'should store the pattern flag reasons in state', () => {
+                       const state = patternFlagReasons(
+                               {},
+                               {
+                                       type: 'LOAD_PATTERN_FLAG_REASONS',
+                                       reasons: apiPatternFlagReasons,
+                               }
+                       );
+
+                       expect( state ).toEqual( apiPatternFlagReasons );
+               } );
+       } );
+
+       describe( 'favorites', () => {
+               it( 'should store the list of favorite pattern ids', () => {
+                       const state = favorites( [], {
+                               type: 'LOAD_FAVORITES',
+                               patternIds: [ 1, 2, 3 ],
+                       } );
+                       expect( state ).toEqual( [ 1, 2, 3 ] );
+               } );
+
+               it( 'should add a new favorite pattern to the list', () => {
+                       const state = favorites( [ 1, 2, 3 ], {
+                               type: 'ADD_FAVORITE',
+                               patternId: 5,
+                       } );
+                       expect( state ).toEqual( [ 1, 2, 3, 5 ] );
+               } );
+
+               it( 'should not add a duplicate pattern to the list', () => {
+                       const state = favorites( [ 1, 2, 3 ], {
+                               type: 'ADD_FAVORITE',
+                               patternId: 1,
+                       } );
+                       expect( state ).toEqual( [ 1, 2, 3 ] );
+               } );
+
+               it( 'should remove the unfavorited pattern id from the list', () => {
+                       const state = favorites( [ 1, 2, 3 ], {
+                               type: 'REMOVE_FAVORITE',
+                               patternId: 3,
+                       } );
+                       expect( state ).toEqual( [ 1, 2 ] );
+               } );
+
+               it( 'should not remove a pattern that is not in the list', () => {
+                       const state = favorites( [ 1, 2, 3 ], {
+                               type: 'REMOVE_FAVORITE',
+                               patternId: 5,
+                       } );
+                       expect( state ).toEqual( [ 1, 2, 3 ] );
+               } );
+       } );
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcstoretestresolversjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/test/resolvers.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/test/resolvers.js    2021-05-17 05:26:25 UTC (rev 10982)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/test/resolvers.js      2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3,7 +3,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">  */
</span><span class="cx" style="display: block; padding: 0 10px"> import apiPatterns from './fixtures/patterns';
</span><span class="cx" style="display: block; padding: 0 10px"> import apiCategories from './fixtures/categories';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import { getCategories, getPatternsByQuery } from '../resolvers';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import apiPatternFlagReasons from './fixtures/pattern-flag-reasons';
+import { getCategories, getFavorites, getPatternFlagReasons, getPatternsByQuery } from '../resolvers';
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> describe( 'getPatternsByQuery', () => {
</span><span class="cx" style="display: block; padding: 0 10px">        it( 'yields with the requested patterns', async () => {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -31,7 +32,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> describe( 'getCategories', () => {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        it( 'yields with the requested patterns', async () => {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ it( 'yields with the requested categories', async () => {
</ins><span class="cx" style="display: block; padding: 0 10px">                 const generator = getCategories();
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                expect( generator.next().value ).toEqual( {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -52,3 +53,45 @@
</span><span class="cx" style="display: block; padding: 0 10px">                } );
</span><span class="cx" style="display: block; padding: 0 10px">        } );
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+describe( 'getPatternFlagReasons', () => {
+       it( 'yields with the requested pattern flag reasons', async () => {
+               const generator = getPatternFlagReasons();
+
+               expect( generator.next().value ).toEqual( {
+                       type: 'FETCH_PATTERN_FLAG_REASONS',
+               } );
+
+               // trigger apiFetch
+               const { value: apiFetchAction } = generator.next();
+               expect( apiFetchAction.request ).toEqual( {
+                       path: '/wp/v2/wporg-pattern-flag-reason',
+               } );
+
+               // Provide response and trigger action
+               const { value: received } = generator.next( apiPatternFlagReasons );
+               expect( received ).toEqual( {
+                       type: 'LOAD_PATTERN_FLAG_REASONS',
+                       reasons: apiPatternFlagReasons,
+               } );
+       } );
+
+       describe( 'getFavorites', () => {
+               it( 'yields with the requested favorite patterns', async () => {
+                       const generator = getFavorites();
+
+                       // trigger apiFetch
+                       const { value: apiFetchAction } = generator.next();
+                       expect( apiFetchAction.request ).toEqual( {
+                               path: '/wporg/v1/pattern-favorites',
+                       } );
+
+                       // Provide response and trigger action
+                       const { value: received } = generator.next( [ 1, 2, 3 ] );
+                       expect( received ).toEqual( {
+                               type: 'LOAD_FAVORITES',
+                               patternIds: [ 1, 2, 3 ],
+                       } );
+               } );
+       } );
+} );
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcstoretestselectorsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/test/selectors.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/test/selectors.js    2021-05-17 05:26:25 UTC (rev 10982)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/test/selectors.js      2021-05-17 18:57:24 UTC (rev 10983)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7,11 +7,15 @@
</span><span class="cx" style="display: block; padding: 0 10px">        getCategories,
</span><span class="cx" style="display: block; padding: 0 10px">        getCategoryBySlug,
</span><span class="cx" style="display: block; padding: 0 10px">        getCurrentQuery,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+        getFavorites,
</ins><span class="cx" style="display: block; padding: 0 10px">         getPattern,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+        getPatternFlagReasons,
</ins><span class="cx" style="display: block; padding: 0 10px">         getPatterns,
</span><span class="cx" style="display: block; padding: 0 10px">        getPatternsByQuery,
</span><span class="cx" style="display: block; padding: 0 10px">        hasLoadedCategories,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+        isFavorite,
</ins><span class="cx" style="display: block; padding: 0 10px">         isLoadingCategories,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+        isLoadingPatternFlagReasons,
</ins><span class="cx" style="display: block; padding: 0 10px">         isLoadingPatternsByQuery,
</span><span class="cx" style="display: block; padding: 0 10px"> } from '../selectors';
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -21,6 +25,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        queries: {},
</span><span class="cx" style="display: block; padding: 0 10px">                        byId: {},
</span><span class="cx" style="display: block; padding: 0 10px">                },
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                favorites: [],
</ins><span class="cx" style="display: block; padding: 0 10px">         };
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        const state = {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -31,6 +36,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        },
</span><span class="cx" style="display: block; padding: 0 10px">                        byId: apiPatterns.reduce( ( acc, cur ) => ( { ...acc, [ cur.id ]: cur } ), {} ),
</span><span class="cx" style="display: block; padding: 0 10px">                },
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                favorites: [ 25, 27 ],
</ins><span class="cx" style="display: block; padding: 0 10px">         };
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        describe( 'isLoadingPatternsByQuery', () => {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -213,4 +219,64 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        );
</span><span class="cx" style="display: block; padding: 0 10px">                } );
</span><span class="cx" style="display: block; padding: 0 10px">        } );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+       describe( 'getPatternFlagReasons', () => {
+               it( 'should get undefined if query has not been made', () => {
+                       expect( getPatternFlagReasons( {} ) ).toBeUndefined();
+               } );
+
+               it( 'should get array if query has completed', () => {
+                       const reasons = [
+                               { id: 1, name: 'crude' },
+                               { id: 2, name: 'rude' },
+                       ];
+                       expect( getPatternFlagReasons( { patternFlagReasons: reasons } ) ).toEqual( reasons );
+               } );
+       } );
+
+       describe( 'isLoadingPatternFlagReasons', () => {
+               it( 'should get false if not null', () => {
+                       expect(
+                               isLoadingPatternFlagReasons( {
+                                       patternFlagReasons: [],
+                               } )
+                       ).toBe( false );
+               } );
+
+               it( 'should get true if null', () => {
+                       expect(
+                               isLoadingPatternFlagReasons( {
+                                       patternFlagReasons: null,
+                               } )
+                       ).toBe( true );
+               } );
+       } );
+
+       describe( 'getFavorites', () => {
+               it( 'should get an empty array if no favorites are loaded', () => {
+                       expect( getFavorites( initialState ) ).toEqual( [] );
+               } );
+
+               it( 'should get the list of favorites if they exist', () => {
+                       expect( getFavorites( state ) ).toEqual( [ 25, 27 ] );
+               } );
+       } );
+
+       describe( 'isFavorite', () => {
+               it( 'should get false if no favorites are loaded', () => {
+                       expect( isFavorite( initialState, 2 ) ).toBe( false );
+               } );
+
+               it( 'should get false if the ID requested is not in the list', () => {
+                       expect( isFavorite( state, 2 ) ).toBe( false );
+               } );
+
+               it( 'should get false if the ID requested is not a valid ID', () => {
+                       expect( isFavorite( state, 'fake' ) ).toBe( false );
+               } );
+
+               it( 'should get true if the ID requested is found in the list', () => {
+                       expect( isFavorite( state, 25 ) ).toBe( true );
+               } );
+       } );
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span></span></pre>
</div>
</div>

</body>
</html>