Merge pull request #3867 from reduxframework/update-extendify-9r22mu0

Update Extendify Library

Author: kprovance

extendify-sdk/public/assets/logo-tips.png

@@ -3,7 +3,7 @@ Contributors: extendify, richtabor, kbat82, clubkert, arturgrabo
 Tags: page builder, editor, patterns, drag-and-drop, blocks, visual editor, wysiwyg, design, website builder, landing page builder, front-end builder
 Requires at least: 5.4
 Tested up to: 5.9.0
-Stable tag: 0.3.1
+Stable tag: 0.4.0
 Requires PHP: 5.6
 License: GPLv2
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -120,6 +120,12 @@ Nope! Extendify imports lightweight block-based content that is served directly
 
 == Changelog ==
 
+= 0.4.0 - 2022-02-08 =
+- Enhance layout view with autoscroll
+- Improve modal layout design consistency
+- Remove NeedsRegistrationModal
+- Add various performance improvements
+
 = 0.3.1 - 2022-01-26 =
 - Add singular value when import count is 1
 - Remove destructuring within block filters

extendify-sdk/public/build/extendify.css

@@ -24,6 +24,10 @@
     @apply focus:border-transparent focus:outline-none focus:shadow-none;
 }
 
+div.extendify button.extendify-skip-to-sr-link:focus {
+    @apply fixed z-high top-0 bg-white p-4;
+}
+
 .button-extendify-main {
     @apply bg-extendify-main button-focus cursor-pointer transition duration-200 p-1.5 px-3 text-white hover:text-white no-underline hover:bg-extendify-main-dark active:bg-gray-900 active:text-white focus:text-white whitespace-nowrap rounded text-base;
 }
@@ -156,3 +160,20 @@
 .is-template--inactive::before {
     border-color: #fdeab6;
 }
+
+.extendify-tooltip-default:not(.is-without-arrow)[data-y-axis="bottom"]::after {
+    border-bottom-color: #1e1e1e;
+}
+.extendify-tooltip-default:not(.is-without-arrow)::before {
+    @apply border-transparent;
+}
+.extendify-tooltip-default:not(.is-without-arrow) .components-popover__content {
+    min-width: 250px;
+    @apply border-transparent bg-gray-900 text-white p-4;
+}
+.extendify-bottom-arrow::after {
+    content: "";
+    bottom: -15px;
+    @apply border-8 border-transparent w-0 h-0 inline-block absolute transform -translate-y-px;
+    border-top-color: #1e1e1e !important;
+}

extendify-sdk/public/build/extendify.js

@@ -1,44 +1,21 @@
 import { __ } from '@wordpress/i18n'
-import { renderToString, render } from '@wordpress/element'
+import { render } from '@wordpress/element'
 import { registerPlugin } from '@wordpress/plugins'
-import { openModal } from './util/general'
 import { PluginSidebarMoreMenuItem } from '@wordpress/edit-post'
 import { Icon } from '@wordpress/icons'
 import { brandMark } from './components/icons/'
 import LibraryAccessModal from './components/LibraryAccessModal'
+import { CtaButton, MainButton } from './components/MainButtons'
 
-const openLibrary = (event) => {
-    openModal(
-        event.target.closest('[data-extendify-identifier]')?.dataset
-            ?.extendifyIdentifier,
-    )
-}
-
-// This returns true if the user object is null (Library never opened), or if it's enabled in the user settings
-const isAdmin = () =>
-    window.extendifyData.user === null ||
-    window.extendifyData?.user?.state?.isAdmin
+const userState = window.extendifyData?.user?.state
+const isAdmin = () => window.extendifyData.user === null || userState?.isAdmin
 const isGlobalLibraryEnabled = () =>
     window.extendifyData.sitesettings === null ||
     window.extendifyData?.sitesettings?.state?.enabled
 const isLibraryEnabled = () =>
     window.extendifyData.user === null
         ? isGlobalLibraryEnabled()
