@sociallane/elements 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/admin/views/setup-widget-catalog-frontend.php +233 -158
- package/package.json +1 -1
- package/packages/core/assets/dist/.vite/manifest.json +1 -1
- package/packages/core/assets/dist/tailwind-BMzFIA_O.css +1 -0
- package/packages/widgets/widget-filter/data/view.php +8 -6
- package/packages/widgets/widget-filter/templates/wrapper.php +46 -13
- package/scripts/install.js +41 -18
- package/packages/core/assets/dist/tailwind-BE97TLZW.css +0 -1
- package/packages/core/assets/dist/tailwind-bKIOxZZH.css +0 -1
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
/**
|
|
3
3
|
* Front-end setup guide — Widget Catalog (Widget Filter)
|
|
4
4
|
* Used by shortcode [sociallane_widget_catalog_setup].
|
|
5
|
+
* Sidebar nav with anchors; sections in collapsible <details>.
|
|
5
6
|
*
|
|
6
7
|
* @package SocialLane_Elements
|
|
7
8
|
*/
|
|
@@ -9,180 +10,254 @@
|
|
|
9
10
|
if ( ! defined( 'ABSPATH' ) ) {
|
|
10
11
|
exit;
|
|
11
12
|
}
|
|
13
|
+
|
|
14
|
+
$sections = [
|
|
15
|
+
'what-is-catalog' => __( '1. What is the Widget Catalog?', 'sociallane-elements' ),
|
|
16
|
+
'installing' => __( '2. Installing the plugin', 'sociallane-elements' ),
|
|
17
|
+
'add-to-page' => __( '3. Add the Widget Catalog to a page', 'sociallane-elements' ),
|
|
18
|
+
'commands' => __( '4. Commands you need (plugin setup)', 'sociallane-elements' ),
|
|
19
|
+
'using-catalog' => __( '5. Using the catalog', 'sociallane-elements' ),
|
|
20
|
+
'package-mode' => __( '6. Package mode (widgets.json)', 'sociallane-elements' ),
|
|
21
|
+
'troubleshooting' => __( '7. Troubleshooting', 'sociallane-elements' ),
|
|
22
|
+
];
|
|
12
23
|
?>
|
|
13
|
-
<div class="sociallane-setup-guide
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
24
|
+
<div class="sociallane-setup-guide flex flex-col lg:flex-row gap-8 py-8 px-4 sm:px-6 text-neutral-700 dark:text-neutral-300 max-w-6xl mx-auto">
|
|
25
|
+
<aside class="sociallane-setup-sidebar lg:w-60 shrink-0" aria-label="<?php esc_attr_e( 'Setup guide navigation', 'sociallane-elements' ); ?>">
|
|
26
|
+
<nav class="lg:sticky lg:top-8 rounded-xl border border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/50 py-4 px-4 shadow-sm">
|
|
27
|
+
<h2 class="text-xs font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400 mb-3 px-2">
|
|
28
|
+
<?php esc_html_e( 'On this page', 'sociallane-elements' ); ?>
|
|
29
|
+
</h2>
|
|
30
|
+
<ul class="space-y-0.5">
|
|
31
|
+
<?php foreach ( $sections as $id => $label ) : ?>
|
|
32
|
+
<li>
|
|
33
|
+
<a href="#<?php echo esc_attr( $id ); ?>" class="sociallane-setup-anchor block py-2.5 px-3 text-sm text-neutral-600 dark:text-neutral-300 hover:bg-neutral-200/60 dark:hover:bg-neutral-700/60 hover:text-neutral-900 dark:hover:text-white rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-400 dark:focus:ring-neutral-500 focus:ring-offset-2 focus:ring-offset-neutral-50 dark:focus:ring-offset-neutral-900" data-section="<?php echo esc_attr( $id ); ?>">
|
|
34
|
+
<?php echo esc_html( $label ); ?>
|
|
35
|
+
</a>
|
|
36
|
+
</li>
|
|
37
|
+
<?php endforeach; ?>
|
|
38
|
+
</ul>
|
|
39
|
+
</nav>
|
|
40
|
+
</aside>
|
|
41
|
+
|
|
42
|
+
<main class="sociallane-setup-content flex-1 min-w-0 space-y-4">
|
|
43
|
+
<header class="mb-8">
|
|
44
|
+
<h1 class="text-2xl sm:text-3xl font-bold text-neutral-900 dark:text-white mb-2">
|
|
45
|
+
<?php esc_html_e( 'Widget Catalog Setup', 'sociallane-elements' ); ?>
|
|
46
|
+
</h1>
|
|
47
|
+
<p class="text-neutral-500 dark:text-neutral-400">
|
|
48
|
+
<?php esc_html_e( 'Install SocialLane Elements via npx (cherry-pick widgets or full install), add the Widget Catalog to a page, and run the commands you need. No manual widgets.json editing when using npx add.', 'sociallane-elements' ); ?>
|
|
49
|
+
</p>
|
|
50
|
+
</header>
|
|
20
51
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
52
|
+
<section id="what-is-catalog" class="sociallane-setup-section border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden scroll-mt-6" tabindex="-1">
|
|
53
|
+
<details class="group" open>
|
|
54
|
+
<summary class="cursor-pointer list-none py-4 px-5 font-semibold [&::-webkit-details-marker]:hidden [&::marker]:hidden text-neutral-800 dark:text-neutral-100 bg-neutral-50 dark:bg-neutral-800/50 hover:bg-neutral-100 dark:hover:bg-neutral-800 flex items-center justify-between gap-2">
|
|
55
|
+
<span><?php esc_html_e( '1. What is the Widget Catalog?', 'sociallane-elements' ); ?></span>
|
|
56
|
+
<span class="w-5 h-5 shrink-0 transition group-open:rotate-180" aria-hidden="true">
|
|
57
|
+
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
|
58
|
+
</span>
|
|
59
|
+
</summary>
|
|
60
|
+
<div class="p-5 pt-0 border-t border-neutral-200 dark:border-neutral-700">
|
|
61
|
+
<p class="mb-2">
|
|
62
|
+
<?php esc_html_e( 'The Widget Catalog (Widget Filter) is an Elementor widget that shows a filterable grid of all available SocialLane widgets. You can:', 'sociallane-elements' ); ?>
|
|
63
|
+
</p>
|
|
64
|
+
<ul class="list-disc list-inside space-y-1 ml-2">
|
|
65
|
+
<li><?php esc_html_e( 'Filter and search by category', 'sociallane-elements' ); ?></li>
|
|
66
|
+
<li><?php esc_html_e( 'See the exact npm install command for each widget', 'sociallane-elements' ); ?></li>
|
|
67
|
+
<li><?php esc_html_e( 'Copy a single command or build a collection and copy one command to install multiple widgets', 'sociallane-elements' ); ?></li>
|
|
68
|
+
<li><?php esc_html_e( 'Copy the widget slug (e.g. for widgets.json)', 'sociallane-elements' ); ?></li>
|
|
69
|
+
</ul>
|
|
70
|
+
</div>
|
|
71
|
+
</details>
|
|
72
|
+
</section>
|
|
35
73
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
74
|
+
<section id="installing" class="sociallane-setup-section border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden scroll-mt-6" tabindex="-1">
|
|
75
|
+
<details class="group">
|
|
76
|
+
<summary class="cursor-pointer list-none py-4 px-5 font-semibold [&::-webkit-details-marker]:hidden [&::marker]:hidden text-neutral-800 dark:text-neutral-100 bg-neutral-50 dark:bg-neutral-800/50 hover:bg-neutral-100 dark:hover:bg-neutral-800 flex items-center justify-between gap-2">
|
|
77
|
+
<span><?php esc_html_e( '2. Installing the plugin', 'sociallane-elements' ); ?></span>
|
|
78
|
+
<span class="w-5 h-5 shrink-0 transition group-open:rotate-180" aria-hidden="true">
|
|
79
|
+
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
|
80
|
+
</span>
|
|
81
|
+
</summary>
|
|
82
|
+
<div class="p-5 pt-0 border-t border-neutral-200 dark:border-neutral-700 space-y-6">
|
|
83
|
+
<p><?php esc_html_e( 'Choose one way to get SocialLane Elements into your site.', 'sociallane-elements' ); ?></p>
|
|
43
84
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
85
|
+
<div>
|
|
86
|
+
<h3 class="text-sm font-semibold text-neutral-800 dark:text-neutral-200 mb-2"><?php esc_html_e( 'Option A: Install via npx (recommended)', 'sociallane-elements' ); ?></h3>
|
|
87
|
+
<p class="text-sm mb-2"><?php esc_html_e( 'From your WordPress root (the folder that contains wp-content), run one of:', 'sociallane-elements' ); ?></p>
|
|
88
|
+
<p class="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1"><?php esc_html_e( 'Cherry-pick widgets (no manual widgets.json):', 'sociallane-elements' ); ?></p>
|
|
89
|
+
<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>npx @sociallane/elements --minimal</code></pre>
|
|
90
|
+
<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-1"><?php esc_html_e( 'Then add only the widgets you need (run from WordPress root or from the plugin directory):', 'sociallane-elements' ); ?></p>
|
|
91
|
+
<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200 mt-2"><code>npx @sociallane/elements add hero-split faq-stacked content-block widget-filter</code></pre>
|
|
92
|
+
<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-2"><?php esc_html_e( 'Each add updates widgets.json and runs the build automatically. Include widget-filter if you want the Widget Catalog in Elementor.', 'sociallane-elements' ); ?></p>
|
|
93
|
+
<p class="text-xs font-medium text-neutral-500 dark:text-neutral-400 mt-3 mb-1"><?php esc_html_e( 'Or install with all widgets:', 'sociallane-elements' ); ?></p>
|
|
94
|
+
<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>npx @sociallane/elements</code></pre>
|
|
95
|
+
<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-1"><?php esc_html_e( 'Copies the full plugin to wp-content/plugins/sociallane-elements, runs npm install and build. Activate in WordPress → Plugins.', 'sociallane-elements' ); ?></p>
|
|
96
|
+
<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-2"><?php esc_html_e( 'Custom path: npx @sociallane/elements --minimal path/to/wp-content/plugins/sociallane-elements', 'sociallane-elements' ); ?></p>
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
<div>
|
|
100
|
+
<h3 class="text-sm font-semibold text-neutral-800 dark:text-neutral-200 mb-2"><?php esc_html_e( 'Option B: Clone from Git', 'sociallane-elements' ); ?></h3>
|
|
101
|
+
<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>cd wp-content/plugins
|
|
47
102
|
git clone https://github.com/Mitch00llK/sociallane-elements.git
|
|
48
103
|
cd sociallane-elements
|
|
49
104
|
npm install</code></pre>
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
<div class="mb-6">
|
|
56
|
-
<h3 class="text-sm font-semibold text-neutral-800 dark:text-neutral-200 mb-2"><?php esc_html_e( 'Option B: Git submodule (versioned projects)', 'sociallane-elements' ); ?></h3>
|
|
57
|
-
<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>cd wp-content/plugins
|
|
105
|
+
<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-2"><?php esc_html_e( 'Build runs automatically after npm install. Then activate the plugin in WordPress → Plugins.', 'sociallane-elements' ); ?></p>
|
|
106
|
+
</div>
|
|
107
|
+
<div>
|
|
108
|
+
<h3 class="text-sm font-semibold text-neutral-800 dark:text-neutral-200 mb-2"><?php esc_html_e( 'Option C: Git submodule (versioned projects)', 'sociallane-elements' ); ?></h3>
|
|
109
|
+
<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>cd wp-content/plugins
|
|
58
110
|
git submodule add https://github.com/Mitch00llK/sociallane-elements.git
|
|
59
111
|
cd sociallane-elements
|
|
60
112
|
git submodule update --init --recursive
|
|
61
113
|
npm install</code></pre>
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
<p class="text-sm mb-2">
|
|
67
|
-
<?php esc_html_e( 'From your WordPress root, install the plugin (minimal = no widgets yet):', 'sociallane-elements' ); ?>
|
|
68
|
-
</p>
|
|
69
|
-
<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>npx @sociallane/elements --minimal</code></pre>
|
|
70
|
-
<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-2">
|
|
71
|
-
<?php esc_html_e( 'Then add only the widgets you want (no manual widgets.json editing):', 'sociallane-elements' ); ?>
|
|
72
|
-
</p>
|
|
73
|
-
<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200 mt-2"><code>npx @sociallane/elements add hero-split faq content-block widget-filter</code></pre>
|
|
74
|
-
<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-2">
|
|
75
|
-
<?php esc_html_e( 'Each add updates widgets.json and builds. Or run npx @sociallane/elements for a full install with all widgets.', 'sociallane-elements' ); ?>
|
|
76
|
-
</p>
|
|
77
|
-
</div>
|
|
78
|
-
</section>
|
|
79
|
-
|
|
80
|
-
<section class="mb-10">
|
|
81
|
-
<h2 class="text-lg font-semibold text-neutral-800 dark:text-neutral-100 mb-3 border-b border-neutral-200 dark:border-neutral-700 pb-2">
|
|
82
|
-
<?php esc_html_e( '3. Add the Widget Catalog to a page', 'sociallane-elements' ); ?>
|
|
83
|
-
</h2>
|
|
84
|
-
<ol class="list-decimal list-inside space-y-2 ml-2">
|
|
85
|
-
<li><?php esc_html_e( 'Edit any page with Elementor.', 'sociallane-elements' ); ?></li>
|
|
86
|
-
<li><?php esc_html_e( 'In the left panel, search for “Widget Filter” or “Widget Catalog”.', 'sociallane-elements' ); ?></li>
|
|
87
|
-
<li><?php esc_html_e( 'Drag the Widget Filter widget into your layout (e.g. in a section or container).', 'sociallane-elements' ); ?></li>
|
|
88
|
-
<li><?php esc_html_e( 'Optionally change the headline, number of columns, and whether search and category filters are shown.', 'sociallane-elements' ); ?></li>
|
|
89
|
-
<li><?php esc_html_e( 'Update the page. The catalog will list widgets based on the plugin’s widgets.json.', 'sociallane-elements' ); ?></li>
|
|
90
|
-
</ol>
|
|
91
|
-
</section>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
</details>
|
|
117
|
+
</section>
|
|
92
118
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
119
|
+
<section id="add-to-page" class="sociallane-setup-section border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden scroll-mt-6" tabindex="-1">
|
|
120
|
+
<details class="group">
|
|
121
|
+
<summary class="cursor-pointer list-none py-4 px-5 font-semibold [&::-webkit-details-marker]:hidden [&::marker]:hidden text-neutral-800 dark:text-neutral-100 bg-neutral-50 dark:bg-neutral-800/50 hover:bg-neutral-100 dark:hover:bg-neutral-800 flex items-center justify-between gap-2">
|
|
122
|
+
<span><?php esc_html_e( '3. Add the Widget Catalog to a page', 'sociallane-elements' ); ?></span>
|
|
123
|
+
<span class="w-5 h-5 shrink-0 transition group-open:rotate-180" aria-hidden="true">
|
|
124
|
+
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
|
125
|
+
</span>
|
|
126
|
+
</summary>
|
|
127
|
+
<div class="p-5 pt-0 border-t border-neutral-200 dark:border-neutral-700">
|
|
128
|
+
<ol class="list-decimal list-inside space-y-2 ml-2">
|
|
129
|
+
<li><?php esc_html_e( 'Edit any page with Elementor.', 'sociallane-elements' ); ?></li>
|
|
130
|
+
<li><?php esc_html_e( 'In the left panel, search for “Widget Filter” or “Widget Catalog”.', 'sociallane-elements' ); ?></li>
|
|
131
|
+
<li><?php esc_html_e( 'Drag the Widget Filter widget into your layout (e.g. in a section or container).', 'sociallane-elements' ); ?></li>
|
|
132
|
+
<li><?php esc_html_e( 'Optionally change the headline, number of columns, and whether search and category filters are shown.', 'sociallane-elements' ); ?></li>
|
|
133
|
+
<li><?php esc_html_e( 'Update the page. The catalog will list widgets based on the plugin’s widgets.json.', 'sociallane-elements' ); ?></li>
|
|
134
|
+
</ol>
|
|
135
|
+
</div>
|
|
136
|
+
</details>
|
|
137
|
+
</section>
|
|
100
138
|
|
|
101
|
-
<
|
|
102
|
-
<
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
139
|
+
<section id="commands" class="sociallane-setup-section border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden scroll-mt-6" tabindex="-1">
|
|
140
|
+
<details class="group">
|
|
141
|
+
<summary class="cursor-pointer list-none py-4 px-5 font-semibold [&::-webkit-details-marker]:hidden [&::marker]:hidden text-neutral-800 dark:text-neutral-100 bg-neutral-50 dark:bg-neutral-800/50 hover:bg-neutral-100 dark:hover:bg-neutral-800 flex items-center justify-between gap-2">
|
|
142
|
+
<span><?php esc_html_e( '4. Commands you need (plugin setup)', 'sociallane-elements' ); ?></span>
|
|
143
|
+
<span class="w-5 h-5 shrink-0 transition group-open:rotate-180" aria-hidden="true">
|
|
144
|
+
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
|
145
|
+
</span>
|
|
146
|
+
</summary>
|
|
147
|
+
<div class="p-5 pt-0 border-t border-neutral-200 dark:border-neutral-700 space-y-6">
|
|
148
|
+
<p><?php esc_html_e( 'If you installed via npx, sync and build already ran. The commands below are for Git-based installs or when working inside the plugin directory.', 'sociallane-elements' ); ?></p>
|
|
149
|
+
<div>
|
|
150
|
+
<h3 class="text-sm font-semibold text-neutral-800 dark:text-neutral-200 mb-2"><?php esc_html_e( 'First-time or after clone', 'sociallane-elements' ); ?></h3>
|
|
151
|
+
<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>cd wp-content/plugins/sociallane-elements
|
|
106
152
|
npm install
|
|
107
|
-
|
|
108
|
-
# Build — REQUIRED so Tailwind includes widget styles
|
|
109
153
|
npm run build</code></pre>
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
</p>
|
|
133
|
-
</div>
|
|
134
|
-
|
|
135
|
-
<div>
|
|
136
|
-
<h3 class="text-sm font-semibold text-neutral-800 dark:text-neutral-200 mb-2"><?php esc_html_e( 'Development (watch mode)', 'sociallane-elements' ); ?></h3>
|
|
137
|
-
<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>npm run dev</code></pre>
|
|
138
|
-
<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-2">
|
|
139
|
-
<?php esc_html_e( 'Rebuilds automatically when you change templates or styles.', 'sociallane-elements' ); ?>
|
|
140
|
-
</p>
|
|
141
|
-
</div>
|
|
142
|
-
</section>
|
|
154
|
+
<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-2"><?php esc_html_e( 'postinstall runs sync-widgets and build automatically. Build is required so Tailwind includes widget styles.', 'sociallane-elements' ); ?></p>
|
|
155
|
+
</div>
|
|
156
|
+
<div>
|
|
157
|
+
<h3 class="text-sm font-semibold text-neutral-800 dark:text-neutral-200 mb-2"><?php esc_html_e( 'Add or remove widgets (without npx add)', 'sociallane-elements' ); ?></h3>
|
|
158
|
+
<p class="text-sm mb-2"><?php esc_html_e( 'If you add or remove widget folders by hand (e.g. submodules), sync widgets.json then build:', 'sociallane-elements' ); ?></p>
|
|
159
|
+
<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>npm run sync-widgets
|
|
160
|
+
npm run build</code></pre>
|
|
161
|
+
<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-2"><?php esc_html_e( 'Or use npx @sociallane/elements add <slug> to add widgets without editing widgets.json.', 'sociallane-elements' ); ?></p>
|
|
162
|
+
</div>
|
|
163
|
+
<div>
|
|
164
|
+
<h3 class="text-sm font-semibold text-neutral-800 dark:text-neutral-200 mb-2"><?php esc_html_e( 'Clean reinstall (node_modules)', 'sociallane-elements' ); ?></h3>
|
|
165
|
+
<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>npm run reinstall</code></pre>
|
|
166
|
+
<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-2"><?php esc_html_e( 'Removes node_modules and runs npm install (and postinstall build). Use when dependencies are broken or after changing Node version.', 'sociallane-elements' ); ?></p>
|
|
167
|
+
</div>
|
|
168
|
+
<div>
|
|
169
|
+
<h3 class="text-sm font-semibold text-neutral-800 dark:text-neutral-200 mb-2"><?php esc_html_e( 'Development (watch mode)', 'sociallane-elements' ); ?></h3>
|
|
170
|
+
<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded-lg p-4 text-sm overflow-x-auto text-neutral-800 dark:text-neutral-200"><code>npm run dev</code></pre>
|
|
171
|
+
<p class="text-neutral-500 dark:text-neutral-400 text-sm mt-2"><?php esc_html_e( 'Rebuilds automatically when you change templates or styles.', 'sociallane-elements' ); ?></p>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
</details>
|
|
175
|
+
</section>
|
|
143
176
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
177
|
+
<section id="using-catalog" class="sociallane-setup-section border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden scroll-mt-6" tabindex="-1">
|
|
178
|
+
<details class="group">
|
|
179
|
+
<summary class="cursor-pointer list-none py-4 px-5 font-semibold [&::-webkit-details-marker]:hidden [&::marker]:hidden text-neutral-800 dark:text-neutral-100 bg-neutral-50 dark:bg-neutral-800/50 hover:bg-neutral-100 dark:hover:bg-neutral-800 flex items-center justify-between gap-2">
|
|
180
|
+
<span><?php esc_html_e( '5. Using the catalog', 'sociallane-elements' ); ?></span>
|
|
181
|
+
<span class="w-5 h-5 shrink-0 transition group-open:rotate-180" aria-hidden="true">
|
|
182
|
+
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
|
183
|
+
</span>
|
|
184
|
+
</summary>
|
|
185
|
+
<div class="p-5 pt-0 border-t border-neutral-200 dark:border-neutral-700">
|
|
186
|
+
<ul class="space-y-2 list-disc list-inside ml-2">
|
|
187
|
+
<li><strong><?php esc_html_e( 'Copy single widget', 'sociallane-elements' ); ?></strong> — <?php esc_html_e( 'Each card shows the full npm install command; use the Copy button next to it.', 'sociallane-elements' ); ?></li>
|
|
188
|
+
<li><strong><?php esc_html_e( 'Collection', 'sociallane-elements' ); ?></strong> — <?php esc_html_e( 'Check “Add to collection” on the widgets you want, then use “Copy npm install” in the sidebar to get one command that installs all selected packages.', 'sociallane-elements' ); ?></li>
|
|
189
|
+
<li><strong><?php esc_html_e( 'Copy Name', 'sociallane-elements' ); ?></strong> — <?php esc_html_e( 'Copies the widget slug (e.g. hero-split) for use in widgets.json or docs.', 'sociallane-elements' ); ?></li>
|
|
190
|
+
</ul>
|
|
191
|
+
</div>
|
|
192
|
+
</details>
|
|
193
|
+
</section>
|
|
154
194
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
195
|
+
<section id="package-mode" class="sociallane-setup-section border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden scroll-mt-6" tabindex="-1">
|
|
196
|
+
<details class="group">
|
|
197
|
+
<summary class="cursor-pointer list-none py-4 px-5 font-semibold [&::-webkit-details-marker]:hidden [&::marker]:hidden text-neutral-800 dark:text-neutral-100 bg-neutral-50 dark:bg-neutral-800/50 hover:bg-neutral-100 dark:hover:bg-neutral-800 flex items-center justify-between gap-2">
|
|
198
|
+
<span><?php esc_html_e( '6. Package mode (widgets.json)', 'sociallane-elements' ); ?></span>
|
|
199
|
+
<span class="w-5 h-5 shrink-0 transition group-open:rotate-180" aria-hidden="true">
|
|
200
|
+
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
|
201
|
+
</span>
|
|
202
|
+
</summary>
|
|
203
|
+
<div class="p-5 pt-0 border-t border-neutral-200 dark:border-neutral-700">
|
|
204
|
+
<p class="mb-2"><?php esc_html_e( 'When widgets.json exists at the plugin root, the plugin runs in package mode: only widget components are loaded. The onboarding wizard, SocialLane settings page, widget preview pages, and this setup guide are not available on that installation.', 'sociallane-elements' ); ?></p>
|
|
205
|
+
<p class="mb-2"><?php esc_html_e( 'To get the full admin (widget management, previews, this setup page), remove or rename widgets.json; the plugin will then use the Widget Manager and show all admin features.', 'sociallane-elements' ); ?></p>
|
|
206
|
+
</div>
|
|
207
|
+
</details>
|
|
208
|
+
</section>
|
|
166
209
|
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
210
|
+
<section id="troubleshooting" class="sociallane-setup-section border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden scroll-mt-6" tabindex="-1">
|
|
211
|
+
<details class="group">
|
|
212
|
+
<summary class="cursor-pointer list-none py-4 px-5 font-semibold [&::-webkit-details-marker]:hidden [&::marker]:hidden text-neutral-800 dark:text-neutral-100 bg-neutral-50 dark:bg-neutral-800/50 hover:bg-neutral-100 dark:hover:bg-neutral-800 flex items-center justify-between gap-2">
|
|
213
|
+
<span><?php esc_html_e( '7. Troubleshooting', 'sociallane-elements' ); ?></span>
|
|
214
|
+
<span class="w-5 h-5 shrink-0 transition group-open:rotate-180" aria-hidden="true">
|
|
215
|
+
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
|
216
|
+
</span>
|
|
217
|
+
</summary>
|
|
218
|
+
<div class="p-5 pt-0 border-t border-neutral-200 dark:border-neutral-700">
|
|
219
|
+
<dl class="space-y-4">
|
|
220
|
+
<dt class="font-medium text-neutral-800 dark:text-neutral-100"><?php esc_html_e( 'Widgets appear unstyled', 'sociallane-elements' ); ?></dt>
|
|
221
|
+
<dd class="ml-4"><?php esc_html_e( 'Run', 'sociallane-elements' ); ?> <code class="bg-neutral-100 dark:bg-neutral-700 px-1 rounded text-sm">npm run build</code> <?php esc_html_e( 'from the plugin root. Tailwind only outputs classes it finds in the current PHP templates.', 'sociallane-elements' ); ?></dd>
|
|
222
|
+
<dt class="font-medium text-neutral-800 dark:text-neutral-100"><?php esc_html_e( 'Tailwind / styles not loading', 'sociallane-elements' ); ?></dt>
|
|
223
|
+
<dd class="ml-4">
|
|
224
|
+
<?php esc_html_e( 'If the plugin is using the Vite dev server and styles don’t appear, force production assets by adding to wp-config.php:', 'sociallane-elements' ); ?>
|
|
225
|
+
<pre class="bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 rounded p-2 text-sm mt-2 text-neutral-800 dark:text-neutral-200"><code>define( 'SOCIALLANE_ELEMENTS_VITE_PRODUCTION', true );</code></pre>
|
|
226
|
+
<?php esc_html_e( 'Then run', 'sociallane-elements' ); ?> <code class="bg-neutral-100 dark:bg-neutral-700 px-1 rounded text-sm">npm run build</code>.
|
|
227
|
+
</dd>
|
|
228
|
+
<dt class="font-medium text-neutral-800 dark:text-neutral-100"><?php esc_html_e( 'Widget Filter not in Elementor panel', 'sociallane-elements' ); ?></dt>
|
|
229
|
+
<dd class="ml-4"><?php esc_html_e( 'Ensure "widget-filter" is listed in widgets.json and that SocialLane settings (Widget management) has the widget enabled.', 'sociallane-elements' ); ?></dd>
|
|
230
|
+
</dl>
|
|
231
|
+
</div>
|
|
232
|
+
</details>
|
|
233
|
+
</section>
|
|
234
|
+
</main>
|
|
188
235
|
</div>
|
|
236
|
+
<script>
|
|
237
|
+
(function() {
|
|
238
|
+
var guide = document.querySelector('.sociallane-setup-guide');
|
|
239
|
+
if (!guide) return;
|
|
240
|
+
function openSection(id) {
|
|
241
|
+
var section = document.getElementById(id);
|
|
242
|
+
if (section) {
|
|
243
|
+
var details = section.querySelector('details');
|
|
244
|
+
if (details) details.setAttribute('open', '');
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
function handleAnchor(e) {
|
|
248
|
+
var a = e.target.closest('.sociallane-setup-anchor');
|
|
249
|
+
if (!a || !a.hash) return;
|
|
250
|
+
var id = a.getAttribute('data-section') || a.hash.slice(1);
|
|
251
|
+
openSection(id);
|
|
252
|
+
}
|
|
253
|
+
guide.addEventListener('click', function(e) {
|
|
254
|
+
handleAnchor(e);
|
|
255
|
+
});
|
|
256
|
+
if (location.hash) {
|
|
257
|
+
var id = location.hash.slice(1);
|
|
258
|
+
if (document.getElementById(id)) {
|
|
259
|
+
openSection(id);
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
})();
|
|
263
|
+
</script>
|
package/package.json
CHANGED