Mister Vo Visual (mv-visual)

Визуальный grid-редактор для WordPress. Создавай страницы как в Тильде, но open source и на своём сервере.

[

Визуальный grid-редактор, который позволяет размещать блоки на координатной сетке (12×8 по умолчанию) с drag-and-drop, готовыми шаблонами и анимациями.

✨ Фичи

• 🎯 Grid 12×8 по умолчанию (настраивается 4-16 колонок, 1-20 строк)
• 🧩 5 типов блоков: Heading, Text, Image, Button, HTML
• 📦 4 готовых шаблона: Hero с CTA, 3 Cards, Stats, Lead-magnet
• 🖱 Drag-and-drop в canvas
• 🎬 Анимации: fade-in, slide-up, scale-up, blur-in (при scroll)
• 📱 Responsive: 4/8/12 колонок (mobile/tablet/desktop)
• 🔌 Extensions API — добавляй свои блоки из других плагинов
• 🚫 Без зависимостей (только ядро WordPress)
• 📜 GPL v2 — используй свободно

📦 Установка

Через Git (рекомендуется для разработчиков)

cd wp-content/plugins/
git clone https://github.com/mr-olivka/mv-visual.git
wp plugin activate mv-visual

Через ZIP

1. Скачай последний релиз
2. WordPress → Плагины → Добавить новый → Загрузить плагин
3. Выбери ZIP → Установить → Активировать

Через WP-CLI

wp plugin install https://github.com/mr-olivka/mv-visual/releases/latest/download/mv-visual.zip --activate

🚀 Использование

1. Mr Vo Visual → Canvas — открой визуальный редактор
2. "+ Add New Block" — создай блок (Heading, Text, Image, Button, HTML)
3. Перетаскивай блоки по сетке
4. "Edit" на блоке — настрой контент, координаты, анимации
5. "Insert template" — вставь готовый шаблон (Hero, Cards, Stats, Lead-magnet)

В шаблоне темы

<?php
if ( function_exists( 'mv_visual_render' ) ) {
    mv_visual_render();
}
?>

Этот вызов подключит CSS/JS плагина и отрисует все блоки через CSS Grid.

Через shortcode

// В любом посте/странице:
[mv_block id="76"]

Один блок, без обёртки .mv-grid. Удобно для встраивания в обычные посты.

Кастомные блоки (Extensions API)

// В mu-plugins/ или в другом плагине:
add_filter( 'mv_visual_block_types', function ( $types ) {
    $types['quote'] = [
        'label'  => 'Цитата',
        'icon'   => '❝',
        'render' => function ( $block ) {
            return '<blockquote>' . esc_html( $block->post_content ) . '</blockquote>';
        },
    ];
    return $types;
} );

Миграция из ACF Repeater

$result = MV_Migration::run();
// Array ( [migrated] => 3, [skipped] => 0, [errors] => [] )

🔌 Расширения

Добавляй свои блоки, шаблоны, анимации из других плагинов:

// Новый тип блока
add_filter( 'mv_visual_block_types', function ( $types ) {
    $types['quote'] = [
        'label'       => 'Цитата',
        'icon'        => 'dashicons-format-quote',
        'fields'      => [ 'author', 'text', 'source' ],
        'description' => 'Цитата с автором',
    ];
    return $types;
} );

// Новый шаблон
add_filter( 'mv_visual_templates', function ( $templates ) {
    $templates['my-cta'] = [
        'label'  => 'My CTA',
        'icon'   => '🎯',
        'blocks' => [
            [
                'type'  => 'heading',
                'title' => 'My Headline',
                'x' => 0, 'y' => 0, 'w' => 12, 'h' => 2,
            ],
        ],
    ];
    return $templates;
} );

// Новая анимация
add_filter( 'mv_visual_animations', function ( $animations ) {
    $animations['rotate-in'] = 'Rotate in';
    return $animations;
} );

Подробнее: docs/extensions-api.md

🌐 REST API

POST   /wp-json/mv-visual/v1/blocks              — создать блок
PUT    /wp-json/mv-visual/v1/blocks/:id          — обновить координаты
GET    /wp-json/mv-visual/v1/blocks              — список
POST   /wp-json/mv-visual/v1/templates/:id       — применить шаблон
POST   /wp-json/mv-visual/v1/grid                — изменить размер сетки

📋 Требования

• WordPress 6.0+
• PHP 7.4+
• Современный браузер (Chrome 90+, Firefox 88+, Safari 14+)

🆚 Сравнение с альтернативами

🗺 Дорожная карта

• [x] v1.0 — MVP (canvas, 5 блоков, 4 шаблона, анимации)
• [ ] v1.1 — responsive preview (M, S, XS)
• [ ] v1.2 — Undo/Redo, copy/paste, hotkeys
• [ ] v2.0 — Live preview в canvas (iframe)
• [ ] v2.1 — Multi-block select, alignment tools
• [ ] v3.0 — Theme integration (theme.json, Global Styles)

🤝 Вклад

PRs приветствуются! Особенно:

• 🆕 Новые типы блоков (Quote, Video, Form, Carousel, Gallery)
• 🎨 Новые шаблоны
• 🎬 Новые анимации
• 🌐 Локализация (i18n)
• 📖 Документация

См. CONTRIBUTING.md

📄 Лицензия

GPL v2 или новее. См. LICENSE.

👤 Автор

Mr Olivka — https://github.com/mr-olivka

Сделано с ❤️ для open source комьюнити.

Не путать с:

• Elementor (проприетарный, тяжёлый)
• MaxiBlocks (open source, но не координатная сетка)
• Bricks Builder (проприетарный, дорогой)