# Какие frameworks поставляются в коробочной версии wordpress, чтобы их можно было использовать для построения интерфейсов admin-панели?

> В «коробочной» версии WordPress **нет полноценного JS-фреймворка как Laravel + Vue из коробки**,  
> но есть встроенные инструменты, которые можно использовать.

### 🥇 1️⃣ Gutenberg (React) — главный встроенный framework

Внутри админки WordPress используется **React**.

WP поставляется с:

- React
- ReactDOM
- wp.element
- wp.components
- wp.data
- wp.apiFetch
- wp.i18n
- wp.hooks

Это называется **WordPress JavaScript Packages**.

##### Пример подключения:

```php
wp_enqueue_script(
    'my-admin-script',
    plugins_url('admin.js', __FILE__),
    ['wp-element', 'wp-components', 'wp-api-fetch'],
    '1.0',
    true
);

```

И в JS:

```js
const { Button, TextControl } = wp.components;
const { useState } = wp.element;

```

Это официальный способ.

✔ современный  
✔ нативный  
✔ безопасный  
✔ используется в Gutenberg

Если делать сложный интерфейс — это лучший путь.

---

### 🥈 2️⃣ jQuery (встроен по умолчанию)

WordPress до сих пор включает jQuery.

```php
wp_enqueue_script('jquery');

```

Подходит для:

- простых форм
- динамических элементов
- AJAX

Но:

❌ это уже устаревший подход  
❌ не подходит для сложного SPA-интерфейса

---

### 🥉 3️⃣ jQuery UI (частично встроен)

В комплекте есть:

- Tabs
- Accordion
- Dialog
- Datepicker

Подключается так:

```php
wp_enqueue_script('jquery-ui-tabs');

```

Но выглядит немного устаревшим визуально.

#### 🧠 Как подключить "всё"

Технически можно перечислить всё вручную:

<div class="relative w-full my-4" id="bkmrk-add_action%28%27admin_en"><div class=""><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback"><div class=""><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼ5 ͼj" dir="ltr" id="bkmrk-add_action%28%27admin_en-1"><div class="cm-scroller"><div class="cm-content q9tKkq_readonly">add_action('admin_enqueue_scripts', function () {  
  
wp_enqueue_script('jquery');  
wp_enqueue_script('jquery-ui-core');  
wp_enqueue_script('jquery-ui-widget');  
wp_enqueue_script('jquery-ui-mouse');  
wp_enqueue_script('jquery-ui-position');  
  
wp_enqueue_script('jquery-ui-draggable');  
wp_enqueue_script('jquery-ui-droppable');  
wp_enqueue_script('jquery-ui-resizable');  
wp_enqueue_script('jquery-ui-selectable');  
wp_enqueue_script('jquery-ui-sortable');  
  
wp_enqueue_script('jquery-ui-accordion');  
wp_enqueue_script('jquery-ui-autocomplete');  
wp_enqueue_script('jquery-ui-button');  
wp_enqueue_script('jquery-ui-datepicker');  
wp_enqueue_script('jquery-ui-dialog');  
wp_enqueue_script('jquery-ui-menu');  
wp_enqueue_script('jquery-ui-progressbar');  
wp_enqueue_script('jquery-ui-slider');  
wp_enqueue_script('jquery-ui-spinner');  
wp_enqueue_script('jquery-ui-tabs');  
wp_enqueue_script('jquery-ui-tooltip');  
  
});</div></div></div></div></div></div></div></div></div><div class=""><div class="">  
</div></div></div></div></div>⚠ Но это плохая практика.

---

#### ❌ Почему не стоит подключать всё

1. Лишняя нагрузка
2. Замедление админки
3. Возможные конфликты
4. Большинство модулей тебе не понадобится

---

#### ✅ Правильный способ

Подключать только то, что нужно.

Например:

##### Tabs:

<div class="relative w-full my-4" id="bkmrk-wp_enqueue_script%28%27j-2"><div class=""><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback"><div class=""><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼ5 ͼj" dir="ltr" id="bkmrk-wp_enqueue_script%28%27j-3"><div class="cm-scroller"><div class="cm-content q9tKkq_readonly">wp_enqueue_script('jquery-ui-tabs');</div></div></div></div></div></div></div></div></div><div class=""></div></div></div></div>##### Dialog:

