diff --git a/src/addons/template-library/components/library-no-connections-found.js b/src/addons/template-library/components/library-no-connections-found.js
index d6e5b830..d52665ca 100644
--- a/src/addons/template-library/components/library-no-connections-found.js
+++ b/src/addons/template-library/components/library-no-connections-found.js
@@ -13,13 +13,13 @@ function LibraryNoConnectionsFound() {
{ __(
- 'No Connections Found',
+ 'No Cloud Found',
'gutenberghub-template-library'
) }
{ __(
- "You don't have any existing connection. Try creating a new connection.",
+ "You don't have any existing cloud. Try adding a new cloud.",
'gutenberghub-template-library'
) }
@@ -28,7 +28,7 @@ function LibraryNoConnectionsFound() {
onClick={ () => setIsAddingNewConnection( true ) }
>
{ __(
- 'Create New Connection',
+ 'Add New Connection',
'gutenberghub-template-library'
) }
diff --git a/src/addons/template-library/components/style.scss b/src/addons/template-library/components/style.scss
index 2b4d69e8..8a32d62c 100644
--- a/src/addons/template-library/components/style.scss
+++ b/src/addons/template-library/components/style.scss
@@ -172,3 +172,14 @@
max-width: 90% !important;
}
}
+
+.gutenberghub-template-library-cloud__cloud-grid {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ gap: $grid-unit-30;
+
+ .gutenberghub-template-library-cloud-item {
+ border: 1px solid $black;
+
+ }
+}
\ No newline at end of file
diff --git a/src/addons/template-library/index.js b/src/addons/template-library/index.js
index 0233231b..cb28bf88 100644
--- a/src/addons/template-library/index.js
+++ b/src/addons/template-library/index.js
@@ -6,27 +6,37 @@ import { QueryClientProvider } from 'react-query';
import queryClient from './query-client';
+import { get } from 'lodash';
+
domReady(() => {
- let observer = new MutationObserver( ( _, observer ) => {
- let toolbarElement = document.querySelector(
- '.edit-post-header__toolbar'
- );
- if ( toolbarElement ) {
- let wrapper = document.createElement( 'div' );
- wrapper.id = 'wpcloudify-toolbar-items';
- wrapper.style.display = 'flex'; // TODO: move this somewhere else.
-
- toolbarElement.appendChild( wrapper );
-
- render(
-
-
- ,
- wrapper
+ const isAddonActive = get(
+ window,
+ 'editorskitInfo.addons.template_library',
+ false
+ );
+
+ if (isAddonActive) {
+ let observer = new MutationObserver((_, observer) => {
+ let toolbarElement = document.querySelector(
+ '.edit-post-header__toolbar'
);
+ if (toolbarElement) {
+ let wrapper = document.createElement('div');
+ wrapper.id = 'wpcloudify-toolbar-items';
+ wrapper.style.display = 'flex'; // TODO: move this somewhere else.
+
+ toolbarElement.appendChild(wrapper);
+
+ render(
+
+
+ ,
+ wrapper
+ );
- observer.disconnect();
- }
- } );
- observer.observe( document.body, { childList: true, attributes: true } );
-} );
+ observer.disconnect();
+ }
+ });
+ observer.observe(document.body, { childList: true, attributes: true });
+ }
+});
diff --git a/src/admin/addons-manager/index.js b/src/admin/addons-manager/index.js
new file mode 100644
index 00000000..54cc97af
--- /dev/null
+++ b/src/admin/addons-manager/index.js
@@ -0,0 +1,32 @@
+/**
+ * WordPress Dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToggleControl, Card, CardBody } from '@wordpress/components';
+
+/**
+ * Custom Dependencies
+ */
+import useSetting from '../hooks/use-setting'
+
+function AddonsManager() {
+
+ const { value, status, updateStatus, onUpdate } = useSetting('editorskit-addon-template-library');
+
+ return (
+
+
+
+ onUpdate( newStatus ) }
+ label={ __( 'Template Library', 'editorskit' ) }
+ />
+
+
+
+ )
+}
+
+export default AddonsManager
\ No newline at end of file
diff --git a/src/admin/hooks/use-setting.js b/src/admin/hooks/use-setting.js
new file mode 100644
index 00000000..6fbbd379
--- /dev/null
+++ b/src/admin/hooks/use-setting.js
@@ -0,0 +1,121 @@
+import { get } from "lodash";
+import { useState, useEffect } from "@wordpress/element";
+import apiFetch from "@wordpress/api-fetch";
+
+/**
+ * A custom hook that allows fetching of wp settings easier.
+ *
+ * @param {string} key - Setting key.
+ *
+ * @return any - Setting value
+ */
+function useSetting(
+ key,
+ onSuccess = () => null,
+ onUpdateCallback = () => null
+) {
+ const [fetchedSettings, setFetchedSettings] = useState(null);
+ const [status, setStatus] = useState({
+ loading: false,
+ error: false,
+ });
+
+ const [updateStatus, setUpdateStatus] = useState({
+ loading: false,
+ error: false,
+ });
+
+ useEffect(() => {
+ setStatus({
+ loading: true,
+ error: false,
+ });
+
+ apiFetch({ path: "/wp/v2/settings" })
+ .then((settings) => {
+ setFetchedSettings(settings);
+ onSuccess(settings[key]);
+
+ setStatus({
+ loading: false,
+ error: false,
+ });
+ })
+ .catch((error) => {
+ setStatus({
+ loading: false,
+ error: true,
+ });
+ });
+ }, []);
+
+ useEffect(() => {
+ const watchUpdate = (e) => {
+ setFetchedSettings({
+ ...fetchedSettings,
+ [key]: e.detail?.value,
+ });
+
+ onUpdateCallback(e.detail?.value);
+ };
+
+ window.addEventListener(`gutenberghub-setting-${key}-updated`, watchUpdate);
+
+ return () =>
+ window.removeEventListener(
+ `gutenberghub-setting-${key}-updated`,
+ watchUpdate
+ );
+ }, []);
+
+ const onUpdate = (newValue) => {
+ setUpdateStatus({
+ loading: true,
+ error: false,
+ });
+
+ apiFetch({
+ path: "wp/v2/settings",
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ "X-WP-Nonce": wpApiSettings.nonce,
+ },
+ body: JSON.stringify({ [key]: newValue }),
+ })
+ .then(() => {
+ setFetchedSettings({
+ ...fetchedSettings,
+ [key]: newValue,
+ });
+
+ window.dispatchEvent(
+ new CustomEvent(`gutenberghub-setting-${key}-updated`, {
+ detail: {
+ value: newValue,
+ },
+ })
+ );
+
+ setUpdateStatus({
+ loading: false,
+ error: false,
+ });
+ })
+ .catch(() => {
+ setUpdateStatus({
+ loading: false,
+ error: true,
+ });
+ });
+ };
+
+ return {
+ value: get(fetchedSettings, key, null),
+ status,
+ updateStatus,
+ onUpdate,
+ };
+}
+
+export default useSetting;
\ No newline at end of file
diff --git a/src/admin/index.js b/src/admin/index.js
index 38dd6ded..b8627928 100644
--- a/src/admin/index.js
+++ b/src/admin/index.js
@@ -10,6 +10,7 @@ import Notices from './notices';
* WordPress dependencies
*/
import { starFilled } from '@wordpress/icons';
+import AddonsManager from './addons-manager';
const { __, sprintf } = wp.i18n;
const { registerCoreBlocks } = wp.blockLibrary;
const { Fragment, Component, RawHTML, render } = wp.element;
@@ -39,9 +40,9 @@ class EditorsKitSettings extends Component {
className: 'ek-settings-blocks-manager',
},
{
- name: 'ek-addons-manager',
- title: __('Addons Manager', 'block-options'),
- className: 'ek-settings-addons-manager',
+ name: 'ek-template-library',
+ title: __('Template Library', 'block-options'),
+ className: 'ek-settings-template-library',
},
];
@@ -100,11 +101,11 @@ class EditorsKitSettings extends Component {
);
- case 'ek-addons-manager':
+ case 'ek-template-library':
return (
- {__('Manage each individual addon! You can enable or disable any addon you want and it will be reflected on Gutenberg block manager settings. Just uncheck the box and it will automatically be saved.', 'block-options')}
- {/* */}
+ {__('Here you can enable/disable the integrated GutenbergHub\'s template library.', 'block-options')}
+
);
diff --git a/src/admin/styles/style.scss b/src/admin/styles/style.scss
index 83e947f8..f353b6fc 100644
--- a/src/admin/styles/style.scss
+++ b/src/admin/styles/style.scss
@@ -112,23 +112,6 @@ $mobile : 736px;
margin-bottom: 16px;
}
- button {
- color: #0366d6;
-
- &:hover {
- text-decoration: underline;
- box-shadow: none !important;
- border: 0;
- outline: none;
- }
-
- &:focus {
- color: #0366d6;
- outline-offset: -1px;
- outline: 1px dotted #555d66;
- box-shadow: none;
- }
- }
.editorskit-docs-items-wrapper {
display: flex;
@@ -413,3 +396,9 @@ $mobile : 736px;
}
}
}
+
+.editorskit-addon-manager {
+ .components-base-control {
+ margin-bottom: 0 !important;
+ }
+}
\ No newline at end of file
diff --git a/src/blocks.js b/src/blocks.js
index f905daa6..fcbc87d7 100644
--- a/src/blocks.js
+++ b/src/blocks.js
@@ -73,10 +73,10 @@ import './extensions/movable-block-options';
import * as importBlock from './blocks/import';
import * as shareABlock from './blocks/shareablock';
-import './addons/template-library'
+import './addons/template-library';
export function registerBlocks() {
- [importBlock, shareABlock].forEach((block) => {
+ [importBlock, shareABloc].forEach((block) => {
if (!block) {
return;
}