-        : window.extendifyData?.user?.state?.enabled
-
-const mainButton = (
-    <div id="extendify-templates-inserter" className="extendify">
-        <button
-            style="padding:4px 12px; height: 34px;"
-            type="button"
-            data-extendify-identifier="main-button"
-            id="extendify-templates-inserter-btn"
-            className="components-button bg-wp-theme-500 hover:bg-wp-theme-600 border-color-wp-theme-500 text-white ml-1">
-            <Icon icon={brandMark} size={24} className="-ml-1 mr-1" />
-            {__('Library', 'extendify')}
-        </button>
-    </div>
-)
+        : userState?.enabled
 
 // Add the MAIN button when Gutenberg is available and ready
 if (window._wpLoadBlockEditor) {
@@ -47,20 +24,21 @@ if (window._wpLoadBlockEditor) {
             if (!isGlobalLibraryEnabled() && !isAdmin()) {
                 return
             }
-
-            // Redundant extra check added because of a bug where the above check wasn't working
-            if (document.getElementById('extendify-templates-inserter-btn')) {
+            if (document.getElementById('extendify-templates-inserter')) {
                 return
             }
             if (!document.querySelector('.edit-post-header-toolbar')) {
                 return
             }
+            const buttonContainer = Object.assign(
+                document.createElement('div'),
+                { id: 'extendify-templates-inserter' },
+            )
             document
                 .querySelector('.edit-post-header-toolbar')
-                .insertAdjacentHTML('beforeend', renderToString(mainButton))
-            document
-                .getElementById('extendify-templates-inserter-btn')
-                .addEventListener('click', openLibrary)
+                .append(buttonContainer)
+            render(<MainButton />, buttonContainer)
+
             if (!isLibraryEnabled()) {
                 document
                     .getElementById('extendify-templates-inserter-btn')
@@ -73,9 +51,8 @@ if (window._wpLoadBlockEditor) {
 
 // The CTA button inside patterns
 if (window._wpLoadBlockEditor) {
-    const finish = window.wp.data.subscribe(() => {
+    window.wp.data.subscribe(() => {
         requestAnimationFrame(() => {
-            // Redundant extra check added because of a bug where the above check wasn't working
             if (!isGlobalLibraryEnabled() && !isAdmin()) {
                 return
             }
@@ -85,27 +62,15 @@ if (window._wpLoadBlockEditor) {
             if (document.getElementById('extendify-cta-button')) {
                 return
             }
-            const ctaButton = (
-                <div>
-                    <button
-                        id="extendify-cta-button"
-                        style="margin:1rem 1rem 0;width: calc(100% - 2rem);justify-content: center;"
-                        data-extendify-identifier="patterns-cta"
-                        className="components-button is-secondary">
-                        {__(
-                            'Discover patterns in Extendify Library',
-                            'extendify',
-                        )}
-                    </button>
-                </div>
+            const ctaButtonContainer = Object.assign(
+                document.createElement('div'),
+                { id: 'extendify-cta-button-container' },
             )
+
             document
                 .querySelector('[id$=patterns-view]')
-                .insertAdjacentHTML('afterbegin', renderToString(ctaButton))
-            document
-                .getElementById('extendify-cta-button')
-                .addEventListener('click', openLibrary)
-            finish()
+                .prepend(ctaButtonContainer)
+            render(<CtaButton />, ctaButtonContainer)
         })
     })
 }

extendify-sdk/readme.txt

@@ -1,13 +1,14 @@
 import classnames from 'classnames'
 import { Icon } from '@wordpress/icons'
 import { __, _n, sprintf } from '@wordpress/i18n'
-import { useEffect } from '@wordpress/element'
+import { useEffect, memo, useRef } from '@wordpress/element'
 import { alert, download } from './icons/'
 import { useUserStore } from '../state/User'
 import { User as UserApi } from '../api/User'
 import { growthArrow } from './icons'
+import { safeHTML } from '@wordpress/dom'
 
-export const ImportCounter = () => {
+export const ImportCounter = memo(function ImportCounter() {
     const remainingImports = useUserStore((state) => state.remainingImports)
     const allowedImports = useUserStore((state) => state.allowedImports)
     const count = remainingImports()
@@ -17,9 +18,10 @@ export const ImportCounter = () => {
             ? 'bg-extendify-main hover:bg-extendify-main-dark'
             : 'bg-extendify-alert'
     const icon = status === 'has-imports' ? download : alert
+    const buttonRef = useRef()
 
     useEffect(() => {
-        if (!allowedImports) {
+        if (allowedImports < 1 || !allowedImports) {
             const fallback = 5
             UserApi.allowedImports()
                 .then((allowedImports) => {
@@ -39,29 +41,61 @@ export const ImportCounter = () => {
     }
 
     return (
-        <a
-            target="_blank"
-            rel="noreferrer"
-            className={classnames(
-                backgroundColor,
-                'hidden sm:flex w-full no-underline button-focus text-sm justify-between py-3 px-4 text-white rounded',
-            )}
-            href={`https://www.extendify.com/pricing/?utm_source=${encodeURIComponent(
-                window.extendifyData.sdk_partner,
-            )}&utm_medium=library&utm_campaign=import-counter&utm_content=get-more&utm_term=${status}`}>
-            <div className="flex items-center space-x-2 no-underline text-xs">
-                <Icon icon={icon} size={14} />
-                <span>
-                    {sprintf(
-                        _n('%s Import', '%s Imports', count, 'extendify'),
-                        count,
-                    )}
+        // tabIndex for group focus animations
+        <div tabIndex="0" className="group relative">
+            <a
+                target="_blank"
+                ref={buttonRef}
+                rel="noreferrer"
+                className={classnames(
+                    backgroundColor,
+                    'hidden sm:flex w-full no-underline button-focus text-sm justify-between py-3 px-4 text-white rounded',
+                )}
+                href={`https://www.extendify.com/pricing/?utm_source=${encodeURIComponent(
+                    window.extendifyData.sdk_partner,
+                )}&utm_medium=library&utm_campaign=import-counter&utm_content=get-more&utm_term=${status}`}>
+                <span className="flex items-center space-x-2 no-underline text-xs">
+                    <Icon icon={icon} size={14} />
+                    <span>
+                        {sprintf(
+                            _n('%s Import', '%s Imports', count, 'extendify'),
+                            count,
+                        )}
+                    </span>
                 </span>
+                <span className="text-white text-sm no-underline font-medium outline-none flex items-center">
+                    {__('Get more', 'extendify')}
+                    <Icon icon={growthArrow} size={24} className="-mr-1.5" />
+                </span>
+            </a>
+            <div
+                className="invisible opacity-0 -translate-y-full absolute duration-300 delay-200 ease-in-out group-hover:-top-2.5 group-hover:opacity-100 group-hover:visible group-focus:-top-2.5 group-focus:opacity-100 group-focus:visible top-0 transform transition-all w-full extendify-bottom-arrow shadow-md"
+                tabIndex="-1">
+                <a
+                    href={`https://www.extendify.com/pricing/?utm_source=${encodeURIComponent(
+                        window.extendifyData.sdk_partner,
+                    )}&utm_medium=library&utm_campaign=import-counter-tooltip&utm_content=get-50-off&utm_term=${status}`}
+                    className="block bg-gray-900 text-white p-4 no-underline rounded bg-cover"
+                    style={{
+                        backgroundImage: `url(${window.extendifyData.asset_path}/logo-tips.png)`,
+                    }}>
+                    <span
+                        dangerouslySetInnerHTML={{
+                            __html: safeHTML(
+                                sprintf(
+                                    __(
+                                        '%1$sGet %2$s off%3$s Extendify Pro when you upgrade today!',
+                                        'extendify',
+                                    ),
+                                    '<strong>',
+                                    '50%',
+                                    '</strong>',
+                                ),
+                            ),
+                        }}
+                    />
+                </a>
             </div>
-            <span className="text-white text-sm no-underline font-medium outline-none flex items-center">
-                {__('Get more', 'extendify')}
-                <Icon icon={growthArrow} size={24} className="-mr-1.5" />
-            </span>
-        </a>
+        </div>
     )
-}
+})

extendify-sdk/src/app.css

@@ -14,12 +14,11 @@ import { NoImportModal } from './modals/NoImportModal'
 import { ProModal } from './modals/ProModal'
 
 const canImportMiddleware = Middleware([
-    'NeedsRegistrationModal',
     'hasRequiredPlugins',
     'hasPluginsActivated',
 ])
 
-export function ImportTemplateBlock({ template }) {
+export function ImportTemplateBlock({ template, maxHeight }) {
     const importButtonRef = useRef(null)
     const once = useRef(false)
     const hasAvailableImports = useUserStore(
@@ -35,6 +34,7 @@ export function ImportTemplateBlock({ template }) {
     )
     const [loaded, setLoaded] = useState(false)
     const devMode = useIsDevMode()
+    const [topValue, setTopValue] = useState(0)
 
     const focusTrapInnerBlocks = () => {
         if (once.current) return
@@ -110,7 +110,7 @@ export function ImportTemplateBlock({ template }) {
                                     )
                                     const id = window.setTimeout(() => {
                                         frame.style.height = height + 'px'
-                                    }, 1000)
+                                    }, 2000)
                                     timeouts.push(id)
                                 }
                             }
@@ -134,24 +134,53 @@ export function ImportTemplateBlock({ template }) {
         }
     }, [])
 
+    useEffect(() => {
+        if (!Number.isInteger(maxHeight)) return
+        const button = importButtonRef.current
+        const handleIn = () => {
+            // The live component changes over time so easier to query on demand
+            const height = button.offsetHeight
+            button.style.transitionDuration = height * 1.5 + 'ms'
+            setTopValue(Math.abs(height - maxHeight) * -1)
+        }
+        const handleOut = () => {
+            const height = button.offsetHeight
+            button.style.transitionDuration = height / 1.5 + 'ms'
+            setTopValue(0)
+        }
+        button.addEventListener('focus', handleIn)
+        button.addEventListener('mouseenter', handleIn)
+        button.addEventListener('blur', handleOut)
+        button.addEventListener('mouseleave', handleOut)
+        return () => {
+            button.removeEventListener('focus', handleIn)
+            button.removeEventListener('mouseenter', handleIn)
+            button.removeEventListener('blur', handleOut)
+            button.removeEventListener('mouseleave', handleOut)
+        }
+    }, [maxHeight])
+
     return (
         <div className="relative group">
             <div
                 role="button"
                 tabIndex="0"
-                ref={importButtonRef}
                 aria-label={sprintf(
                     __('Press to import %s', 'extendify'),
                     template?.fields?.type,
                 )}
-                className="mb-6 md:mb-8 cursor-pointer button-focus"
+                style={{ maxHeight }}
+                className="m-0 cursor-pointer button-focus ease-in-out relative overflow-hidden bg-gray-100"
                 onFocus={focusTrapInnerBlocks}
                 onClick={importTemplate}
                 onKeyDown={handleKeyDown}>
                 <div
+                    ref={importButtonRef}
+                    style={{ top: topValue, transitionProperty: 'all' }}
                     className={classNames('with-light-shadow relative', {
                         [`is-template--${template.fields.status}`]:
                             template?.fields?.status && devMode,
+                        'p-6 md:p-8': Number.isInteger(maxHeight),
                     })}>
                     <BlockPreview
                         blocks={blocks}