<!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>[10930] sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns: Pattern Directory: Sync with git WordPress/pattern-directory@a1093822ab72572be6cdb87b28f9462f208286e9</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/10930">10930</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/10930","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-04-27 14:19:13 +0000 (Tue, 27 Apr 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@a1093822ab72572be6cdb87b28f9462f208286e9</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_htmlwpcontentthemespubwporgpatternsfunctionsphp">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/functions.php</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternspackagejson">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/package.json</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentsiframeindexjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/iframe/index.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatternpreviewcanvasjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview/canvas.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatternpreviewactionscopyguidejs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview-actions/copy-guide.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-04-27 04:44:30 UTC (rev 10929)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.asset.php    2021-04-27 14:19:13 UTC (rev 10930)
</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-block-editor', 'wp-components', 'wp-compose', 'wp-data', 'wp-data-controls', 'wp-element', 'wp-i18n', 'wp-keycodes', 'wp-polyfill', 'wp-primitives', 'wp-url', 'wp-viewport'), 'version' => '47d0699f3951f1009351fbc4a9fef0da');
</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-components', 'wp-compose', 'wp-data', 'wp-data-controls', 'wp-element', 'wp-i18n', 'wp-keycodes', 'wp-polyfill', 'wp-primitives', 'wp-url', 'wp-viewport'), 'version' => '51d417961bbb5e88ef5cc17bcdd3e65e');
</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-04-27 04:44:30 UTC (rev 10929)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/build/index.js   2021-04-27 14:19:13 UTC (rev 10930)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11337,7 +11337,8 @@
</span><span class="cx" style="display: block; padding: 0 10px">       children = _ref.children,
</span><span class="cx" style="display: block; padding: 0 10px">       head = _ref.head,
</span><span class="cx" style="display: block; padding: 0 10px">       headHTML = _ref.headHTML,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-      props = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2___default()(_ref, ["contentRef", "children", "head", "headHTML"]);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+      themeSlug = _ref.themeSlug,
+      props = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_2___default()(_ref, ["contentRef", "children", "head", "headHTML", "themeSlug"]);
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">   var _useState = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_3__["useState"])(),
</span><span class="cx" style="display: block; padding: 0 10px">       _useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_1___default()(_useState, 2),
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11344,6 +11345,14 @@
</span><span class="cx" style="display: block; padding: 0 10px">       iframeDocument = _useState2[0],
</span><span class="cx" style="display: block; padding: 0 10px">       setIframeDocument = _useState2[1];
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  headHTML += '<style>body{pointer-events:none;display: flex;align-items: center;justify-content: center;min-height: 100vh;} body > div {width: 100%}</style>';
+
+  if (themeSlug) {
+    headHTML += "<link rel=\"stylesheet\" href=\"https://wp-themes.com/wp-content/themes/".concat(themeSlug, "/style.css\" media=\"all\" />");
+  } else {
+    headHTML += '<link rel="stylesheet" href="https://wp-themes.com/wp-content/themes/twentytwentyone/style.css" media="all" />';
+  }
+
</ins><span class="cx" style="display: block; padding: 0 10px">   var setRef = Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_3__["useCallback"])(function (node) {
</span><span class="cx" style="display: block; padding: 0 10px">     if (!node) {
</span><span class="cx" style="display: block; padding: 0 10px">       return;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11595,7 +11604,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">         height: '220px'
</span><span class="cx" style="display: block; padding: 0 10px">       }
</span><span class="cx" style="display: block; padding: 0 10px">     }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("img", {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-      src: "/wp-content/themes/pattern-directory/images/copy-paste-demo.gif",
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+      src: "".concat(wporgAssetUrl, "/images/copy-paste-demo.gif"),
</ins><span class="cx" style="display: block; padding: 0 10px">       alt: Object(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__["__"])('GIF of copy and pasting.', 'wporg-patterns')
</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">@@ -11747,12 +11756,11 @@
</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_block_editor__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
-/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* harmony import */ var _iframe__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../iframe */ "./src/components/iframe/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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * WordPress dependencies
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Internal dependencies
</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">@@ -11764,12 +11772,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">     minHeight: '600px',
</span><span class="cx" style="display: block; padding: 0 10px">     overflowY: 'auto'
</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 extraIframeStyles = // @todo - Should we keep the TT1 style? Load css from a local file?
-  '<link rel="stylesheet" id="twenty-twenty-one-style-css"  href="https://wp-themes.com/wp-content/themes/twentytwentyone/style.css?ver=1.2" media="all" />' + '<style>body{pointer-events:none;display: flex;align-items: center;justify-content: center;min-height: 100vh;} body > div {width: 100%}</style>';
-  return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("div", null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__["__unstableIframe"], {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  return Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("div", null, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])(_iframe__WEBPACK_IMPORTED_MODULE_1__["default"], {
</ins><span class="cx" style="display: block; padding: 0 10px">     className: "pattern-preview__viewport-iframe",
</span><span class="cx" style="display: block; padding: 0 10px">     style: style,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-    headHTML: window.__editorStyles.html + extraIframeStyles
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+    headHTML: window.__editorStyles.html
</ins><span class="cx" style="display: block; padding: 0 10px">   }, Object(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__["createElement"])("div", {
</span><span class="cx" style="display: block; padding: 0 10px">     dangerouslySetInnerHTML: {
</span><span class="cx" style="display: block; padding: 0 10px">       __html: html
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -13137,17 +13143,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> /***/ }),
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/***/ "@wordpress/block-editor":
-/*!*************************************!*\
-  !*** external ["wp","blockEditor"] ***!
-  \*************************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
-
-(function() { module.exports = window["wp"]["blockEditor"]; }());
-
-/***/ }),
-
</del><span class="cx" style="display: block; padding: 0 10px"> /***/ "@wordpress/components":
</span><span class="cx" style="display: block; padding: 0 10px"> /*!************************************!*\
</span><span class="cx" style="display: block; padding: 0 10px">   !*** external ["wp","components"] ***!
</span></span></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-04-27 04:44:30 UTC (rev 10929)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/functions.php    2021-04-27 14:19:13 UTC (rev 10930)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -58,6 +58,12 @@
</span><span class="cx" style="display: block; padding: 0 10px">                wp_enqueue_style( 'wp-components' );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                wp_set_script_translations( 'wporg-pattern-script', 'wporg-patterns' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+               wp_add_inline_script(
+                       'wporg-pattern-script',
+                       sprintf( 'var wporgAssetUrl = "%s";', esc_url( get_stylesheet_directory_uri() ) ),
+                       'before'
+               );
</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">        wp_enqueue_script( 'wporg-navigation', get_template_directory_uri() . "/js/navigation$suffix.js", array(), '20210331', true );
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternspackagejson"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/package.json</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/package.json   2021-04-27 04:44:30 UTC (rev 10929)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/package.json     2021-04-27 14:19:13 UTC (rev 10930)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -54,7 +54,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">        "eslintConfig": {
</span><span class="cx" style="display: block; padding: 0 10px">                "extends": "../../../../.eslintrc.js",
</span><span class="cx" style="display: block; padding: 0 10px">                "globals": {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        "wporgBlockPattern": "readonly"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 "wporgAssetUrl": "readonly"
</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">        "prettier": "../../../../.prettierrc.js",
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentsiframeindexjs"></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/iframe/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/iframe/index.js 2021-04-27 04:44:30 UTC (rev 10929)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/iframe/index.js   2021-04-27 14:19:13 UTC (rev 10930)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -90,9 +90,18 @@
</span><span class="cx" style="display: block; padding: 0 10px">                '<style>body{margin:0}</style>' + head;
</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 Iframe( { contentRef, children, head, headHTML, ...props }, ref ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+function Iframe( { contentRef, children, head, headHTML, themeSlug, ...props }, ref ) {
</ins><span class="cx" style="display: block; padding: 0 10px">         const [ iframeDocument, setIframeDocument ] = useState();
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+        headHTML +=
+               '<style>body{pointer-events:none;display: flex;align-items: center;justify-content: center;min-height: 100vh;} body > div {width: 100%}</style>';
+
+       if ( themeSlug ) {
+               headHTML += `<link rel="stylesheet" href="https://wp-themes.com/wp-content/themes/${ themeSlug }/style.css" media="all" />`;
+       } else {
+               headHTML += '<link rel="stylesheet" href="https://wp-themes.com/wp-content/themes/twentytwentyone/style.css" media="all" />';
+       }
+
</ins><span class="cx" style="display: block; padding: 0 10px">         const setRef = useCallback( ( node ) => {
</span><span class="cx" style="display: block; padding: 0 10px">                if ( ! node ) {
</span><span class="cx" style="display: block; padding: 0 10px">                        return;
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatternpreviewcanvasjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview/canvas.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview/canvas.js       2021-04-27 04:44:30 UTC (rev 10929)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview/canvas.js 2021-04-27 14:19:13 UTC (rev 10930)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,10 +1,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * WordPress dependencies
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Internal dependencies
</ins><span class="cx" style="display: block; padding: 0 10px">  */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-import {
-       /* eslint-disable-next-line @wordpress/no-unsafe-wp-apis -- Experimental is OK. */
-       __unstableIframe as Iframe,
-} from '@wordpress/block-editor';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+import Iframe from '../iframe';
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px"> function Canvas( { html } ) {
</span><span class="cx" style="display: block; padding: 0 10px">        const style = {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -13,10 +10,6 @@
</span><span class="cx" style="display: block; padding: 0 10px">                minHeight: '600px',
</span><span class="cx" style="display: block; padding: 0 10px">                overflowY: 'auto',
</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 extraIframeStyles =
-               // @todo - Should we keep the TT1 style? Load css from a local file?
-               '<link rel="stylesheet" id="twenty-twenty-one-style-css"  href="https://wp-themes.com/wp-content/themes/twentytwentyone/style.css?ver=1.2" media="all" />' +
-               '<style>body{pointer-events:none;display: flex;align-items: center;justify-content: center;min-height: 100vh;} body > div {width: 100%}</style>';
</del><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">        return (
</span><span class="cx" style="display: block; padding: 0 10px">                <div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -23,7 +16,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        <Iframe
</span><span class="cx" style="display: block; padding: 0 10px">                                className="pattern-preview__viewport-iframe"
</span><span class="cx" style="display: block; padding: 0 10px">                                style={ style }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                headHTML={ window.__editorStyles.html + extraIframeStyles }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         headHTML={ window.__editorStyles.html }
</ins><span class="cx" style="display: block; padding: 0 10px">                         >
</span><span class="cx" style="display: block; padding: 0 10px">                                <div
</span><span class="cx" style="display: block; padding: 0 10px">                                        dangerouslySetInnerHTML={ {
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgpatternssrccomponentspatternpreviewactionscopyguidejs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview-actions/copy-guide.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview-actions/copy-guide.js   2021-04-27 04:44:30 UTC (rev 10929)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-patterns/src/components/pattern-preview-actions/copy-guide.js     2021-04-27 14:19:13 UTC (rev 10930)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -9,7 +9,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">        // Wrap the image to avoid the UI shift after the GIF loads
</span><span class="cx" style="display: block; padding: 0 10px">        <div style={ { height: '220px' } }>
</span><span class="cx" style="display: block; padding: 0 10px">                <img
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        src="/wp-content/themes/pattern-directory/images/copy-paste-demo.gif"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 src={ `${ wporgAssetUrl }/images/copy-paste-demo.gif` }
</ins><span class="cx" style="display: block; padding: 0 10px">                         alt={ __( 'GIF of copy and pasting.', 'wporg-patterns' ) }
</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>
</div>

</body>
</html>