<div class="relative w-full my-4" id="bkmrk-wp_enqueue_script%28%27j-4"><div class=""><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback"><div class=""><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼ5 ͼj" dir="ltr" id="bkmrk-wp_enqueue_script%28%27j-5"><div class="cm-scroller"><div class="cm-content q9tKkq_readonly">wp_enqueue_script('jquery-ui-dialog');  
wp_enqueue_style('wp-jquery-ui-dialog');</div></div></div></div></div></div></div></div></div><div class=""></div></div></div></div>##### Datepicker:

<div class="relative w-full my-4" id="bkmrk-wp_enqueue_script%28%27j-6"><div class=""><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback"><div class=""><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼ5 ͼj" dir="ltr" id="bkmrk-wp_enqueue_script%28%27j-7"><div class="cm-scroller"><div class="cm-content q9tKkq_readonly">wp_enqueue_script('jquery-ui-datepicker');</div></div></div></div></div></div></div></div></div><div class=""><div class=""></div></div></div></div></div>#### 🎨 Важно: CSS

WordPress **не включает полный jQuery UI theme CSS**.

Для dialog есть:

<div class="relative w-full my-4" id="bkmrk-wp_enqueue_style%28%27wp"><div class=""><div class="relative"><div class="h-full min-h-0 min-w-0"><div class="h-full min-h-0 min-w-0"><div class="border border-token-border-light border-radius-3xl corner-superellipse/1.1 rounded-3xl"><div class="h-full w-full border-radius-3xl bg-token-bg-elevated-secondary corner-superellipse/1.1 overflow-clip rounded-3xl lxnfua_clipPathFallback"><div class=""><div class="relative z-0 flex max-w-full"><div class="q9tKkq_viewer cm-editor z-10 light:cm-light dark:cm-light flex h-full w-full flex-col items-stretch ͼ5 ͼj" dir="ltr" id="bkmrk-wp_enqueue_style%28%27wp-1"><div class="cm-scroller"><div class="cm-content q9tKkq_readonly">wp_enqueue_style('wp-jquery-ui-dialog');</div></div></div></div></div></div></div></div></div><div class=""></div></div></div></div>Но для tabs, accordion и других — стили придётся писать самому или подключать свою тему jQuery UI.

---

### 🧩 4️⃣ Dashicons

Встроенная иконная библиотека.

```php
wp_enqueue_style('dashicons');

```

---

### 🎨 5️⃣ Стандартные стили админки

Можно использовать встроенные CSS-классы:

- `.wrap`
- `.form-table`
- `.button`
- `.notice`
- `.widefat`
- `.nav-tab-wrapper`
- `.postbox`

Пример:

```html
<div class="wrap">
    <h1>SEO Settings</h1>
</div>

```

Это самый простой путь.

---

### 🚀 6️⃣ @wordpress/components (UI-библиотека)

Очень мощная вещь.

Компоненты:

- Button
- TextControl
- SelectControl
- ToggleControl
- Panel
- TabPanel
- Notice
- Modal

Пример:

```js
wp.element.render(
    wp.element.createElement(
        wp.components.Button,
        { isPrimary: true },
        'Save'
    ),
    document.getElementById('app')
);

```

Это нативный WP-UI на React.

---

#### ❗ Чего нет в коробке

- Vue
- Angular
- Bootstrap
- Tailwind
- Material UI

Их можно подключить вручную, но это уже не «из коробки».

---

#### Варианты:

##### 🔹 Простой интерфейс

→ стандартные WP формы + PHP  
(самый быстрый способ)

##### 🔹 Средний уровень

→ jQuery + AJAX

##### 🔹 Профессиональный

→ React + wp.components

---

#### 🧠 Дополнительные API WordPress

Ты можешь использовать:

- REST API (`register_rest_route`)
- Settings API
- Options API
- AJAX (`admin-ajax.php`)
- Nonce security