<!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>[11003] sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns: Pattern Directory: Sync with git WordPress/pattern-directory@c8d13bcb9b73ace35d18e07cc2030f16a2eb3c6e</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/11003">11003</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/11003","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-28 16:02:47 +0000 (Fri, 28 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@c8d13bcb9b73ace35d18e07cc2030f16a2eb3c6e</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_componentsscss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_components.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_htmlwpcontentthemespubwporgpatternsindexphp">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/index.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_htmlwpcontentthemespubwporgpatternssrccomponentspatterngridindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-grid/index.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatterngridmenuindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-grid-menu/index.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatternsindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/patterns/index.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentsquerymonitorindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/query-monitor/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_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>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcutilsindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/utils/index.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_patternpaginationscss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-pagination.scss</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatterngridpaginationjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-grid/pagination.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcutilsgetpaginationlistjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/utils/get-pagination-list.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcutilsqueryjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/utils/query.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcutilstestgetpaginationlistjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/utils/test/get-pagination-list.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcutilstestqueryjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/utils/test/query.js</a></li>
</ul>
<h3>Removed Paths</h3>
<ul>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcutilscategoryjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/utils/category.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcutilstestindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/utils/test/index.js</a></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-27 20:44:58 UTC (rev 11002)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.asset.php 2021-05-28 16:02:47 UTC (rev 11003)
</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-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' => '24afdf9f3de263bddc9d6acd1a6346df');
</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' => '69bda82262cba00648d616539b4b3950');
</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-27 20:44:58 UTC (rev 11002)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.js 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7435,6 +7435,54 @@
</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/@babel/runtime/helpers/asyncToGenerator.js":
+/*!*****************************************************************!*\
+ !*** ./node_modules/@babel/runtime/helpers/asyncToGenerator.js ***!
+ \*****************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports) {
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+ try {
+ var info = gen[key](arg);
+ var value = info.value;
+ } catch (error) {
+ reject(error);
+ return;
+ }
+
+ if (info.done) {
+ resolve(value);
+ } else {
+ Promise.resolve(value).then(_next, _throw);
+ }
+}
+
+function _asyncToGenerator(fn) {
+ return function () {
+ var self = this,
+ args = arguments;
+ return new Promise(function (resolve, reject) {
+ var gen = fn.apply(self, args);
+
+ function _next(value) {
+ asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+ }
+
+ function _throw(err) {
+ asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+ }
+
+ _next(undefined);
+ });
+ };
+}
+
+module.exports = _asyncToGenerator;
+module.exports["default"] = module.exports, module.exports.__esModule = true;
+
+/***/ }),
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /***/ "./node_modules/@babel/runtime/helpers/defineProperty.js":
</span><span class="cx" style="display: block; padding: 0 10px"> /*!***************************************************************!*\
</span><span class="cx" style="display: block; padding: 0 10px"> !*** ./node_modules/@babel/runtime/helpers/defineProperty.js ***!
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -10923,8 +10971,12 @@
</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 import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _wordpress_viewport__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/viewport */ "@wordpress/viewport");
-/* harmony import */ var _wordpress_viewport__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_viewport__WEBPACK_IMPORTED_MODULE_1__);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* 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_viewport__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/viewport */ "@wordpress/viewport");
+/* harmony import */ var _wordpress_viewport__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_viewport__WEBPACK_IMPORTED_MODULE_3__);
</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">@@ -10931,9 +10983,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * External dependencies
</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 dependencies
+ */
</ins><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"> var DefaultMenu = function DefaultMenu(_ref) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var path = _ref.path,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var currentCategory = _ref.currentCategory,
</ins><span class="cx" style="display: block; padding: 0 10px"> options = _ref.options,
</span><span class="cx" style="display: block; padding: 0 10px"> onClick = _ref.onClick,
</span><span class="cx" style="display: block; padding: 0 10px"> isLoading = _ref.isLoading;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -10942,21 +11000,29 @@
</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("ul", {
- className: "category-menu ".concat(isLoading ? 'category-menu--is-loading' : '', " ")
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("h2", {
+ className: "screen-reader-text"
+ }, Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__["__"])('Main Menu', 'wporg-patterns')), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("ul", {
+ className: classnames__WEBPACK_IMPORTED_MODULE_1___default()({
+ 'category-menu': true,
+ 'category-menu--is-loading': isLoading
+ })
</ins><span class="cx" style="display: block; padding: 0 10px"> }, options.map(function (i) {
</span><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: path === i.value ? 'category-menu--is-active' : '',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ className: classnames__WEBPACK_IMPORTED_MODULE_1___default()({
+ 'category-menu--is-active': currentCategory === i.slug
+ }),
</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">- onClick: onClick
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ onClick: onClick,
+ "aria-current": currentCategory === i.slug ? 'page' : undefined
</ins><span class="cx" style="display: block; padding: 0 10px"> }, i.label));
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }));
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ })));
</ins><span class="cx" style="display: block; padding: 0 10px"> }; // Will only render if the viewport is >= medium
</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">-/* harmony default export */ __webpack_exports__["default"] = (Object(_wordpress_viewport__WEBPACK_IMPORTED_MODULE_1__["ifViewportMatches"])('>= medium')(DefaultMenu));
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony default export */ __webpack_exports__["default"] = (Object(_wordpress_viewport__WEBPACK_IMPORTED_MODULE_3__["ifViewportMatches"])('>= medium')(DefaultMenu));
</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">@@ -11563,18 +11629,18 @@
</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 import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _wordpress_compose__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/compose */ "@wordpress/compose");
-/* harmony import */ var _wordpress_compose__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_compose__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
-/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _wordpress_url__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/url */ "@wordpress/url");
-/* harmony import */ var _wordpress_url__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_url__WEBPACK_IMPORTED_MODULE_3__);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _wordpress_url__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/url */ "@wordpress/url");
+/* harmony import */ var _wordpress_url__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_url__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _wordpress_compose__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/compose */ "@wordpress/compose");
+/* harmony import */ var _wordpress_compose__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_compose__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
+/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_3__);
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _category_menu__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../category-menu */ "./src/components/category-menu/index.js");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _category_search__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../category-search */ "./src/components/category-search/index.js");
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _category_context_bar__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../category-context-bar */ "./src/components/category-context-bar/index.js");
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../store */ "./src/store/index.js");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../hooks */ "./src/hooks/index.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../utils */ "./src/utils/index.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../utils */ "./src/utils/index.js");
+/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../store */ "./src/store/index.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../hooks */ "./src/hooks/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">@@ -11600,12 +11666,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> var DEBOUNCE_MS = 300;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> var PatternGridMenu = function PatternGridMenu() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var _useRoute = Object(_hooks__WEBPACK_IMPORTED_MODULE_8__["useRoute"])(),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var _useRoute = Object(_hooks__WEBPACK_IMPORTED_MODULE_9__["useRoute"])(),
</ins><span class="cx" style="display: block; padding: 0 10px"> path = _useRoute.path,
</span><span class="cx" style="display: block; padding: 0 10px"> updatePath = _useRoute.update;
</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 _useSelect = Object(_wordpress_data__WEBPACK_IMPORTED_MODULE_2__["useSelect"])(function (select) {
- var _select = select(_store__WEBPACK_IMPORTED_MODULE_7__["store"]),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var categorySlug = Object(_utils__WEBPACK_IMPORTED_MODULE_7__["getCategoryFromPath"])(path);
+
+ var _useSelect = Object(_wordpress_data__WEBPACK_IMPORTED_MODULE_3__["useSelect"])(function (select) {
+ var _select = select(_store__WEBPACK_IMPORTED_MODULE_8__["store"]),
</ins><span class="cx" style="display: block; padding: 0 10px"> getCategories = _select.getCategories,
</span><span class="cx" style="display: block; padding: 0 10px"> isLoadingCategories = _select.isLoadingCategories,
</span><span class="cx" style="display: block; padding: 0 10px"> hasLoadedCategories = _select.hasLoadedCategories;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11621,20 +11689,21 @@
</span><span class="cx" style="display: block; padding: 0 10px"> hasLoaded = _useSelect.hasLoaded;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> var handleUpdatePath = function handleUpdatePath(value) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var updatedPath = Object(_wordpress_url__WEBPACK_IMPORTED_MODULE_3__["addQueryArgs"])(path, {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var updatedPath = Object(_wordpress_url__WEBPACK_IMPORTED_MODULE_1__["addQueryArgs"])(path, {
</ins><span class="cx" style="display: block; padding: 0 10px"> search: value
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> updatePath(updatedPath);
</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 debouncedHandleUpdate = Object(_wordpress_compose__WEBPACK_IMPORTED_MODULE_1__["useDebounce"])(handleUpdatePath, DEBOUNCE_MS);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var debouncedHandleUpdate = Object(_wordpress_compose__WEBPACK_IMPORTED_MODULE_2__["useDebounce"])(handleUpdatePath, DEBOUNCE_MS);
</ins><span class="cx" style="display: block; padding: 0 10px"> return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("nav", {
</span><span class="cx" style="display: block; padding: 0 10px"> className: "pattern-grid-menu"
</span><span class="cx" style="display: block; padding: 0 10px"> }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_category_menu__WEBPACK_IMPORTED_MODULE_4__["default"], {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- path: Object(_utils__WEBPACK_IMPORTED_MODULE_9__["removeQueryString"])(path),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ currentCategory: categorySlug,
</ins><span class="cx" style="display: block; padding: 0 10px"> options: categories ? categories.map(function (record) {
</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">- value: "/".concat(Object(_wordpress_url__WEBPACK_IMPORTED_MODULE_3__["getPath"])(record.link) || ''),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ value: "/".concat(Object(_wordpress_url__WEBPACK_IMPORTED_MODULE_1__["getPath"])(record.link) || ''),
+ slug: record.slug,
</ins><span class="cx" style="display: block; padding: 0 10px"> label: record.name
</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">@@ -11646,7 +11715,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_category_search__WEBPACK_IMPORTED_MODULE_5__["default"], {
</span><span class="cx" style="display: block; padding: 0 10px"> isLoading: isLoading,
</span><span class="cx" style="display: block; padding: 0 10px"> isVisible: hasLoaded,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- defaultValue: Object(_wordpress_url__WEBPACK_IMPORTED_MODULE_3__["getQueryArg"])(window.location.href, 'search'),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ defaultValue: Object(_wordpress_url__WEBPACK_IMPORTED_MODULE_1__["getQueryArg"])(window.location.href, 'search'),
</ins><span class="cx" style="display: block; padding: 0 10px"> onUpdate: function onUpdate(event) {
</span><span class="cx" style="display: block; padding: 0 10px"> event.preventDefault();
</span><span class="cx" style="display: block; padding: 0 10px"> debouncedHandleUpdate(event.target.value);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11677,8 +11746,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__);
</span><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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _pattern_thumbnail__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../pattern-thumbnail */ "./src/components/pattern-thumbnail/index.js");
-/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../store */ "./src/store/index.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _pagination__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./pagination */ "./src/components/pattern-grid/pagination.js");
+/* harmony import */ var _pattern_thumbnail__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../pattern-thumbnail */ "./src/components/pattern-thumbnail/index.js");
+/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../store */ "./src/store/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">@@ -11693,29 +11763,36 @@
</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 PatternGrid() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+function PatternGrid(_ref) {
+ var query = _ref.query;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> var _useSelect = Object(_wordpress_data__WEBPACK_IMPORTED_MODULE_2__["useSelect"])(function (select) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var _select = select(_store__WEBPACK_IMPORTED_MODULE_4__["store"]),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var _select = select(_store__WEBPACK_IMPORTED_MODULE_5__["store"]),
+ getPatternTotalPagesByQuery = _select.getPatternTotalPagesByQuery,
</ins><span class="cx" style="display: block; padding: 0 10px"> getPatternsByQuery = _select.getPatternsByQuery,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- isLoadingPatternsByQuery = _select.isLoadingPatternsByQuery,
- getCurrentQuery = _select.getCurrentQuery;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ isLoadingPatternsByQuery = _select.isLoadingPatternsByQuery;
</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 query = getCurrentQuery();
</del><span class="cx" style="display: block; padding: 0 10px"> return {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ isLoading: query && isLoadingPatternsByQuery(query),
</ins><span class="cx" style="display: block; padding: 0 10px"> posts: query ? getPatternsByQuery(query) : [],
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- isLoading: query && isLoadingPatternsByQuery(query)
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ totalPages: query ? getPatternTotalPagesByQuery(query) : 0
</ins><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">+ isLoading = _useSelect.isLoading,
</ins><span class="cx" style="display: block; padding: 0 10px"> posts = _useSelect.posts,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- isLoading = _useSelect.isLoading;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ totalPages = _useSelect.totalPages;
</ins><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(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("div", {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("div", {
</ins><span class="cx" style="display: block; padding: 0 10px"> className: "pattern-grid"
</span><span class="cx" style="display: block; padding: 0 10px"> }, isLoading ? Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__["Spinner"], null) : posts.map(function (post) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_pattern_thumbnail__WEBPACK_IMPORTED_MODULE_3__["default"], {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_pattern_thumbnail__WEBPACK_IMPORTED_MODULE_4__["default"], {
</ins><span class="cx" style="display: block; padding: 0 10px"> key: post.id,
</span><span class="cx" style="display: block; padding: 0 10px"> pattern: post
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ })), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_pagination__WEBPACK_IMPORTED_MODULE_3__["default"], {
+ totalPages: totalPages,
+ currentPage: query === null || query === void 0 ? void 0 : query.page
</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">@@ -11723,6 +11800,120 @@
</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/pattern-grid/pagination.js":
+/*!***************************************************!*\
+ !*** ./src/components/pattern-grid/pagination.js ***!
+ \***************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return Pagination; });
+/* 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__);
+/* harmony import */ var _utils_get_pagination_list__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../utils/get-pagination-list */ "./src/utils/get-pagination-list.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../hooks */ "./src/hooks/index.js");
+
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+
+
+function Pagination(_ref) {
+ var _ref$currentPage = _ref.currentPage,
+ currentPage = _ref$currentPage === void 0 ? 1 : _ref$currentPage,
+ totalPages = _ref.totalPages;
+
+ var _useRoute = Object(_hooks__WEBPACK_IMPORTED_MODULE_3__["useRoute"])(),
+ path = _useRoute.path,
+ updatePath = _useRoute.update;
+
+ if (!totalPages || totalPages <= 1) {
+ return null;
+ }
+
+ var hasPrevious = currentPage > 1;
+ var hasNext = currentPage < totalPages;
+ var basePath = path.replace(/page\/\d+\/?$/, '');
+ var pages = Object(_utils_get_pagination_list__WEBPACK_IMPORTED_MODULE_2__["default"])(totalPages, currentPage);
+
+ var _onClick = function onClick(event, page) {
+ event.preventDefault();
+
+ if (page === 1) {
+ updatePath("".concat(basePath));
+ }
+
+ updatePath("".concat(basePath, "page/").concat(page, "/"));
+ };
+
+ return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("nav", {
+ className: "pagination",
+ "aria-label": Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__["__"])('Pagination', 'wporg-patterns')
+ }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("ul", {
+ className: "pagination__list"
+ }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("li", {
+ className: "pagination__item pagination__item-previous-page"
+ }, hasPrevious && Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("a", {
+ className: "pagination__link",
+ href: "".concat(basePath, "page/").concat(currentPage - 1),
+ onClick: function onClick(event) {
+ return _onClick(event, currentPage - 1);
+ }
+ }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("span", {
+ className: "screen-reader-text"
+ }, Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__["__"])('Previous page', 'wporg-patterns')), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("span", {
+ "aria-hidden": true
+ }, Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__["_x"])('Previous', 'previous page link label', 'wporg-patterns')))), pages.map(function (page, index) {
+ if ('…' === page) {
+ return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("li", {
+ className: "pagination__item",
+ key: "".concat(index, "-").concat(page)
+ }, page);
+ }
+
+ return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("li", {
+ className: "pagination__item",
+ key: page
+ }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("a", {
+ className: "pagination__link",
+ href: "".concat(basePath, "page/").concat(page),
+ "aria-current": page === currentPage ? 'page' : undefined,
+ onClick: function onClick(event) {
+ return _onClick(event, page);
+ }
+ }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("span", {
+ className: "screen-reader-text"
+ }, Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__["sprintf"])( // translators: %s is the page number.
+ Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__["__"])('Page %s', 'wporg-patterns'), page)), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("span", {
+ "aria-hidden": true
+ }, page)));
+ }), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("li", {
+ className: "pagination__item pagination__item-next-page"
+ }, hasNext && Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("a", {
+ className: "pagination__link",
+ href: "".concat(basePath, "page/").concat(currentPage + 1),
+ onClick: function onClick(event) {
+ return _onClick(event, currentPage + 1);
+ }
+ }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("span", {
+ className: "screen-reader-text"
+ }, Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__["__"])('Next page', 'wporg-patterns')), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("span", {
+ "aria-hidden": true
+ }, Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__["_x"])('Next', 'next page link label', 'wporg-patterns'))))));
+}
+
+/***/ }),
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /***/ "./src/components/pattern-preview-actions/copy-guide.js":
</span><span class="cx" style="display: block; padding: 0 10px"> /*!**************************************************************!*\
</span><span class="cx" style="display: block; padding: 0 10px"> !*** ./src/components/pattern-preview-actions/copy-guide.js ***!
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12295,13 +12486,20 @@
</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 import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _pattern_grid__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../pattern-grid */ "./src/components/pattern-grid/index.js");
-/* harmony import */ var _pattern_grid_menu__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../pattern-grid-menu */ "./src/components/pattern-grid-menu/index.js");
-/* harmony import */ var _query_monitor__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../query-monitor */ "./src/components/query-monitor/index.js");
-/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../hooks */ "./src/hooks/index.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
+/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _pattern_grid__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../pattern-grid */ "./src/components/pattern-grid/index.js");
+/* harmony import */ var _pattern_grid_menu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../pattern-grid-menu */ "./src/components/pattern-grid-menu/index.js");
+/* harmony import */ var _query_monitor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../query-monitor */ "./src/components/query-monitor/index.js");
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../hooks */ "./src/hooks/index.js");
+/* harmony import */ var _store__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../store */ "./src/store/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><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"> * Internal dependencies
</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">@@ -12309,8 +12507,15 @@
</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"> var Patterns = function Patterns() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_hooks__WEBPACK_IMPORTED_MODULE_4__["RouteProvider"], null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_query_monitor__WEBPACK_IMPORTED_MODULE_3__["default"], null), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_pattern_grid_menu__WEBPACK_IMPORTED_MODULE_2__["default"], null), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_pattern_grid__WEBPACK_IMPORTED_MODULE_1__["default"], null));
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var query = Object(_wordpress_data__WEBPACK_IMPORTED_MODULE_1__["useSelect"])(function (select) {
+ return select(_store__WEBPACK_IMPORTED_MODULE_6__["store"]).getCurrentQuery();
+ });
+ return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_hooks__WEBPACK_IMPORTED_MODULE_5__["RouteProvider"], null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_query_monitor__WEBPACK_IMPORTED_MODULE_4__["default"], null), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_pattern_grid_menu__WEBPACK_IMPORTED_MODULE_3__["default"], null), Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_pattern_grid__WEBPACK_IMPORTED_MODULE_2__["default"], {
+ query: query
+ }));
</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"> /* harmony default export */ __webpack_exports__["default"] = (Patterns);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12386,6 +12591,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">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var page = Object(_utils__WEBPACK_IMPORTED_MODULE_6__["getPageFromPath"])(path);
+
+ if (page > 1) {
+ _query.page = page;
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> return _query;
</span><span class="cx" style="display: block; padding: 0 10px"> }, [path]);
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12913,7 +13124,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, fetchPatternFlagReasons, loadPatternFlagReasons, loadFavorites, addFavorite, removeFavorite */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/*! exports provided: fetchPatterns, loadPatterns, setErrorPatterns, 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">@@ -12920,6 +13131,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__, "fetchPatterns", function() { return fetchPatterns; });
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "loadPatterns", function() { return loadPatterns; });
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "setErrorPatterns", function() { return setErrorPatterns; });
</ins><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><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12959,19 +13171,51 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * Get the action object signalling that patterns have been loaded.
</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @param {Array} patterns A list of patterns.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @param {Object} response
+ * @param {Array} response.page The current page.
+ * @param {Array} response.patterns A list of patterns.
+ * @param {number} response.total The total number of patterns.
+ * @param {number} response.totalPages The total number of pages.
</ins><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><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-function loadPatterns(query, patterns) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+function loadPatterns(query, _ref) {
+ var page = _ref.page,
+ patterns = _ref.patterns,
+ total = _ref.total,
+ totalPages = _ref.totalPages;
</ins><span class="cx" style="display: block; padding: 0 10px"> return {
</span><span class="cx" style="display: block; padding: 0 10px"> type: 'LOAD_BLOCK_PATTERNS',
</span><span class="cx" style="display: block; padding: 0 10px"> query: query,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- patterns: patterns
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ page: page,
+ patterns: patterns,
+ total: total,
+ totalPages: totalPages
</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><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Get the action object signalling that patterns have been loaded.
+ *
+ * @param {string} query Search string.
+ * @param {Object} response
+ * @param {Array} response.page The current page.
+ * @param {Object} response.error The error message, as reported from the API.
+ *
+ * @return {Object} Action object.
+ */
+
+function setErrorPatterns(query, _ref2) {
+ var page = _ref2.page,
+ error = _ref2.error;
+ return {
+ type: 'ERROR_BLOCK_PATTERNS',
+ query: query,
+ page: page,
+ error: error
+ };
+}
+/**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Get the action object signalling that the current view has been set.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {string} query Query object.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -13267,11 +13511,30 @@
</span><span class="cx" style="display: block; padding: 0 10px"> var id = _ref.id;
</span><span class="cx" style="display: block; padding: 0 10px"> return id;
</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 page = action.page,
+ total = action.total,
+ totalPages = action.totalPages;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> switch (action.type) {
</span><span class="cx" style="display: block; padding: 0 10px"> case 'LOAD_BLOCK_PATTERNS':
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 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))));
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ {
+ var _queryState = _objectSpread(_objectSpread({}, state[action.query] || {}), {}, {
+ total: total,
+ totalPages: totalPages
+ });
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ _queryState[page] = patternIds;
+ return _objectSpread(_objectSpread({}, state), {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()({}, action.query, _queryState));
+ }
+
+ case 'ERROR_BLOCK_PATTERNS':
+ {
+ var _queryState2 = state[action.query] || {};
+
+ _queryState2[page] = [];
+ return _objectSpread(_objectSpread({}, state), {}, _babel_runtime_helpers_defineProperty__WEBPACK_IMPORTED_MODULE_1___default()({}, action.query, _queryState2));
+ }
+
</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="lines" style="display: block; padding: 0 10px; color: #888">@@ -13400,14 +13663,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getFavorites", function() { return getFavorites; });
</span><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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* harmony import */ var _wordpress_url__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/url */ "@wordpress/url");
-/* harmony import */ var _wordpress_url__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_url__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _wordpress_data_controls__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/data-controls */ "@wordpress/data-controls");
-/* harmony import */ var _wordpress_data_controls__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data_controls__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./actions */ "./src/store/actions.js");
-/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils */ "./src/store/utils.js");
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babel/runtime/helpers/asyncToGenerator */ "./node_modules/@babel/runtime/helpers/asyncToGenerator.js");
+/* harmony import */ var _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _wordpress_url__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/url */ "@wordpress/url");
+/* harmony import */ var _wordpress_url__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_url__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _wordpress_data_controls__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/data-controls */ "@wordpress/data-controls");
+/* harmony import */ var _wordpress_data_controls__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data_controls__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./actions */ "./src/store/actions.js");
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils */ "./src/store/utils.js");
</ins><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"> var _marked = /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.mark(getPatternsByQuery),
</span><span class="cx" style="display: block; padding: 0 10px"> _marked2 = /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.mark(getCategories),
</span><span class="cx" style="display: block; padding: 0 10px"> _marked3 = /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.mark(getPatternFlagReasons),
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -13416,6 +13682,7 @@
</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="cx" style="display: block; padding: 0 10px"> */
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
</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">@@ -13424,42 +13691,141 @@
</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 parseResponse(_x) {
+ return _parseResponse.apply(this, arguments);
+}
+
+function _parseResponse() {
+ _parseResponse = _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1___default()( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.mark(function _callee(response) {
+ var _response$headers, _response$headers2;
+
+ return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.wrap(function _callee$(_context5) {
+ while (1) {
+ switch (_context5.prev = _context5.next) {
+ case 0:
+ _context5.prev = 0;
+ _context5.t0 = Number(((_response$headers = response.headers) === null || _response$headers === void 0 ? void 0 : _response$headers.get('X-WP-Total')) || 0);
+ _context5.t1 = Number(((_response$headers2 = response.headers) === null || _response$headers2 === void 0 ? void 0 : _response$headers2.get('X-WP-TotalPages')) || 0);
+ _context5.next = 5;
+ return response.json();
+
+ case 5:
+ _context5.t2 = _context5.sent;
+ return _context5.abrupt("return", {
+ total: _context5.t0,
+ totalPages: _context5.t1,
+ results: _context5.t2
+ });
+
+ case 9:
+ _context5.prev = 9;
+ _context5.t3 = _context5["catch"](0);
+ return _context5.abrupt("return", {});
+
+ case 12:
+ case "end":
+ return _context5.stop();
+ }
+ }
+ }, _callee, null, [[0, 9]]);
+ }));
+ return _parseResponse.apply(this, arguments);
+}
+
+function parseError(_x2) {
+ return _parseError.apply(this, arguments);
+}
+
+function _parseError() {
+ _parseError = _babel_runtime_helpers_asyncToGenerator__WEBPACK_IMPORTED_MODULE_1___default()( /*#__PURE__*/_babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.mark(function _callee2(response) {
+ return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.wrap(function _callee2$(_context6) {
+ while (1) {
+ switch (_context6.prev = _context6.next) {
+ case 0:
+ _context6.prev = 0;
+ _context6.next = 3;
+ return response.json();
+
+ case 3:
+ return _context6.abrupt("return", _context6.sent);
+
+ case 6:
+ _context6.prev = 6;
+ _context6.t0 = _context6["catch"](0);
+ return _context6.abrupt("return", {});
+
+ case 9:
+ case "end":
+ return _context6.stop();
+ }
+ }
+ }, _callee2, null, [[0, 6]]);
+ }));
+ return _parseError.apply(this, arguments);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> function getPatternsByQuery(query) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var queryString, results;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var queryString, response, _yield$__unstableAwai, total, totalPages, results, parsedError;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> return _babel_runtime_regenerator__WEBPACK_IMPORTED_MODULE_0___default.a.wrap(function getPatternsByQuery$(_context) {
</span><span class="cx" style="display: block; padding: 0 10px"> while (1) {
</span><span class="cx" style="display: block; padding: 0 10px"> switch (_context.prev = _context.next) {
</span><span class="cx" style="display: block; padding: 0 10px"> case 0:
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- queryString = Object(_utils__WEBPACK_IMPORTED_MODULE_4__["getQueryString"])(query);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ queryString = Object(_utils__WEBPACK_IMPORTED_MODULE_5__["getQueryString"])(query);
</ins><span class="cx" style="display: block; padding: 0 10px"> _context.prev = 1;
</span><span class="cx" style="display: block; padding: 0 10px"> _context.next = 4;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return Object(_actions__WEBPACK_IMPORTED_MODULE_3__["fetchPatterns"])(queryString);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return Object(_actions__WEBPACK_IMPORTED_MODULE_4__["fetchPatterns"])(queryString);
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> case 4:
</span><span class="cx" style="display: block; padding: 0 10px"> _context.next = 6;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return Object(_wordpress_data_controls__WEBPACK_IMPORTED_MODULE_2__["apiFetch"])({
- path: Object(_wordpress_url__WEBPACK_IMPORTED_MODULE_1__["addQueryArgs"])('/wp/v2/wporg-pattern', query)
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return Object(_wordpress_data_controls__WEBPACK_IMPORTED_MODULE_3__["apiFetch"])({
+ path: Object(_wordpress_url__WEBPACK_IMPORTED_MODULE_2__["addQueryArgs"])('/wp/v2/wporg-pattern', query),
+ parse: false
</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"> case 6:
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- results = _context.sent;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ response = _context.sent;
</ins><span class="cx" style="display: block; padding: 0 10px"> _context.next = 9;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return Object(_actions__WEBPACK_IMPORTED_MODULE_3__["loadPatterns"])(queryString, results);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return Object(_wordpress_data_controls__WEBPACK_IMPORTED_MODULE_3__["__unstableAwaitPromise"])(parseResponse(response));
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> case 9:
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- _context.next = 13;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ _yield$__unstableAwai = _context.sent;
+ total = _yield$__unstableAwai.total;
+ totalPages = _yield$__unstableAwai.totalPages;
+ results = _yield$__unstableAwai.results;
+ _context.next = 15;
+ return Object(_actions__WEBPACK_IMPORTED_MODULE_4__["loadPatterns"])(queryString, {
+ page: query.page || 1,
+ patterns: results,
+ total: total,
+ totalPages: totalPages
+ });
+
+ case 15:
+ _context.next = 24;
</ins><span class="cx" style="display: block; padding: 0 10px"> break;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- case 11:
- _context.prev = 11;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ case 17:
+ _context.prev = 17;
</ins><span class="cx" style="display: block; padding: 0 10px"> _context.t0 = _context["catch"](1);
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ _context.next = 21;
+ return Object(_wordpress_data_controls__WEBPACK_IMPORTED_MODULE_3__["__unstableAwaitPromise"])(parseError(_context.t0));
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- case 13:
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ case 21:
+ parsedError = _context.sent;
+ _context.next = 24;
+ return Object(_actions__WEBPACK_IMPORTED_MODULE_4__["setErrorPatterns"])(queryString, {
+ page: query.page || 1,
+ error: parsedError
+ });
+
+ case 24:
</ins><span class="cx" style="display: block; padding: 0 10px"> case "end":
</span><span class="cx" style="display: block; padding: 0 10px"> return _context.stop();
</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">- }, _marked, null, [[1, 11]]);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }, _marked, null, [[1, 17]]);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> function getCategories() {
</span><span class="cx" style="display: block; padding: 0 10px"> var results;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -13469,18 +13835,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> case 0:
</span><span class="cx" style="display: block; padding: 0 10px"> _context2.prev = 0;
</span><span class="cx" style="display: block; padding: 0 10px"> _context2.next = 3;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return Object(_actions__WEBPACK_IMPORTED_MODULE_3__["fetchCategories"])();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return Object(_actions__WEBPACK_IMPORTED_MODULE_4__["fetchCategories"])();
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> case 3:
</span><span class="cx" style="display: block; padding: 0 10px"> _context2.next = 5;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return Object(_wordpress_data_controls__WEBPACK_IMPORTED_MODULE_2__["apiFetch"])({
- path: Object(_wordpress_url__WEBPACK_IMPORTED_MODULE_1__["addQueryArgs"])('/wp/v2/pattern-categories')
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return Object(_wordpress_data_controls__WEBPACK_IMPORTED_MODULE_3__["apiFetch"])({
+ path: Object(_wordpress_url__WEBPACK_IMPORTED_MODULE_2__["addQueryArgs"])('/wp/v2/pattern-categories')
</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"> case 5:
</span><span class="cx" style="display: block; padding: 0 10px"> results = _context2.sent;
</span><span class="cx" style="display: block; padding: 0 10px"> _context2.next = 8;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return Object(_actions__WEBPACK_IMPORTED_MODULE_3__["loadCategories"])(results);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return Object(_actions__WEBPACK_IMPORTED_MODULE_4__["loadCategories"])(results);
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> case 8:
</span><span class="cx" style="display: block; padding: 0 10px"> _context2.next = 12;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -13505,18 +13871,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> case 0:
</span><span class="cx" style="display: block; padding: 0 10px"> _context3.prev = 0;
</span><span class="cx" style="display: block; padding: 0 10px"> _context3.next = 3;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return Object(_actions__WEBPACK_IMPORTED_MODULE_3__["fetchPatternFlagReasons"])();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return Object(_actions__WEBPACK_IMPORTED_MODULE_4__["fetchPatternFlagReasons"])();
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> case 3:
</span><span class="cx" style="display: block; padding: 0 10px"> _context3.next = 5;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 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')
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return Object(_wordpress_data_controls__WEBPACK_IMPORTED_MODULE_3__["apiFetch"])({
+ path: Object(_wordpress_url__WEBPACK_IMPORTED_MODULE_2__["addQueryArgs"])('/wp/v2/wporg-pattern-flag-reason')
</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"> case 5:
</span><span class="cx" style="display: block; padding: 0 10px"> results = _context3.sent;
</span><span class="cx" style="display: block; padding: 0 10px"> _context3.next = 8;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return Object(_actions__WEBPACK_IMPORTED_MODULE_3__["loadPatternFlagReasons"])(results);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return Object(_actions__WEBPACK_IMPORTED_MODULE_4__["loadPatternFlagReasons"])(results);
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> case 8:
</span><span class="cx" style="display: block; padding: 0 10px"> _context3.next = 12;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -13541,7 +13907,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> case 0:
</span><span class="cx" style="display: block; padding: 0 10px"> _context4.prev = 0;
</span><span class="cx" style="display: block; padding: 0 10px"> _context4.next = 3;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return Object(_wordpress_data_controls__WEBPACK_IMPORTED_MODULE_2__["apiFetch"])({
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return Object(_wordpress_data_controls__WEBPACK_IMPORTED_MODULE_3__["apiFetch"])({
</ins><span class="cx" style="display: block; padding: 0 10px"> path: '/wporg/v1/pattern-favorites'
</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">@@ -13548,7 +13914,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> case 3:
</span><span class="cx" style="display: block; padding: 0 10px"> results = _context4.sent;
</span><span class="cx" style="display: block; padding: 0 10px"> _context4.next = 6;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return Object(_actions__WEBPACK_IMPORTED_MODULE_3__["loadFavorites"])(results);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return Object(_actions__WEBPACK_IMPORTED_MODULE_4__["loadFavorites"])(results);
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> case 6:
</span><span class="cx" style="display: block; padding: 0 10px"> _context4.next = 10;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -13572,7 +13938,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, getPatternFlagReasons, isLoadingPatternFlagReasons, getFavorites, isFavorite */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/*! exports provided: isLoadingPatternsByQuery, getPatterns, getPatternsByQuery, getPatternTotalsByQuery, getPatternTotalPagesByQuery, 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">@@ -13580,6 +13946,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isLoadingPatternsByQuery", function() { return isLoadingPatternsByQuery; });
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getPatterns", function() { return getPatterns; });
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getPatternsByQuery", function() { return getPatternsByQuery; });
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getPatternTotalsByQuery", function() { return getPatternTotalsByQuery; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getPatternTotalPagesByQuery", function() { return getPatternTotalPagesByQuery; });
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getPattern", function() { return getPattern; });
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getCurrentQuery", function() { return getCurrentQuery; });
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isLoadingCategories", function() { return isLoadingCategories; });
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -13609,8 +13977,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"> function isLoadingPatternsByQuery(state, query) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var _state$patterns$queri, _state$patterns$queri2;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> var queryString = Object(_utils__WEBPACK_IMPORTED_MODULE_1__["getQueryString"])(query);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return !Array.isArray(state.patterns.queries[queryString]);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var page = (query === null || query === void 0 ? void 0 : query.page) || 1;
+ return !Array.isArray((_state$patterns$queri = state.patterns.queries) === null || _state$patterns$queri === void 0 ? void 0 : (_state$patterns$queri2 = _state$patterns$queri[queryString]) === null || _state$patterns$queri2 === void 0 ? void 0 : _state$patterns$queri2[page]);
</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"> * Get all loaded patterns.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -13633,12 +14004,46 @@
</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"> function getPatternsByQuery(state, query) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var _state$patterns$queri3, _state$patterns$queri4;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> var queryString = Object(_utils__WEBPACK_IMPORTED_MODULE_1__["getQueryString"])(query);
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return (state.patterns.queries[queryString] || []).map(function (id) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var page = (query === null || query === void 0 ? void 0 : query.page) || 1;
+ var patternIds = (_state$patterns$queri3 = state.patterns.queries) === null || _state$patterns$queri3 === void 0 ? void 0 : (_state$patterns$queri4 = _state$patterns$queri3[queryString]) === null || _state$patterns$queri4 === void 0 ? void 0 : _state$patterns$queri4[page];
+ return (patternIds || []).map(function (id) {
</ins><span class="cx" style="display: block; padding: 0 10px"> return state.patterns.byId[id];
</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">+ * Get the count of all patterns for a given query.
+ *
+ * @param {Object} state Global application state.
+ * @param {Object} query Query parameters.
+ *
+ * @return {number} The count of all patterns matching this query.
+ */
+
+function getPatternTotalsByQuery(state, query) {
+ var _state$patterns$queri5, _state$patterns$queri6;
+
+ var queryString = Object(_utils__WEBPACK_IMPORTED_MODULE_1__["getQueryString"])(query);
+ return ((_state$patterns$queri5 = state.patterns.queries) === null || _state$patterns$queri5 === void 0 ? void 0 : (_state$patterns$queri6 = _state$patterns$queri5[queryString]) === null || _state$patterns$queri6 === void 0 ? void 0 : _state$patterns$queri6.total) || 0;
+}
+/**
+ * Get the number of pages of patterns for a given query.
+ *
+ * @param {Object} state Global application state.
+ * @param {Object} query Query parameters.
+ *
+ * @return {number} The count of pages.
+ */
+
+function getPatternTotalPagesByQuery(state, query) {
+ var _state$patterns$queri7, _state$patterns$queri8;
+
+ var queryString = Object(_utils__WEBPACK_IMPORTED_MODULE_1__["getQueryString"])(query);
+ return ((_state$patterns$queri7 = state.patterns.queries) === null || _state$patterns$queri7 === void 0 ? void 0 : (_state$patterns$queri8 = _state$patterns$queri7[queryString]) === null || _state$patterns$queri8 === void 0 ? void 0 : _state$patterns$queri8.totalPages) || 0;
+}
+/**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Get a specific pattern.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {Object} state Global application state.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -13847,28 +14252,185 @@
</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/utils/category.js":
-/*!*******************************!*\
- !*** ./src/utils/category.js ***!
- \*******************************/
-/*! exports provided: removeEmptyArgs, removeQueryString, getCategoryFromPath */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/***/ "./src/utils/copy-to-clipboard.js":
+/*!****************************************!*\
+ !*** ./src/utils/copy-to-clipboard.js ***!
+ \****************************************/
+/*! exports provided: copyToClipboard */
</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="cx" style="display: block; padding: 0 10px"> __webpack_require__.r(__webpack_exports__);
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "copyToClipboard", function() { return copyToClipboard; });
+/**
+ * Uses a hidden textarea that is added and removed from the DOM in order to copy to clipboard via the Browser.
+ *
+ * @param {string} stringToCopy A string that will be copied to the clipboard
+ * @return {boolean} Whether the copy function succeeded
+ */
+var copyToClipboard = function copyToClipboard(stringToCopy) {
+ var element = document.createElement('textarea'); // We don't want the text area to be selected since it's temporary.
+
+ element.setAttribute('readonly', ''); // We don't want screen readers to read the content since it's pattern markup
+
+ element.setAttribute('aria-hidden', 'true'); // We don't want the text area to be visible since it's temporary.
+
+ element.style.position = 'absolute';
+ element.style.left = '-9999px';
+ element.value = stringToCopy;
+ document.body.appendChild(element);
+ element.select();
+ var success = document.execCommand('copy');
+ document.body.removeChild(element);
+ return success;
+};
+
+/***/ }),
+
+/***/ "./src/utils/get-pagination-list.js":
+/*!******************************************!*\
+ !*** ./src/utils/get-pagination-list.js ***!
+ \******************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return getPaginationList; });
+/* 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__);
+
+
+/**
+ * Get the collapsed list of page numbers for a given range of pages, used to paginate queries.
+ *
+ * This will return an array of page numbers (1, 2, 3, etc) for a given length (number of pages). If there are
+ * less than 5 pages (inclusive), it will return 1 through 5. If there are more, it will collapse between the
+ * start and end with an ellipsis. If the current page is in the middle, it will add pages to the middle.
+ *
+ * See test/get-pagination-list.js for examples.
+ *
+ * @param {number} length The total number of pages.
+ * @param {?number} current The current page, used to output extra pages if necessary. Default 1.
+ * @return {Array.<number|string>} Array of numbers and … used to display pagination links.
+ */
+function getPaginationList(length) {
+ var current = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+ var range = Array.from({
+ length: length
+ }, function (val, i) {
+ return i + 1;
+ });
+ var list = [];
+
+ if (length <= 5) {
+ return range;
+ }
+
+ list.push.apply(list, _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default()(range.slice(0, 2)));
+
+ if (current > 2 && current <= length - 1) {
+ list.push.apply(list, _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default()(range.slice(current - 2, current + 1)));
+ }
+
+ list.push.apply(list, _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default()(range.slice(-2)));
+ return list // Remove duplicates.
+ .filter(function (value, i, a) {
+ return a.indexOf(value) === i;
+ }) // Add in … where there's a jump larger than 1.
+ .reduce(function (acc, value, i, a) {
+ if (i === 0) {
+ acc.push(value);
+ return acc;
+ }
+
+ var diff = Math.abs(a[i] - a[i - 1]);
+
+ if (diff === 0) {
+ return acc;
+ }
+
+ if (diff > 1) {
+ acc.push('…');
+ }
+
+ acc.push(value);
+ return acc;
+ }, []);
+}
+
+/***/ }),
+
+/***/ "./src/utils/index.js":
+/*!****************************!*\
+ !*** ./src/utils/index.js ***!
+ \****************************/
+/*! exports provided: getCategoryFromPath, getPageFromPath, getValueFromPath, removeQueryString, removeEmptyArgs, copyToClipboard */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _query__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./query */ "./src/utils/query.js");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getCategoryFromPath", function() { return _query__WEBPACK_IMPORTED_MODULE_0__["getCategoryFromPath"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getPageFromPath", function() { return _query__WEBPACK_IMPORTED_MODULE_0__["getPageFromPath"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getValueFromPath", function() { return _query__WEBPACK_IMPORTED_MODULE_0__["getValueFromPath"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "removeQueryString", function() { return _query__WEBPACK_IMPORTED_MODULE_0__["removeQueryString"]; });
+
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "removeEmptyArgs", function() { return _query__WEBPACK_IMPORTED_MODULE_0__["removeEmptyArgs"]; });
+
+/* harmony import */ var _copy_to_clipboard__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./copy-to-clipboard */ "./src/utils/copy-to-clipboard.js");
+/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "copyToClipboard", function() { return _copy_to_clipboard__WEBPACK_IMPORTED_MODULE_1__["copyToClipboard"]; });
+
+
+
+
+/***/ }),
+
+/***/ "./src/utils/query.js":
+/*!****************************!*\
+ !*** ./src/utils/query.js ***!
+ \****************************/
+/*! exports provided: removeEmptyArgs, removeQueryString, getValueFromPath, getCategoryFromPath, getPageFromPath */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "removeEmptyArgs", function() { return removeEmptyArgs; });
</span><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "removeQueryString", function() { return removeQueryString; });
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getValueFromPath", function() { return getValueFromPath; });
</ins><span class="cx" style="display: block; padding: 0 10px"> /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getCategoryFromPath", function() { return getCategoryFromPath; });
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getPageFromPath", function() { return getPageFromPath; });
+/* harmony import */ var _wordpress_url__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/url */ "@wordpress/url");
+/* harmony import */ var _wordpress_url__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_url__WEBPACK_IMPORTED_MODULE_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">+ * WordPress dependencies
+ */
+
+/**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Remove the last '/' from a string if it exists.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {string} str Url or url part
</span><span class="cx" style="display: block; padding: 0 10px"> * @return {string}
</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"> var removeTrailingSlash = function removeTrailingSlash(str) {
</span><span class="cx" style="display: block; padding: 0 10px"> return str.replace(/\/$/, '');
</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">+ * Remove the first '/' from a string if it exists.
+ *
+ * @param {string} str Url or url part
+ * @return {string}
+ */
+
+
+var removeLeadingSlash = function removeLeadingSlash(str) {
+ return str.replace(/^\//, '');
+};
+/**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Removes any empty properties or empty strings.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {Object} obj
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -13899,80 +14461,63 @@
</span><span class="cx" style="display: block; padding: 0 10px"> return path.split('?')[0];
</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">- * Retrieves the category from a url path without query string params.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Retrieve a given key from a url path.
+ * A query string will take precedence, otherwise will fall back to the value in the path, for example
+ * in '/category/blog/page/2', the value for category is blog, and page is 2. This could also be written
+ * as `?category=blog&page=2`, or `/category/blog/?page=2`.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @param {string} path
- * @return {string} The category slug.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @param {string} path A URL path and query string.
+ * @param {string} key The query var to extract, ex: `pattern-categories`, `page`.
+ * @return {string} The value of the requested key.
</ins><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 getCategoryFromPath = function getCategoryFromPath(path) {
- var _path = removeQueryString(path);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+var getValueFromPath = function getValueFromPath(path, key) {
+ if (!key || !path) {
+ return '';
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- _path = removeTrailingSlash(_path);
- return _path.substring(_path.lastIndexOf('/') + 1);
-};
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var query = Object(_wordpress_url__WEBPACK_IMPORTED_MODULE_0__["getQueryArgs"])(path);
</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><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if (query[key]) {
+ return query[key];
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/***/ "./src/utils/copy-to-clipboard.js":
-/*!****************************************!*\
- !*** ./src/utils/copy-to-clipboard.js ***!
- \****************************************/
-/*! exports provided: copyToClipboard */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var _path = removeLeadingSlash(removeTrailingSlash(removeQueryString(path)));
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "copyToClipboard", function() { return copyToClipboard; });
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var parts = _path.split('/'); // Find the key section, if it exists. The next part of the URL is the value.
+
+
+ var index = parts.indexOf(key);
+
+ if (-1 === index) {
+ return '';
+ }
+
+ return parts[index + 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">- * Uses a hidden textarea that is added and removed from the DOM in order to copy to clipboard via the Browser.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Retrieve the category from a url path.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @param {string} stringToCopy A string that will be copied to the clipboard
- * @return {boolean} Whether the copy function succeeded
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @param {string} path
+ * @return {string} The category slug.
</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 copyToClipboard = function copyToClipboard(stringToCopy) {
- var element = document.createElement('textarea'); // We don't want the text area to be selected since it's temporary.
</del><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- element.setAttribute('readonly', ''); // We don't want screen readers to read the content since it's pattern markup
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+var getCategoryFromPath = function getCategoryFromPath(path) {
+ return getValueFromPath(path, 'pattern-categories');
+};
+/**
+ * Retrieve the page from a url path.
+ *
+ * @param {string} path
+ * @return {number} The page number.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- element.setAttribute('aria-hidden', 'true'); // We don't want the text area to be visible since it's temporary.
-
- element.style.position = 'absolute';
- element.style.left = '-9999px';
- element.value = stringToCopy;
- document.body.appendChild(element);
- element.select();
- var success = document.execCommand('copy');
- document.body.removeChild(element);
- return success;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+var getPageFromPath = function getPageFromPath(path) {
+ return Number(getValueFromPath(path, 'page') || 1);
</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="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/***/ "./src/utils/index.js":
-/*!****************************!*\
- !*** ./src/utils/index.js ***!
- \****************************/
-/*! exports provided: getCategoryFromPath, removeQueryString, removeEmptyArgs, copyToClipboard */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _category__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./category */ "./src/utils/category.js");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "getCategoryFromPath", function() { return _category__WEBPACK_IMPORTED_MODULE_0__["getCategoryFromPath"]; });
-
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "removeQueryString", function() { return _category__WEBPACK_IMPORTED_MODULE_0__["removeQueryString"]; });
-
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "removeEmptyArgs", function() { return _category__WEBPACK_IMPORTED_MODULE_0__["removeEmptyArgs"]; });
-
-/* harmony import */ var _copy_to_clipboard__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./copy-to-clipboard */ "./src/utils/copy-to-clipboard.js");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "copyToClipboard", function() { return _copy_to_clipboard__WEBPACK_IMPORTED_MODULE_1__["copyToClipboard"]; });
-
-
-
-
-/***/ }),
-
</del><span class="cx" style="display: block; padding: 0 10px"> /***/ "@babel/runtime/regenerator":
</span><span class="cx" style="display: block; padding: 0 10px"> /*!*************************************!*\
</span><span class="cx" style="display: block; padding: 0 10px"> !*** external "regeneratorRuntime" ***!
</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-27 20:44:58 UTC (rev 11002)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_components.scss 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -29,6 +29,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> @import "page";
</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><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@import "pattern-pagination";
</ins><span class="cx" style="display: block; padding: 0 10px"> @import "pattern-preview";
</span><span class="cx" style="display: block; padding: 0 10px"> @import "pattern-report-button";
</span><span class="cx" style="display: block; padding: 0 10px"> @import "pattern-report-modal";
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternscsscomponents_patternpaginationscss"></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-pagination.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-pagination.scss (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/components/_pattern-pagination.scss 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,68 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.pagination {
+ max-width: 960px;
+ margin: 1.5rem;
+
+ @include breakpoint( $breakpoint-large ) {
+ margin-left: auto;
+ margin-right: auto;
+ }
+}
+
+.pagination__list {
+ display: flex;
+ margin: 0;
+ list-style: none;
+ justify-content: center;
+ align-items: center;
+ gap: 0.75rem;
+
+ @media (max-width: $breakpoint-mobile) {
+ gap: 0.25rem;
+ }
+}
+
+.pagination__item {
+ display: inline-block;
+}
+
+.pagination__link {
+ display: inline-block;
+ padding: 0.75rem;
+ background: $color-white;
+ border: 1px solid $color-gray-light-600;
+ border-radius: 2px;
+ line-height: 1;
+ text-decoration: none;
+
+ &:hover,
+ &:active {
+ text-decoration: none;
+ }
+
+ &[aria-current="page"] {
+ border: 1px solid $color-gray-900;
+ background: $color-gray-900;
+ color: $color-white;
+ }
+
+ @media (max-width: $breakpoint-mobile) {
+ padding: 0.5rem;
+ }
+}
+
+@media (max-width: $breakpoint-small) {
+ .pagination__item-previous-page,
+ .pagination__item-next-page {
+ .pagination__link span[aria-hidden] {
+ display: none;
+ }
+ }
+
+ .pagination__item-previous-page .pagination__link::before {
+ content: "<";
+ }
+
+ .pagination__item-next-page .pagination__link::before {
+ content: ">";
+ }
+}
</ins></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-27 20:44:58 UTC (rev 11002)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/css/style.css 2021-05-28 16:02:47 UTC (rev 11003)
</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 .3s ease-out}@media (prefers-reduced-motion){.category-context-bar{transition:none}}.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-ba
r 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{display:flex;align-items:center;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__spinner{display:flex;width:28px;margin:0;transition:transform .1s linear,width .15s ease-out,opacity 50ms linear 50ms;transform:scale(1)}@media (prefers-reduced-motion){.category-context-bar__spinner{transition:none}}.category-context-bar__spinner .components-spinner{margin:0}.category-context-bar__spinner--is-hidden{overflow:hidden;width:0;opacity:0;transform:scale(0)}.cat
egory-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:focus,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}.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:.7
5rem;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}.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 infin
ite}@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}@keyframes 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 a
nd (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;transi
tion: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__containe
r{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:#6c
7782}.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:40
0;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;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}@me
dia 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-patter
n .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 butt
on: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-bot
tom: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 (m
ax-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-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;opaci
ty:.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 .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 .3s ease-out}@media (prefers-reduced-motion){.category-context-bar{transition:none}}.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-ba
r 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{display:flex;align-items:center;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__spinner{display:flex;width:28px;margin:0;transition:transform .1s linear,width .15s ease-out,opacity 50ms linear 50ms;transform:scale(1)}@media (prefers-reduced-motion){.category-context-bar__spinner{transition:none}}.category-context-bar__spinner .components-spinner{margin:0}.category-context-bar__spinner--is-hidden{overflow:hidden;width:0;opacity:0;transform:scale(0)}.cat
egory-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:focus,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}.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:.7
5rem;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}.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 infin
ite}@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}@keyframes 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 a
nd (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;transi
tion: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)}.pagination{max-width:960p
x;margin:1.5rem}@media screen and (min-width:960px){.pagination{margin-left:auto;margin-right:auto}}.pagination__list{display:flex;margin:0;list-style:none;justify-content:center;align-items:center;gap:.75rem}@media (max-width:480px){.pagination__list{gap:.25rem}}.pagination__item,.pagination__link{display:inline-block}.pagination__link{padding:.75rem;background:#fff;border:1px solid #d7dade;border-radius:2px;line-height:1}.pagination__link,.pagination__link:active,.pagination__link:hover{text-decoration:none}.pagination__link[aria-current=page]{border:1px solid #191e23;background:#191e23;color:#fff}@media (max-width:480px){.pagination__link{padding:.5rem}}@media (max-width:600px){.pagination__item-next-page .pagination__link span[aria-hidden],.pagination__item-previous-page .pagination__link span[aria-hidden]{display:none}.pagination__item-previous-page .pagination__link:before{content:"<"}.pagination__item-next-page .pagination__link:before{content:">"}}.
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-bu
tton: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-pattern .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>* but
ton{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-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-headin
g--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-bott
om: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-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:768px){.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}
</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-27 20:44:58 UTC (rev 11002)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/functions.php 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -13,6 +13,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> add_filter( 'search_template', __NAMESPACE__ . '\use_index_php_as_template' );
</span><span class="cx" style="display: block; padding: 0 10px"> add_filter( 'archive_template', __NAMESPACE__ . '\use_index_php_as_template' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+add_filter( 'pre_handle_404', __NAMESPACE__ . '\bypass_404_page', 10, 2 );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Sets up theme defaults and registers support for various WordPress features.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -155,3 +157,18 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> return $items->have_posts();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+/**
+ * Handle a possible 404 page when viewing patterns, which might happen if the JS pagination is
+ * different than the WP default.
+ *
+ * @param bool $preempt Whether to short-circuit default header status handling. Default false.
+ * @param WP_Query $wp_query WordPress Query object.
+ * @return bool
+ */
+function bypass_404_page( $preempt, $wp_query ) {
+ if ( isset( $wp_query->query_vars['post_type'][0] ) && POST_TYPE === $wp_query->query_vars['post_type'][0] ) {
+ return true;
+ }
+ return $preempt;
+}
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternsindexphp"></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/index.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/index.php 2021-05-27 20:44:58 UTC (rev 11002)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/index.php 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -30,8 +30,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> the_post();
</span><span class="cx" style="display: block; padding: 0 10px"> get_template_part( 'template-parts/content', 'grid' );
</span><span class="cx" style="display: block; padding: 0 10px"> endwhile;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- else :
- get_template_part( 'template-parts/content', 'none' );
</del><span class="cx" style="display: block; padding: 0 10px"> endif;
</span><span class="cx" style="display: block; padding: 0 10px"> ?>
</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-27 20:44:58 UTC (rev 11002)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/category-menu/default.js 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,27 +1,37 @@
</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><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
</ins><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 DefaultMenu = ( { path, options, onClick, isLoading } ) => {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+const DefaultMenu = ( { currentCategory, options, onClick, isLoading } ) => {
</ins><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' : '' } ` }>
- { 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>
- ) ) }
- </ul>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <>
+ <h2 className="screen-reader-text">{ __( 'Main Menu', 'wporg-patterns' ) }</h2>
+ <ul className={ classnames( { 'category-menu': true, 'category-menu--is-loading': isLoading } ) }>
+ { options.map( ( i ) => (
+ <li key={ i.value }>
+ <a
+ className={ classnames( { 'category-menu--is-active': currentCategory === i.slug } ) }
+ href={ i.value }
+ onClick={ onClick }
+ aria-current={ currentCategory === i.slug ? 'page' : undefined }
+ >
+ { i.label }
+ </a>
+ </li>
+ ) ) }
+ </ul>
+ </>
</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></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatterngridindexjs"></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-grid/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-grid/index.js 2021-05-27 20:44:58 UTC (rev 11002)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-grid/index.js 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7,28 +7,34 @@
</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 Pagination from './pagination';
</ins><span class="cx" style="display: block; padding: 0 10px"> import PatternThumbnail from '../pattern-thumbnail';
</span><span class="cx" style="display: block; padding: 0 10px"> import { store as patternStore } from '../../store';
</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 PatternGrid() {
- const { posts, isLoading } = useSelect( ( select ) => {
- const { getPatternsByQuery, isLoadingPatternsByQuery, getCurrentQuery } = select( patternStore );
- const query = getCurrentQuery();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+function PatternGrid( { query } ) {
+ const { isLoading, posts, totalPages } = useSelect( ( select ) => {
+ const { getPatternTotalPagesByQuery, getPatternsByQuery, isLoadingPatternsByQuery } = select(
+ patternStore
+ );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> return {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ isLoading: query && isLoadingPatternsByQuery( query ),
</ins><span class="cx" style="display: block; padding: 0 10px"> posts: query ? getPatternsByQuery( query ) : [],
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- isLoading: query && isLoadingPatternsByQuery( query ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ totalPages: query ? getPatternTotalPagesByQuery( query ) : 0,
</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="cx" style="display: block; padding: 0 10px"> return (
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <div className="pattern-grid">
- { isLoading ? (
- <Spinner />
- ) : (
- posts.map( ( post ) => <PatternThumbnail key={ post.id } pattern={ post } /> )
- ) }
- </div>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <>
+ <div className="pattern-grid">
+ { isLoading ? (
+ <Spinner />
+ ) : (
+ posts.map( ( post ) => <PatternThumbnail key={ post.id } pattern={ post } /> )
+ ) }
+ </div>
+ <Pagination totalPages={ totalPages } currentPage={ query?.page } />
+ </>
</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></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatterngridpaginationjs"></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/pattern-grid/pagination.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-grid/pagination.js (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-grid/pagination.js 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,91 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * WordPress dependencies
+ */
+import { __, _x, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import getPaginationList from '../../utils/get-pagination-list';
+import { useRoute } from '../../hooks';
+
+export default function Pagination( { currentPage = 1, totalPages } ) {
+ const { path, update: updatePath } = useRoute();
+ if ( ! totalPages || totalPages <= 1 ) {
+ return null;
+ }
+
+ const hasPrevious = currentPage > 1;
+ const hasNext = currentPage < totalPages;
+ const basePath = path.replace( /page\/\d+\/?$/, '' );
+ const pages = getPaginationList( totalPages, currentPage );
+
+ const onClick = ( event, page ) => {
+ event.preventDefault();
+ if ( page === 1 ) {
+ updatePath( `${ basePath }` );
+ }
+ updatePath( `${ basePath }page/${ page }/` );
+ };
+
+ return (
+ <nav className="pagination" aria-label={ __( 'Pagination', 'wporg-patterns' ) }>
+ <ul className="pagination__list">
+ <li className="pagination__item pagination__item-previous-page">
+ { hasPrevious && (
+ <a
+ className="pagination__link"
+ href={ `${ basePath }page/${ currentPage - 1 }` }
+ onClick={ ( event ) => onClick( event, currentPage - 1 ) }
+ >
+ <span className="screen-reader-text">{ __( 'Previous page', 'wporg-patterns' ) }</span>
+ <span aria-hidden>
+ { _x( 'Previous', 'previous page link label', 'wporg-patterns' ) }
+ </span>
+ </a>
+ ) }
+ </li>
+ { pages.map( ( page, index ) => {
+ if ( '…' === page ) {
+ return (
+ <li className="pagination__item" key={ `${ index }-${ page }` }>
+ { page }
+ </li>
+ );
+ }
+ return (
+ <li className="pagination__item" key={ page }>
+ <a
+ className="pagination__link"
+ href={ `${ basePath }page/${ page }` }
+ aria-current={ page === currentPage ? 'page' : undefined }
+ onClick={ ( event ) => onClick( event, page ) }
+ >
+ <span className="screen-reader-text">
+ { sprintf(
+ // translators: %s is the page number.
+ __( 'Page %s', 'wporg-patterns' ),
+ page
+ ) }
+ </span>
+ <span aria-hidden>{ page }</span>
+ </a>
+ </li>
+ );
+ } ) }
+ <li className="pagination__item pagination__item-next-page">
+ { hasNext && (
+ <a
+ className="pagination__link"
+ href={ `${ basePath }page/${ currentPage + 1 }` }
+ onClick={ ( event ) => onClick( event, currentPage + 1 ) }
+ >
+ <span className="screen-reader-text">{ __( 'Next page', 'wporg-patterns' ) }</span>
+ <span aria-hidden>{ _x( 'Next', 'next page link label', 'wporg-patterns' ) }</span>
+ </a>
+ ) }
+ </li>
+ </ul>
+ </nav>
+ );
+}
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatterngridmenuindexjs"></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-grid-menu/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-grid-menu/index.js 2021-05-27 20:44:58 UTC (rev 11002)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-grid-menu/index.js 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,9 +1,9 @@
</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="cx" style="display: block; padding: 0 10px"> */
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import { addQueryArgs, getPath, getQueryArg } from '@wordpress/url';
</ins><span class="cx" style="display: block; padding: 0 10px"> import { useDebounce } from '@wordpress/compose';
</span><span class="cx" style="display: block; padding: 0 10px"> import { useSelect } from '@wordpress/data';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import { addQueryArgs, getPath, getQueryArg } from '@wordpress/url';
</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"> * Internal dependencies
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11,9 +11,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> import CategoryMenu from '../category-menu';
</span><span class="cx" style="display: block; padding: 0 10px"> import CategorySearch from '../category-search';
</span><span class="cx" style="display: block; padding: 0 10px"> import CategoryContextBar from '../category-context-bar';
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import { getCategoryFromPath } from '../../utils';
</ins><span class="cx" style="display: block; padding: 0 10px"> import { store as patternStore } from '../../store';
</span><span class="cx" style="display: block; padding: 0 10px"> import { useRoute } from '../../hooks';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import { removeQueryString } from '../../utils';
</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 class="lines" style="display: block; padding: 0 10px; color: #888">@@ -22,6 +22,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> const PatternGridMenu = () => {
</span><span class="cx" style="display: block; padding: 0 10px"> const { path, update: updatePath } = useRoute();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const categorySlug = getCategoryFromPath( path );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> const { categories, isLoading, hasLoaded } = useSelect( ( select ) => {
</span><span class="cx" style="display: block; padding: 0 10px"> const { getCategories, isLoadingCategories, hasLoadedCategories } = select( patternStore );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -46,12 +47,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <>
</span><span class="cx" style="display: block; padding: 0 10px"> <nav className="pattern-grid-menu">
</span><span class="cx" style="display: block; padding: 0 10px"> <CategoryMenu
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- path={ removeQueryString( path ) }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ currentCategory={ categorySlug }
</ins><span class="cx" style="display: block; padding: 0 10px"> options={
</span><span class="cx" style="display: block; padding: 0 10px"> categories
</span><span class="cx" style="display: block; padding: 0 10px"> ? categories.map( ( record ) => {
</span><span class="cx" style="display: block; padding: 0 10px"> return {
</span><span class="cx" style="display: block; padding: 0 10px"> value: `/${ getPath( record.link ) || '' }`,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ slug: record.slug,
</ins><span class="cx" style="display: block; padding: 0 10px"> label: record.name,
</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_htmlwpcontentthemespubwporgpatternssrccomponentspatternsindexjs"></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/patterns/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/patterns/index.js 2021-05-27 20:44:58 UTC (rev 11002)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/patterns/index.js 2021-05-28 16:02:47 UTC (rev 11003)
</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 { useSelect } from '@wordpress/data';
+
+/**
</ins><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 PatternGrid from '../pattern-grid';
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5,13 +10,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> import PatternGridMenu from '../pattern-grid-menu';
</span><span class="cx" style="display: block; padding: 0 10px"> import QueryMonitor from '../query-monitor';
</span><span class="cx" style="display: block; padding: 0 10px"> import { RouteProvider } from '../../hooks';
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import { store as patternStore } from '../../store';
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> const Patterns = () => {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const query = useSelect( ( select ) => select( patternStore ).getCurrentQuery() );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> return (
</span><span class="cx" style="display: block; padding: 0 10px"> <RouteProvider>
</span><span class="cx" style="display: block; padding: 0 10px"> <QueryMonitor />
</span><span class="cx" style="display: block; padding: 0 10px"> <PatternGridMenu />
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <PatternGrid />
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <PatternGrid query={ query } />
</ins><span class="cx" style="display: block; padding: 0 10px"> </RouteProvider>
</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_htmlwpcontentthemespubwporgpatternssrccomponentsquerymonitorindexjs"></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/query-monitor/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/query-monitor/index.js 2021-05-27 20:44:58 UTC (rev 11002)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/query-monitor/index.js 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -10,7 +10,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> import { store as patternStore } from '../../store';
</span><span class="cx" style="display: block; padding: 0 10px"> import { useRoute } from '../../hooks';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import { getCategoryFromPath } from '../../utils';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import { getCategoryFromPath, getPageFromPath } from '../../utils';
</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"> * Listens for changes to the path and reconstructs the query object based on the path
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -43,6 +43,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">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const page = getPageFromPath( path );
+ if ( page > 1 ) {
+ _query.page = page;
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> return _query;
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><span class="cx" style="display: block; padding: 0 10px"> [ path ]
</span></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-27 20:44:58 UTC (rev 11002)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/actions.js 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -18,15 +18,45 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * Get the action object signalling that patterns have been loaded.
</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @param {Array} patterns A list of patterns.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @param {Object} response
+ * @param {Array} response.page The current page.
+ * @param {Array} response.patterns A list of patterns.
+ * @param {number} response.total The total number of patterns.
+ * @param {number} response.totalPages The total number of pages.
</ins><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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-export function loadPatterns( query, patterns ) {
- return { type: 'LOAD_BLOCK_PATTERNS', query: query, patterns: patterns };
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+export function loadPatterns( query, { page, patterns, total, totalPages } ) {
+ return {
+ type: 'LOAD_BLOCK_PATTERNS',
+ query: query,
+ page: page,
+ patterns: patterns,
+ total: total,
+ totalPages: totalPages,
+ };
</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><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Get the action object signalling that patterns have been loaded.
+ *
+ * @param {string} query Search string.
+ * @param {Object} response
+ * @param {Array} response.page The current page.
+ * @param {Object} response.error The error message, as reported from the API.
+ *
+ * @return {Object} Action object.
+ */
+export function setErrorPatterns( query, { page, error } ) {
+ return {
+ type: 'ERROR_BLOCK_PATTERNS',
+ query: query,
+ page: page,
+ error: error,
+ };
+}
+
+/**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Get the action object signalling that the current view has been set.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {string} query Query object.
</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-27 20:44:58 UTC (rev 11002)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/reducer.js 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -34,9 +34,18 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> function queries( state = {}, action ) {
</span><span class="cx" style="display: block; padding: 0 10px"> const patternIds = ( action.patterns || [] ).map( ( { id } ) => id );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const { page, total, totalPages } = 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 ] };
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ case 'LOAD_BLOCK_PATTERNS': {
+ const _queryState = { ...( state[ action.query ] || {} ), total, totalPages };
+ _queryState[ page ] = patternIds;
+ return { ...state, [ action.query ]: _queryState };
+ }
+ case 'ERROR_BLOCK_PATTERNS': {
+ const _queryState = state[ action.query ] || {};
+ _queryState[ page ] = [];
+ return { ...state, [ action.query ]: _queryState };
+ }
</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></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-27 20:44:58 UTC (rev 11002)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/resolvers.js 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2,7 +2,8 @@
</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="cx" style="display: block; padding: 0 10px"> import { addQueryArgs } from '@wordpress/url';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import { apiFetch } from '@wordpress/data-controls';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+import { __unstableAwaitPromise, apiFetch } from '@wordpress/data-controls';
</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"> * Internal dependencies
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -15,18 +16,53 @@
</span><span class="cx" style="display: block; padding: 0 10px"> loadFavorites,
</span><span class="cx" style="display: block; padding: 0 10px"> loadPatternFlagReasons,
</span><span class="cx" style="display: block; padding: 0 10px"> loadPatterns,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ setErrorPatterns,
</ins><span class="cx" style="display: block; padding: 0 10px"> } from './actions';
</span><span class="cx" style="display: block; padding: 0 10px"> import { getQueryString } from './utils';
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+async function parseResponse( response ) {
+ try {
+ return {
+ total: Number( response.headers?.get( 'X-WP-Total' ) || 0 ),
+ totalPages: Number( response.headers?.get( 'X-WP-TotalPages' ) || 0 ),
+ results: await response.json(),
+ };
+ } catch ( error ) {
+ return {};
+ }
+}
+
+async function parseError( response ) {
+ try {
+ return await response.json();
+ } catch ( error ) {
+ return {};
+ }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> export function* getPatternsByQuery( query ) {
</span><span class="cx" style="display: block; padding: 0 10px"> const queryString = getQueryString( query );
</span><span class="cx" style="display: block; padding: 0 10px"> try {
</span><span class="cx" style="display: block; padding: 0 10px"> yield fetchPatterns( queryString );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- const results = yield apiFetch( {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const response = yield apiFetch( {
</ins><span class="cx" style="display: block; padding: 0 10px"> path: addQueryArgs( '/wp/v2/wporg-pattern', query ),
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ parse: false,
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- yield loadPatterns( queryString, results );
- } catch ( error ) {}
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const { total, totalPages, results } = yield __unstableAwaitPromise( parseResponse( response ) );
+ yield loadPatterns( queryString, {
+ page: query.page || 1,
+ patterns: results,
+ total: total,
+ totalPages: totalPages,
+ } );
+ } catch ( error ) {
+ const parsedError = yield __unstableAwaitPromise( parseError( error ) );
+ // @todo Do something with this error message.
+ yield setErrorPatterns( queryString, {
+ page: query.page || 1,
+ error: parsedError,
+ } );
+ }
</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 function* getCategories() {
</span></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-27 20:44:58 UTC (rev 11002)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/selectors.js 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -13,7 +13,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> export function isLoadingPatternsByQuery( state, query ) {
</span><span class="cx" style="display: block; padding: 0 10px"> const queryString = getQueryString( query );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return ! Array.isArray( state.patterns.queries[ queryString ] );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const page = query?.page || 1;
+ return ! Array.isArray( state.patterns.queries?.[ queryString ]?.[ page ] );
</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">@@ -37,10 +38,38 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> export function getPatternsByQuery( state, query ) {
</span><span class="cx" style="display: block; padding: 0 10px"> const queryString = getQueryString( query );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return ( state.patterns.queries[ queryString ] || [] ).map( ( id ) => state.patterns.byId[ id ] );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const page = query?.page || 1;
+ const patternIds = state.patterns.queries?.[ queryString ]?.[ page ];
+ return ( patternIds || [] ).map( ( id ) => state.patterns.byId[ id ] );
</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><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Get the count of all patterns for a given query.
+ *
+ * @param {Object} state Global application state.
+ * @param {Object} query Query parameters.
+ *
+ * @return {number} The count of all patterns matching this query.
+ */
+export function getPatternTotalsByQuery( state, query ) {
+ const queryString = getQueryString( query );
+ return state.patterns.queries?.[ queryString ]?.total || 0;
+}
+
+/**
+ * Get the number of pages of patterns for a given query.
+ *
+ * @param {Object} state Global application state.
+ * @param {Object} query Query parameters.
+ *
+ * @return {number} The count of pages.
+ */
+export function getPatternTotalPagesByQuery( state, query ) {
+ const queryString = getQueryString( query );
+ return state.patterns.queries?.[ queryString ]?.totalPages || 0;
+}
+
+/**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Get a specific pattern.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {Object} state Global application state.
</span></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-27 20:44:58 UTC (rev 11002)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/test/reducer.js 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -14,12 +14,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"> type: 'LOAD_BLOCK_PATTERNS',
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ page: 1,
+ patterns: apiPatterns,
</ins><span class="cx" style="display: block; padding: 0 10px"> query: '',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- patterns: apiPatterns,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ total: 10,
+ totalPages: 2,
</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- expect( state.queries[ '' ] ).toHaveLength( 5 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ expect( state.queries[ '' ].total ).toBe( 10 );
+ expect( state.queries[ '' ].totalPages ).toBe( 2 );
+ expect( state.queries[ '' ][ '1' ] ).toHaveLength( 5 );
</ins><span class="cx" style="display: block; padding: 0 10px"> expect( state.byId ).toHaveProperty( '31' );
</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">@@ -26,17 +31,29 @@
</span><span class="cx" style="display: block; padding: 0 10px"> it( 'should store the next page of patterns in state', () => {
</span><span class="cx" style="display: block; padding: 0 10px"> const state = patterns(
</span><span class="cx" style="display: block; padding: 0 10px"> {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- queries: { '': [ 31, 25, 26, 27, 28 ] },
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ queries: {
+ '': {
+ total: 10,
+ totalPages: 2,
+ 1: [ 31, 25, 26, 27, 28 ],
+ },
+ },
</ins><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><span class="cx" style="display: block; padding: 0 10px"> {
</span><span class="cx" style="display: block; padding: 0 10px"> type: 'LOAD_BLOCK_PATTERNS',
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ page: 2,
+ patterns: apiPatternsPage2,
</ins><span class="cx" style="display: block; padding: 0 10px"> query: '',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- patterns: apiPatternsPage2,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ total: 10,
+ totalPages: 2,
</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- expect( state.queries[ '' ] ).toHaveLength( 10 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ expect( state.queries[ '' ].total ).toBe( 10 );
+ expect( state.queries[ '' ].totalPages ).toBe( 2 );
+ expect( state.queries[ '' ][ '1' ] ).toHaveLength( 5 );
+ expect( state.queries[ '' ][ '2' ] ).toHaveLength( 5 );
</ins><span class="cx" style="display: block; padding: 0 10px"> expect( state.byId ).toHaveProperty( '31' );
</span><span class="cx" style="display: block; padding: 0 10px"> expect( state.byId ).toHaveProperty( '15' );
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -44,21 +61,65 @@
</span><span class="cx" style="display: block; padding: 0 10px"> it( 'should store a different query of patterns in state', () => {
</span><span class="cx" style="display: block; padding: 0 10px"> const state = patterns(
</span><span class="cx" style="display: block; padding: 0 10px"> {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- queries: { '': [ 31, 25, 26, 27, 28 ] },
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ queries: {
+ '': {
+ total: 10,
+ totalPages: 2,
+ 1: [ 31, 25, 26, 27, 28 ],
+ },
+ },
</ins><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><span class="cx" style="display: block; padding: 0 10px"> {
</span><span class="cx" style="display: block; padding: 0 10px"> type: 'LOAD_BLOCK_PATTERNS',
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ page: 1,
+ patterns: apiPatternsPage2,
</ins><span class="cx" style="display: block; padding: 0 10px"> query: 'pattern-categories=3',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- patterns: apiPatternsPage2,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ total: 5,
+ totalPages: 1,
</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- expect( state.queries[ '' ] ).toHaveLength( 5 );
- expect( state.queries[ 'pattern-categories=3' ] ).toHaveLength( 5 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ expect( state.queries[ '' ].total ).toBe( 10 );
+ expect( state.queries[ '' ].totalPages ).toBe( 2 );
+ expect( state.queries[ '' ][ '1' ] ).toHaveLength( 5 );
+ expect( state.queries[ 'pattern-categories=3' ].total ).toBe( 5 );
+ expect( state.queries[ 'pattern-categories=3' ].totalPages ).toBe( 1 );
+ expect( state.queries[ 'pattern-categories=3' ][ '1' ] ).toHaveLength( 5 );
</ins><span class="cx" style="display: block; padding: 0 10px"> expect( state.byId ).toHaveProperty( '31' );
</span><span class="cx" style="display: block; padding: 0 10px"> expect( state.byId ).toHaveProperty( '15' );
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ it( 'should handle an error', () => {
+ const state = patterns(
+ {
+ queries: {
+ '': {
+ total: 10,
+ totalPages: 2,
+ 1: [ 31, 25, 26, 27, 28 ],
+ },
+ },
+ byId: apiPatterns.reduce( ( acc, cur ) => ( { ...acc, [ cur.id ]: cur } ), {} ),
+ },
+ {
+ type: 'ERROR_BLOCK_PATTERNS',
+ query: '',
+ page: 3,
+ error: {
+ code: 'rest_post_invalid_page_number',
+ message: 'The page number requested is larger than the number of pages available.',
+ data: { status: 400 },
+ },
+ }
+ );
+
+ expect( state.queries[ '' ].total ).toBe( 10 );
+ expect( state.queries[ '' ].totalPages ).toBe( 2 );
+ expect( state.queries[ '' ][ '1' ] ).toHaveLength( 5 );
+ expect( state.queries[ '' ][ '3' ] ).toHaveLength( 0 );
+ expect( state.byId ).toHaveProperty( '31' );
+ } );
</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( 'categories', () => {
</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-27 20:44:58 UTC (rev 11002)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/test/resolvers.js 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7,7 +7,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> import { getCategories, getFavorites, getPatternFlagReasons, getPatternsByQuery } from '../resolvers';
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> describe( 'getPatternsByQuery', () => {
</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 patterns & query meta', async () => {
</ins><span class="cx" style="display: block; padding: 0 10px"> const generator = getPatternsByQuery( {} );
</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">@@ -18,15 +18,27 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // trigger apiFetch
</span><span class="cx" style="display: block; padding: 0 10px"> const { value: apiFetchAction } = generator.next();
</span><span class="cx" style="display: block; padding: 0 10px"> expect( apiFetchAction.request ).toEqual( {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- path: '/wp/v2/wporg-pattern',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ path: `/wp/v2/wporg-pattern`,
+ parse: false,
</ins><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">- // Provide response and trigger action
- const { value: received } = generator.next( apiPatterns );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Step through the promise - the response is omitted here & mocked in the next step because `Response`
+ // is a browser feature, not available in node.
+ const { value: awaitPromiseControl } = generator.next( { /* Response omitted */ } );
+ expect( awaitPromiseControl ).toEqual( {
+ type: 'AWAIT_PROMISE',
+ promise: expect.any( Promise ),
+ } );
+
+ // Complete the promise and return content
+ const { value: received } = generator.next( { total: 8, totalPages: 2, results: apiPatterns } );
</ins><span class="cx" style="display: block; padding: 0 10px"> expect( received ).toEqual( {
</span><span class="cx" style="display: block; padding: 0 10px"> type: 'LOAD_BLOCK_PATTERNS',
</span><span class="cx" style="display: block; padding: 0 10px"> query: '',
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ page: 1,
</ins><span class="cx" style="display: block; padding: 0 10px"> patterns: apiPatterns,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ total: 8,
+ totalPages: 2,
</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></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-27 20:44:58 UTC (rev 11002)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/store/test/selectors.js 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -10,6 +10,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> getFavorites,
</span><span class="cx" style="display: block; padding: 0 10px"> getPattern,
</span><span class="cx" style="display: block; padding: 0 10px"> getPatternFlagReasons,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ getPatternTotalPagesByQuery,
+ getPatternTotalsByQuery,
</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><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -31,8 +33,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> const state = {
</span><span class="cx" style="display: block; padding: 0 10px"> patterns: {
</span><span class="cx" style="display: block; padding: 0 10px"> queries: {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- '': [ 31, 25, 27, 26 ],
- 'empty=1': [],
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ '': {
+ total: 4,
+ totalPages: 2,
+ 1: [ 31, 25 ],
+ 2: [ 27, 26 ],
+ },
+ 'empty=1': {
+ total: 0,
+ totalPages: 0,
+ 1: [],
+ },
</ins><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><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -74,7 +85,7 @@
</span><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( 'should get an empty array if no patterns are loaded for this query', () => {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- expect( getPatternsByQuery( initialState, '' ) ).toEqual( [] );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ expect( getPatternsByQuery( initialState, {} ) ).toEqual( [] );
</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"> it( 'should get an empty array if no patterns are loaded for this query, even if patterns exist for another query', () => {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -82,16 +93,44 @@
</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"> it( 'should get the list of patterns for this query', () => {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- const patternsByQuery = getPatternsByQuery( state, '' );
- expect( patternsByQuery ).toHaveLength( 4 );
- // Keep the sort order of the query: [ 31, 25, 27, 26 ]
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ const patternsByQuery = getPatternsByQuery( state, {} );
+ expect( patternsByQuery ).toHaveLength( 2 );
+ // Keep the sort order of the query: [ 31, 25 ]
</ins><span class="cx" style="display: block; padding: 0 10px"> expect( patternsByQuery[ 0 ] ).toHaveProperty( 'id', 31 );
</span><span class="cx" style="display: block; padding: 0 10px"> expect( patternsByQuery[ 1 ] ).toHaveProperty( 'id', 25 );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- expect( patternsByQuery[ 2 ] ).toHaveProperty( 'id', 27 );
- expect( patternsByQuery[ 3 ] ).toHaveProperty( 'id', 26 );
</del><span class="cx" style="display: block; padding: 0 10px"> } );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ it( 'should get the second page of patterns for this query', () => {
+ const patternsByQuery = getPatternsByQuery( state, { page: 2 } );
+ expect( patternsByQuery ).toHaveLength( 2 );
+ // Keep the sort order of the query: [ 27, 26 ]
+ expect( patternsByQuery[ 0 ] ).toHaveProperty( 'id', 27 );
+ expect( patternsByQuery[ 1 ] ).toHaveProperty( 'id', 26 );
+ } );
</ins><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( 'getPatternTotalsByQuery', () => {
+ it( 'should get 0 if no patterns are loaded for this query', () => {
+ expect( getPatternTotalsByQuery( initialState, {} ) ).toEqual( 0 );
+ } );
+
+ it( 'should get the total number of patterns for this query, regardless of pagination', () => {
+ expect( getPatternTotalsByQuery( state, {} ) ).toEqual( 4 );
+ expect( getPatternTotalsByQuery( state, { page: 2 } ) ).toEqual( 4 );
+ } );
+ } );
+
+ describe( 'getPatternTotalPagesByQuery', () => {
+ it( 'should get 0 if no patterns are loaded for this query', () => {
+ expect( getPatternTotalPagesByQuery( initialState, {} ) ).toEqual( 0 );
+ } );
+
+ it( 'should get the total number of pages for this query, regardless of pagination', () => {
+ expect( getPatternTotalPagesByQuery( state, {} ) ).toEqual( 2 );
+ expect( getPatternTotalPagesByQuery( state, { page: 2 } ) ).toEqual( 2 );
+ } );
+ } );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> describe( 'getPattern', () => {
</span><span class="cx" style="display: block; padding: 0 10px"> it( 'should get an null if no patterns are loaded yet', () => {
</span><span class="cx" style="display: block; padding: 0 10px"> expect( getPattern( initialState, 99 ) ).toBeNull();
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcutilscategoryjs"></a>
<div class="delfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Deleted: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/utils/category.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/utils/category.js 2021-05-27 20:44:58 UTC (rev 11002)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/utils/category.js 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,54 +0,0 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/**
- * Remove the last '/' from a string if it exists.
- *
- * @param {string} str Url or url part
- * @return {string}
- */
-const removeTrailingSlash = ( str ) => {
- return str.replace( /\/$/, '' );
-};
-
-/**
- * Removes any empty properties or empty strings.
- *
- * @param {Object} obj
- * @return {Object} Object with keys that are defined and not empty
- */
-export const removeEmptyArgs = ( obj ) => {
- const cleaned = {};
-
- Object.keys( obj ).forEach( ( key ) => {
- const arg = obj[ key ];
-
- // If it's not undefined or null convert it to string and check that it is not empty.
- // It's a bit of a "trick" to handle non-strings and strings without checking type explicitly.
- if ( arg !== undefined && arg !== null && arg.toString().length > 0 ) {
- cleaned[ key ] = arg;
- }
- } );
-
- return cleaned;
-};
-
-/**
- * Splits a string at ? and returns the first part.
- *
- * @param {string} path Url or url part
- * @return {string} Returns string or string before ? character.
- */
-export const removeQueryString = ( path ) => {
- return path.split( '?' )[ 0 ];
-};
-
-/**
- * Retrieves the category from a url path without query string params.
- *
- * @param {string} path
- * @return {string} The category slug.
- */
-export const getCategoryFromPath = ( path ) => {
- let _path = removeQueryString( path );
- _path = removeTrailingSlash( _path );
-
- return _path.substring( _path.lastIndexOf( '/' ) + 1 );
-};
</del></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcutilsgetpaginationlistjs"></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/utils/get-pagination-list.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/utils/get-pagination-list.js (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/utils/get-pagination-list.js 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,45 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Get the collapsed list of page numbers for a given range of pages, used to paginate queries.
+ *
+ * This will return an array of page numbers (1, 2, 3, etc) for a given length (number of pages). If there are
+ * less than 5 pages (inclusive), it will return 1 through 5. If there are more, it will collapse between the
+ * start and end with an ellipsis. If the current page is in the middle, it will add pages to the middle.
+ *
+ * See test/get-pagination-list.js for examples.
+ *
+ * @param {number} length The total number of pages.
+ * @param {?number} current The current page, used to output extra pages if necessary. Default 1.
+ * @return {Array.<number|string>} Array of numbers and … used to display pagination links.
+ */
+export default function getPaginationList( length, current = 1 ) {
+ const range = Array.from( { length }, ( val, i ) => i + 1 );
+ const list = [];
+ if ( length <= 5 ) {
+ return range;
+ }
+ list.push( ...range.slice( 0, 2 ) );
+ if ( current > 2 && current <= length - 1 ) {
+ list.push( ...range.slice( current - 2, current + 1 ) );
+ }
+ list.push( ...range.slice( -2 ) );
+
+ return list
+ // Remove duplicates.
+ .filter( ( value, i, a ) => a.indexOf( value ) === i )
+ // Add in … where there's a jump larger than 1.
+ .reduce( ( acc, value, i, a ) => {
+ if ( i === 0 ) {
+ acc.push( value );
+ return acc;
+ }
+ const diff = Math.abs( a[ i ] - a[ i - 1 ] );
+ if ( diff === 0 ) {
+ return acc;
+ }
+ if ( diff > 1 ) {
+ acc.push( '…' );
+ }
+ acc.push( value );
+ return acc;
+ }, [] );
+}
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcutilsindexjs"></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/utils/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/utils/index.js 2021-05-27 20:44:58 UTC (rev 11002)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/utils/index.js 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,2 +1,8 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-export { getCategoryFromPath, removeQueryString, removeEmptyArgs } from './category';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+export {
+ getCategoryFromPath,
+ getPageFromPath,
+ getValueFromPath,
+ removeQueryString,
+ removeEmptyArgs,
+} from './query';
</ins><span class="cx" style="display: block; padding: 0 10px"> export { copyToClipboard } from './copy-to-clipboard';
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcutilsqueryjs"></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/utils/query.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/utils/query.js (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/utils/query.js 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,107 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * WordPress dependencies
+ */
+import { getQueryArgs } from '@wordpress/url';
+
+/**
+ * Remove the last '/' from a string if it exists.
+ *
+ * @param {string} str Url or url part
+ * @return {string}
+ */
+const removeTrailingSlash = ( str ) => {
+ return str.replace( /\/$/, '' );
+};
+
+/**
+ * Remove the first '/' from a string if it exists.
+ *
+ * @param {string} str Url or url part
+ * @return {string}
+ */
+const removeLeadingSlash = ( str ) => {
+ return str.replace( /^\//, '' );
+};
+
+/**
+ * Removes any empty properties or empty strings.
+ *
+ * @param {Object} obj
+ * @return {Object} Object with keys that are defined and not empty
+ */
+export const removeEmptyArgs = ( obj ) => {
+ const cleaned = {};
+
+ Object.keys( obj ).forEach( ( key ) => {
+ const arg = obj[ key ];
+
+ // If it's not undefined or null convert it to string and check that it is not empty.
+ // It's a bit of a "trick" to handle non-strings and strings without checking type explicitly.
+ if ( arg !== undefined && arg !== null && arg.toString().length > 0 ) {
+ cleaned[ key ] = arg;
+ }
+ } );
+
+ return cleaned;
+};
+
+/**
+ * Splits a string at ? and returns the first part.
+ *
+ * @param {string} path Url or url part
+ * @return {string} Returns string or string before ? character.
+ */
+export const removeQueryString = ( path ) => {
+ return path.split( '?' )[ 0 ];
+};
+
+/**
+ * Retrieve a given key from a url path.
+ * A query string will take precedence, otherwise will fall back to the value in the path, for example
+ * in '/category/blog/page/2', the value for category is blog, and page is 2. This could also be written
+ * as `?category=blog&page=2`, or `/category/blog/?page=2`.
+ *
+ * @param {string} path A URL path and query string.
+ * @param {string} key The query var to extract, ex: `pattern-categories`, `page`.
+ * @return {string} The value of the requested key.
+ */
+export const getValueFromPath = ( path, key ) => {
+ if ( ! key || ! path ) {
+ return '';
+ }
+ const query = getQueryArgs( path );
+ if ( query[ key ] ) {
+ return query[ key ];
+ }
+
+ const _path = removeLeadingSlash( removeTrailingSlash( removeQueryString( path ) ) );
+ const parts = _path.split( '/' );
+ // Find the key section, if it exists. The next part of the URL is the value.
+ const index = parts.indexOf( key );
+ if ( -1 === index ) {
+ return '';
+ }
+
+ return parts[ index + 1 ] || '';
+};
+
+/**
+ * Retrieve the category from a url path.
+ *
+ * @param {string} path
+ * @return {string} The category slug.
+ */
+export const getCategoryFromPath = ( path ) => {
+ return getValueFromPath( path, 'pattern-categories' );
+};
+
+/**
+ * Retrieve the page from a url path.
+ *
+ * @param {string} path
+ * @return {number} The page number.
+ */
+export const getPageFromPath = ( path ) => {
+ return Number( getValueFromPath( path, 'page' ) || 1 );
+};
+
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcutilstestgetpaginationlistjs"></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/utils/test/get-pagination-list.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/utils/test/get-pagination-list.js (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/utils/test/get-pagination-list.js 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,33 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import getPaginationList from '../get-pagination-list';
+
+describe( 'getPageList', () => {
+ it( 'should return empty array if no pages', async () => {
+ expect( getPaginationList( 0 ) ).toEqual( [] );
+ } );
+
+ it( 'should return one item if one page', async () => {
+ expect( getPaginationList( 1 ) ).toEqual( [ 1 ] );
+ } );
+
+ it( 'should return a simple list if less than 5 pages', async () => {
+ expect( getPaginationList( 4 ) ).toEqual( [ 1, 2, 3, 4 ] );
+ } );
+
+ it( 'should return complex lists', async () => {
+ expect( getPaginationList( 10, 1 ) ).toEqual( [ 1, 2, '…', 9, 10 ] );
+ expect( getPaginationList( 10, 2 ) ).toEqual( [ 1, 2, '…', 9, 10 ] );
+ expect( getPaginationList( 10, 3 ) ).toEqual( [ 1, 2, 3, 4, '…', 9, 10 ] );
+ expect( getPaginationList( 10, 4 ) ).toEqual( [ 1, 2, 3, 4, 5, '…', 9, 10 ] );
+ expect( getPaginationList( 10, 5 ) ).toEqual( [ 1, 2, '…', 4, 5, 6, '…', 9, 10 ] );
+ expect( getPaginationList( 10, 6 ) ).toEqual( [ 1, 2, '…', 5, 6, 7, '…', 9, 10 ] );
+ expect( getPaginationList( 10, 8 ) ).toEqual( [ 1, 2, '…', 7, 8, 9, 10 ] );
+ expect( getPaginationList( 10, 9 ) ).toEqual( [ 1, 2, '…', 8, 9, 10 ] );
+ expect( getPaginationList( 10, 10 ) ).toEqual( [ 1, 2, '…', 9, 10 ] );
+ } );
+
+ it( 'should ignore out of bound current values', async () => {
+ expect( getPaginationList( 4, 10 ) ).toEqual( [ 1, 2, 3, 4 ] );
+ expect( getPaginationList( 10, 100 ) ).toEqual( [ 1, 2, '…', 9, 10 ] );
+ expect( getPaginationList( 10, -2 ) ).toEqual( [ 1, 2, '…', 9, 10 ] );
+ } );
+} );
</ins></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcutilstestindexjs"></a>
<div class="delfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Deleted: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/utils/test/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/utils/test/index.js 2021-05-27 20:44:58 UTC (rev 11002)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/utils/test/index.js 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,58 +0,0 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import { getCategoryFromPath, removeEmptyArgs, removeQueryString } from '../index';
-
-describe( 'utils', () => {
- describe( 'getCategoryFromPath', () => {
- it( 'should return empty string if path is empty', async () => {
- expect( getCategoryFromPath( '' ) ).toEqual( '' );
- } );
-
- it( 'should return empty string if path is "/"', async () => {
- expect( getCategoryFromPath( '/' ) ).toEqual( '' );
- } );
-
- it( 'should correctly return category', async () => {
- expect( getCategoryFromPath( 'patterns-categories/header' ) ).toEqual( 'header' );
- expect( getCategoryFromPath( '/patterns-categories/header' ) ).toEqual( 'header' );
- expect( getCategoryFromPath( '/patterns-categories/header/' ) ).toEqual( 'header' );
- expect( getCategoryFromPath( '/patterns-categories/subdirectory/header/' ) ).toEqual( 'header' );
- expect( getCategoryFromPath( '/patterns-categories/subdirectory/header/?search=test' ) ).toEqual(
- 'header'
- );
- } );
- } );
-
- describe( 'removeQueryString', () => {
- it( 'should return the path if there is no query string', async () => {
- const path = '/path/without/string';
-
- expect( removeQueryString( path ) ).toEqual( path );
- } );
-
- it( 'should return the path if there is a query string', async () => {
- const base = '/path/without/string';
- const path = `${ base }?search=keyword`;
-
- expect( removeQueryString( path ) ).toEqual( base );
- } );
- } );
-
- describe( 'removeEmptyArgs', () => {
- it( 'should remove empty properties', async () => {
- const shouldReturn = {
- string_1: 'first value',
- string_2: 'second value',
- boolean: false,
- };
-
- const obj = {
- ...shouldReturn,
- empty_string: '',
- undefined: undefined,
- null: null,
- };
-
- expect( removeEmptyArgs( {} ) ).toMatchObject( {} );
- expect( removeEmptyArgs( obj ) ).toMatchObject( shouldReturn );
- } );
- } );
-} );
</del></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrcutilstestqueryjs"></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/utils/test/query.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/utils/test/query.js (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/utils/test/query.js 2021-05-28 16:02:47 UTC (rev 11003)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,107 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import {
+ getCategoryFromPath,
+ getPageFromPath,
+ getValueFromPath,
+ removeEmptyArgs,
+ removeQueryString,
+} from '../index';
+
+describe( 'utils', () => {
+ describe( 'getValueFromPath', () => {
+ it( 'should return empty string if path or key is empty', async () => {
+ expect( getValueFromPath( '' ) ).toEqual( '' );
+ expect( getValueFromPath( '', 'key' ) ).toEqual( '' );
+ expect( getValueFromPath( '/', 'key' ) ).toEqual( '' );
+ expect( getValueFromPath( '/?', 'key' ) ).toEqual( '' );
+ } );
+
+ it( 'should return empty string if the path is malformed', async () => {
+ expect( getValueFromPath( '/key', 'key' ) ).toEqual( '' );
+ } );
+
+ it( 'should return empty string if the key is not found', async () => {
+ expect( getValueFromPath( '/nothing', 'key' ) ).toEqual( '' );
+ expect( getValueFromPath( '/1/2/3/', 'key' ) ).toEqual( '' );
+ expect( getValueFromPath( '/?search=test', 'key' ) ).toEqual( '' );
+ } );
+
+ it( 'should correctly return the value from a path', async () => {
+ expect( getValueFromPath( '/key/header', 'key' ) ).toEqual( 'header' );
+ expect( getValueFromPath( '/key/header/page/3/', 'key' ) ).toEqual( 'header' );
+ expect( getValueFromPath( '/key/header/?search=test', 'key' ) ).toEqual( 'header' );
+ expect( getValueFromPath( '/key/words-and-123/', 'key' ) ).toEqual( 'words-and-123' );
+ } );
+
+ it( 'should correctly return the value from a query string', async () => {
+ expect( getValueFromPath( '/?key=header', 'key' ) ).toEqual( 'header' );
+ expect( getValueFromPath( '/?key=header&page=2', 'key' ) ).toEqual( 'header' );
+ expect( getValueFromPath( '/?search=test&key=header', 'key' ) ).toEqual( 'header' );
+ } );
+
+ it( 'should correctly return the value from a combined path & query string', async () => {
+ expect( getValueFromPath( '/key/abc/?key=def', 'key' ) ).toEqual( 'def' );
+ } );
+ } );
+
+ describe( 'getCategoryFromPath', () => {
+ it( 'should return empty string if path is empty', async () => {
+ expect( getCategoryFromPath( '' ) ).toEqual( '' );
+ } );
+
+ it( 'should correctly return the category', async () => {
+ expect( getCategoryFromPath( '/pattern-categories/header' ) ).toEqual( 'header' );
+ expect( getCategoryFromPath( '/pattern-categories/header/page/3/' ) ).toEqual( 'header' );
+ expect( getCategoryFromPath( '/?pattern-categories=header' ) ).toEqual( 'header' );
+ expect( getCategoryFromPath( '/?search=test&pattern-categories=header' ) ).toEqual( 'header' );
+ expect( getCategoryFromPath( '/pattern-categories/abc/?pattern-categories=def' ) ).toEqual( 'def' );
+ } );
+ } );
+
+ describe( 'getPageFromPath', () => {
+ it( 'should return 1 (default first page) if the path is empty', async () => {
+ expect( getPageFromPath( '' ) ).toEqual( 1 );
+ } );
+
+ it( 'should correctly return the page number', async () => {
+ expect( getPageFromPath( '/pattern-categories/header' ) ).toEqual( 1 );
+ expect( getPageFromPath( '/pattern-categories/header/page/3/' ) ).toEqual( 3 );
+ expect( getPageFromPath( '/pattern-categories=header?page=2' ) ).toEqual( 2 );
+ expect( getPageFromPath( '/page/4' ) ).toEqual( 4 );
+ } );
+ } );
+
+ describe( 'removeQueryString', () => {
+ it( 'should return the path if there is no query string', async () => {
+ const path = '/path/without/string';
+
+ expect( removeQueryString( path ) ).toEqual( path );
+ } );
+
+ it( 'should return the path if there is a query string', async () => {
+ const base = '/path/without/string';
+ const path = `${ base }?search=keyword`;
+
+ expect( removeQueryString( path ) ).toEqual( base );
+ } );
+ } );
+
+ describe( 'removeEmptyArgs', () => {
+ it( 'should remove empty properties', async () => {
+ const shouldReturn = {
+ string_1: 'first value',
+ string_2: 'second value',
+ boolean: false,
+ };
+
+ const obj = {
+ ...shouldReturn,
+ empty_string: '',
+ undefined: undefined,
+ null: null,
+ };
+
+ expect( removeEmptyArgs( {} ) ).toMatchObject( {} );
+ expect( removeEmptyArgs( obj ) ).toMatchObject( shouldReturn );
+ } );
+ } );
+} );
</ins></span></pre>
</div>
</div>
</body>
</html>