@designbasekorea/wordpress-ui 0.1.3 → 0.1.5
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/README.md +26 -8
- package/dist/browser.cjs +1 -1
- package/dist/browser.d.ts +39 -2
- package/dist/browser.esm.js +1 -1
- package/dist/browser.iife.js +1 -1
- package/dist/components.cjs +1 -1
- package/dist/components.d.ts +40 -2
- package/dist/components.esm.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +41 -3
- package/dist/index.esm.js +1 -1
- package/dist/react/index.cjs +1 -1
- package/dist/react/index.d.ts +40 -2
- package/dist/react/index.esm.js +1 -1
- package/dist/styles/controls.css +2 -2
- package/dist/styles/overlays.css +1 -1
- package/dist/styles/shell.css +2 -2
- package/dist/styles.css +2 -2
- package/docs/WORDPRESS-ADMIN-GUIDE.md +61 -45
- package/examples/vanilla.html +42 -59
- package/package.json +2 -2
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
이 문서는 `@designbasekorea/wordpress-ui`를 WordPress 플러그인과 테마의 관리자 화면에 적용하는 표준 가이드입니다.
|
|
4
4
|
|
|
5
|
-
이 가이드의 기준 배포 버전은 `0.1.
|
|
5
|
+
이 가이드의 기준 배포 버전은 `0.1.5`입니다. 플러그인 또는 테마의 lockfile과
|
|
6
6
|
vendor 산출물도 같은 버전으로 맞추고, 버전을 올릴 때마다 아래 검증 명령을 다시
|
|
7
7
|
실행합니다.
|
|
8
8
|
|
|
@@ -62,7 +62,7 @@ WordPress plugin/theme
|
|
|
62
62
|
### 2.1 Node 프로젝트에 설치
|
|
63
63
|
|
|
64
64
|
```bash
|
|
65
|
-
npm install @designbasekorea/wordpress-ui@0.1.
|
|
65
|
+
npm install @designbasekorea/wordpress-ui@0.1.5
|
|
66
66
|
```
|
|
67
67
|
|
|
68
68
|
WordPress 서버가 npm을 실행하는 것이 아닙니다. 라이브러리를 설치한 뒤 플러그인 또는 테마 빌드 과정에서 배포에 필요한 파일을 포함해야 합니다.
|
|
@@ -143,7 +143,7 @@ require_once __DIR__ . '/vendor/wordpress-ui/wordpress-ui.php';
|
|
|
143
143
|
|
|
144
144
|
final class MyPlugin_Admin_Assets
|
|
145
145
|
{
|
|
146
|
-
private const UI_VERSION = '0.1.
|
|
146
|
+
private const UI_VERSION = '0.1.5';
|
|
147
147
|
|
|
148
148
|
public static function init(): void
|
|
149
149
|
{
|
|
@@ -266,52 +266,68 @@ WordPress 플러그인과 테마의 기본 선택지는 vanilla/PHP입니다. Re
|
|
|
266
266
|
|
|
267
267
|
### 4.1 페이지 기본 구조
|
|
268
268
|
|
|
269
|
+
PHP 템플릿은 `.designbase-wp-admin` root 안에서 `db-admin-shell`을 선언하는 방식을
|
|
270
|
+
권장합니다. 이 Web Component가 실제 `db-sidebar`, 플러그인명 브랜드,
|
|
271
|
+
`db-page-header`, 콘텐츠용 `<db-container size="full" padding="l" full-width>`를
|
|
272
|
+
하나의 패턴으로 렌더링합니다. 기존 템플릿을 단계적으로 이전하는 동안에는 화면별
|
|
273
|
+
adapter가 같은 `db-admin-shell`을 생성하도록 사용할 수 있습니다.
|
|
274
|
+
|
|
275
|
+
`sections`/`items`는 PHP에서 `wp_json_encode()`로 전달하고, 링크·권한·활성 상태는
|
|
276
|
+
소비 플러그인이나 테마가 관리합니다. 일반적인 화면은 아래처럼 `db-admin-shell` 하나를
|
|
277
|
+
선언하면 됩니다. 직접 자식 `db-page-header`는 헤더로 유지되고, 나머지 자식은 shell이
|
|
278
|
+
`db-container` 안으로 이동합니다.
|
|
279
|
+
|
|
269
280
|
```php
|
|
281
|
+
<?php
|
|
282
|
+
$sidebar_items = [
|
|
283
|
+
[
|
|
284
|
+
'id' => 'dashboard',
|
|
285
|
+
'label' => __('대시보드', 'myplugin'),
|
|
286
|
+
'href' => admin_url('admin.php?page=myplugin'),
|
|
287
|
+
'icon' => 'doughnut-chart',
|
|
288
|
+
'active' => (($_GET['page'] ?? '') === 'myplugin'),
|
|
289
|
+
],
|
|
290
|
+
[
|
|
291
|
+
'id' => 'settings',
|
|
292
|
+
'label' => __('설정', 'myplugin'),
|
|
293
|
+
'href' => admin_url('admin.php?page=myplugin-settings'),
|
|
294
|
+
'icon' => 'settings',
|
|
295
|
+
'active' => (($_GET['page'] ?? '') === 'myplugin-settings'),
|
|
296
|
+
],
|
|
297
|
+
];
|
|
298
|
+
?>
|
|
270
299
|
<div class="wrap designbase-wp-admin myplugin-admin">
|
|
271
|
-
<
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
</nav>
|
|
300
|
+
<db-admin-shell
|
|
301
|
+
title="My Plugin"
|
|
302
|
+
sections='<?php echo esc_attr(wp_json_encode([[
|
|
303
|
+
'id' => 'main',
|
|
304
|
+
'title' => 'My Plugin',
|
|
305
|
+
'items' => $sidebar_items,
|
|
306
|
+
]])); ?>'>
|
|
307
|
+
<db-page-header
|
|
308
|
+
title="<?php esc_attr_e('대시보드', 'myplugin'); ?>"
|
|
309
|
+
description="<?php esc_attr_e('플러그인 상태와 최근 작업을 확인합니다.', 'myplugin'); ?>"
|
|
310
|
+
variant="minimal"
|
|
311
|
+
align="left">
|
|
312
|
+
<div slot="actions">
|
|
313
|
+
<a class="button button-secondary" href="<?php echo esc_url(admin_url('admin.php?page=myplugin-settings')); ?>">
|
|
314
|
+
<?php esc_html_e('설정', 'myplugin'); ?>
|
|
315
|
+
</a>
|
|
288
316
|
</div>
|
|
289
|
-
</
|
|
290
|
-
|
|
291
|
-
<
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
<div>
|
|
296
|
-
<h1 class="dbwp-admin-page-header__title">대시보드</h1>
|
|
297
|
-
<p class="dbwp-admin-page-header__description">플러그인 상태와 최근 작업을 확인합니다.</p>
|
|
298
|
-
</div>
|
|
299
|
-
</div>
|
|
300
|
-
<div class="dbwp-admin-page-header__actions">
|
|
301
|
-
<a class="button button-secondary" href="<?php echo esc_url(admin_url('admin.php?page=myplugin-settings')); ?>">
|
|
302
|
-
설정
|
|
303
|
-
</a>
|
|
304
|
-
</div>
|
|
305
|
-
</header>
|
|
306
|
-
|
|
307
|
-
<div class="dbwp-admin-page-content">
|
|
308
|
-
<!-- tabs, filter, section, table 등을 배치한다. -->
|
|
309
|
-
</div>
|
|
310
|
-
</main>
|
|
311
|
-
</div>
|
|
317
|
+
</db-page-header>
|
|
318
|
+
|
|
319
|
+
<db-section title="<?php esc_attr_e('콘텐츠', 'myplugin'); ?>">
|
|
320
|
+
<!-- db-tabs, db-table 등을 배치한다. db-admin-shell이 db-container로 감싼다. -->
|
|
321
|
+
</db-section>
|
|
322
|
+
</db-admin-shell>
|
|
312
323
|
</div>
|
|
313
324
|
```
|
|
314
325
|
|
|
326
|
+
기존 화면을 일괄 재작성하기 어려운 경우에는 현재 플러그인의 adapter가 기존 root children을
|
|
327
|
+
`db-admin-shell`로 이동하게 두어도 됩니다. adapter는 화면별 메뉴 설정과 root 선택만
|
|
328
|
+
담당하고, 실제 shell·sidebar·header toggle·content container 렌더링은 패키지의
|
|
329
|
+
Web Component가 담당합니다.
|
|
330
|
+
|
|
315
331
|
컴포넌트 스타일을 사용하는 자체 markup은 `.designbase-wp-admin` 내부에 둡니다. 단순한 링크와 form submit은 WordPress의 native `<a>`와 `<button>`을 우선 사용하고, 복합 동작이 필요한 경우에만 Web Component를 사용합니다.
|
|
316
332
|
|
|
317
333
|
### 4.2 ui-wc 기본 컴포넌트 사용
|
|
@@ -411,7 +427,7 @@ select?.addEventListener('db-change', (event) => {
|
|
|
411
427
|
React는 선택 사항입니다. Gutenberg나 기존 React 앱과 연결해야 하는 화면에서만 사용하고, 일반적인 PHP admin page에는 vanilla entry를 권장합니다.
|
|
412
428
|
|
|
413
429
|
```bash
|
|
414
|
-
npm install @designbasekorea/wordpress-ui@0.1.
|
|
430
|
+
npm install @designbasekorea/wordpress-ui@0.1.5 react react-dom
|
|
415
431
|
```
|
|
416
432
|
|
|
417
433
|
```tsx
|
|
@@ -621,7 +637,7 @@ register_setting('myplugin', 'myplugin_options', [
|
|
|
621
637
|
|
|
622
638
|
```text
|
|
623
639
|
.designbase-wp-admin
|
|
624
|
-
└─ AdminShell 또는
|
|
640
|
+
└─ AdminShell 또는 db-admin-shell
|
|
625
641
|
├─ AdminSidebar 또는 plugin 내부 nav
|
|
626
642
|
└─ main
|
|
627
643
|
├─ AdminPageHeader / db-page-header
|
package/examples/vanilla.html
CHANGED
|
@@ -7,68 +7,51 @@
|
|
|
7
7
|
<link rel="stylesheet" href="../dist/styles.css">
|
|
8
8
|
</head>
|
|
9
9
|
<body>
|
|
10
|
-
<div class="designbase-wp-admin">
|
|
11
|
-
<
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
</
|
|
23
|
-
<main class="designbase-wp-admin__shell-main">
|
|
24
|
-
<button
|
|
25
|
-
class="designbase-wp-admin__shell-menu-toggle"
|
|
26
|
-
type="button"
|
|
27
|
-
data-sidebar-toggle="example-sidebar"
|
|
28
|
-
aria-controls="example-sidebar"
|
|
29
|
-
aria-expanded="false"
|
|
30
|
-
><i class="designbase-wp-admin__icon icon-menu" aria-hidden="true"></i><span class="screen-reader-text">메뉴 열기</span></button>
|
|
31
|
-
<div class="designbase-wp-admin__page">
|
|
32
|
-
<db-page-header
|
|
33
|
-
title="페이지 목록"
|
|
34
|
-
description="REST와 권한 상태는 소비자가 소유하고 UI는 상태만 표현합니다."
|
|
35
|
-
variant="minimal"
|
|
36
|
-
>
|
|
37
|
-
<db-button slot="actions" variant="primary" size="s" start-icon="plus" type="button">새 페이지</db-button>
|
|
38
|
-
</db-page-header>
|
|
10
|
+
<div class="wrap designbase-wp-admin">
|
|
11
|
+
<db-admin-shell
|
|
12
|
+
id="wordpress-ui-example-shell"
|
|
13
|
+
title="PageNest"
|
|
14
|
+
sections='[{"id":"main","title":"PageNest","items":[{"id":"dashboard","label":"대시보드","href":"#dashboard","icon":"dashboard","active":true},{"id":"pages","label":"페이지 목록","href":"#pages","icon":"file-manager","badge":12},{"id":"settings","label":"설정","href":"#settings","icon":"settings"}]}]'
|
|
15
|
+
>
|
|
16
|
+
<db-page-header
|
|
17
|
+
title="페이지 목록"
|
|
18
|
+
description="db-admin-shell이 db-sidebar, db-page-header, db-container를 하나의 패턴으로 제공합니다."
|
|
19
|
+
variant="minimal"
|
|
20
|
+
>
|
|
21
|
+
<db-button slot="actions" variant="primary" size="s" start-icon="plus" type="button">새 페이지</db-button>
|
|
22
|
+
</db-page-header>
|
|
39
23
|
|
|
40
|
-
|
|
24
|
+
<db-alert
|
|
25
|
+
variant="info"
|
|
26
|
+
title="wordpress-ui 예제"
|
|
27
|
+
message="REST와 권한 상태는 소비 플러그인/테마가 소유하고 UI는 상태만 표현합니다."
|
|
28
|
+
closable="false"
|
|
29
|
+
></db-alert>
|
|
41
30
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
31
|
+
<db-section title="검색 및 필터" description="shell이 이 영역을 자동으로 db-container 안에 배치합니다.">
|
|
32
|
+
<form class="designbase-wp-admin__filter-bar" role="search">
|
|
33
|
+
<div class="designbase-wp-admin__filter-bar-toolbar">
|
|
34
|
+
<db-search-bar name="search" placeholder="페이지 검색" aria-label="검색"></db-search-bar>
|
|
35
|
+
<db-select
|
|
36
|
+
name="status"
|
|
37
|
+
aria-label="상태"
|
|
38
|
+
value="all"
|
|
39
|
+
options='[{"value":"all","label":"전체 상태"},{"value":"published","label":"공개"},{"value":"draft","label":"초안"}]'
|
|
40
|
+
></db-select>
|
|
41
|
+
<db-button variant="secondary" size="s" type="reset">초기화</db-button>
|
|
42
|
+
<db-button variant="primary" size="s" type="submit">적용</db-button>
|
|
43
|
+
</div>
|
|
44
|
+
</form>
|
|
45
|
+
</db-section>
|
|
53
46
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
<tr><td>Designbase</td><td><span class="designbase-wp-admin__status is-success">공개</span></td><td>방금 전</td></tr>
|
|
63
|
-
<tr><td>새 링크 페이지</td><td><span class="designbase-wp-admin__status">초안</span></td><td>어제</td></tr>
|
|
64
|
-
</tbody>
|
|
65
|
-
</table>
|
|
66
|
-
</div>
|
|
67
|
-
</div>
|
|
68
|
-
</section>
|
|
69
|
-
</div>
|
|
70
|
-
</main>
|
|
71
|
-
</div>
|
|
47
|
+
<db-section title="최근 페이지" description="데이터 조회와 저장은 소비 플러그인의 책임입니다.">
|
|
48
|
+
<db-table
|
|
49
|
+
columns='[{"key":"title","header":"제목"},{"key":"status","header":"상태"},{"key":"modified","header":"수정일"}]'
|
|
50
|
+
data='[{"title":"Designbase","status":"공개","modified":"방금 전"},{"title":"새 링크 페이지","status":"초안","modified":"어제"}]'
|
|
51
|
+
row-key="title"
|
|
52
|
+
></db-table>
|
|
53
|
+
</db-section>
|
|
54
|
+
</db-admin-shell>
|
|
72
55
|
</div>
|
|
73
56
|
<script src="../dist/browser.iife.js"></script>
|
|
74
57
|
</body>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@designbasekorea/wordpress-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"description": "WordPress 관리자용 Designbase UI primitives와 plugin shell patterns",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
"build-storybook": "storybook build"
|
|
75
75
|
},
|
|
76
76
|
"dependencies": {
|
|
77
|
-
"@designbasekorea/ui-wc": "0.8.
|
|
77
|
+
"@designbasekorea/ui-wc": "0.8.6"
|
|
78
78
|
},
|
|
79
79
|
"peerDependencies": {
|
|
80
80
|
"react": ">=18.0.0 <20.0.0",
|