EcomSys Blcoks Theme - Тема для раработки блочных сайтов на WordPress (Tailwind, Vite)

ОЧИСТИ !

DELETE FROM wp_posts 
WHERE post_type IN ('wp_template','wp_template_part');

ОБРАТИ ВНИМАНИЕ ПЕРЕД НАЧАЛОМ !!!

PATTERNS

---

1.Чтобы добавить шаблон в patterns нужно после добавления кода в файл переключить тему на любую другую, а потом обратно, тогда папка patterns пересканируеться системой и все шаблоны обнаружаться и станут доступны. Другого нормального способа я не нашел.

2.Для создания своих категорий шаблонов добавь в theme.json названия и слаг категорий в массив:

"patterns": [],
  "patternCategories": [
    {
      "slug": "ecomsys",
      "label": "Ecomsys patterns"
    }
  ]

УСТАНОВИ ПЛАГИН ECOMSYS PARTS SYNC !!!

---

Чтобы облегчить себе жизнь и при каждом сохранении в редакторе файлы темы обновлялись установи плагин Ecomsys Parts Sync, там появляеться дополнительная кнопка "sync" для синхронизации блока если нужно отдельно перезаписать блок в файл темы.

---

Быстрый старт

Установи зависимости

npm install

Добавь в .env путь

Пример:

WP_URL=http://localhost/wp              # подобный путь если через apache, nginx (норма)

---

Если вордпресс из DOCKER ?

выполни:

docker ps

посмотреть колонку PORTS.

Например:

0.0.0.0:8080->80/tcp

Значит WordPress открыт на:

http://localhost:8080                  # такой путь если docker (открываем просто порт)

VS CODE Важно !!!

Установи для разработки расширения :

Tailwind CSS IntelliSense (Intelligent Tailwind CSS tooling for VS Code)          # Самое важное !!!
PHP (All-in-One PHP support - IntelliSense, Debug, Formatter, ...)                # Остальные просто полезные
IntelliPHP - AI Autocomplete for PHP (AI-assisted development for PHP.)           # ...
ESLint (VS Code ESLint extension)
JavaScript (ES6) code snippets (Code snippets for JavaScript in ES6 syntax)
Prettier - Code formatter (Code formatter using prettier)

---

В папке templates есть базовые страницы:

templates/
   ├── index.html
   ├── page.html
   ├── single.html
   ├── archive.html
   ├── 404.html
   └── ...

---

В папке parts есть базовые @partials:

parts/
   ├── sidebar.html
   ├── header.html
   └── footer.html

---

В папке paterns можно создавать кастомные шаблоны для секций (формат .php !!!)

patterns/
   ├── hero.php
   ├── features.php
   └── ...

---

В конфиге theme.json задаем только основные настройки, которые подхватывает tailwind.config.js

Остальные базовые настройки в tailwind.config.js и в блоках от EcomSys Studio Core !

{
  "$schema": "https://schemas.wp.org/wp/6.5/theme.json",
  "version": 3,
  "settings": {
    "layout": {
      "contentSize": 1440,     # ставим одинаково для нашей темы,
      "wideSize": 1440,        # чтобы не было конфликта c Tailwindcss
      "custom": false
    },
    "color": {
      "palette": [
        { "slug": "primary", "color": "#111111", "name": "Primary" },
        { "slug": "accent", "color": "#3B82F6", "name": "Accent" },
        { "slug": "black", "color": "#000000", "name": "Black" },
        { "slug": "white", "color": "#ffffff", "name": "White" }
      ]
    },
    "typography": {
      "fontFamilies": [
        { "slug": "heading", "fontFamily": "Montserrat, sans-serif" },
        { "slug": "body", "fontFamily": "Inter, sans-serif" }
      ]
    }
  },
  "patterns": [],
  "patternCategories": [
    {
      "slug": "ecomsys",
      "label": "Ecomsys patterns"
    }
  ]

}

---

Для ширины сайта по конфигу ставим

"layout":{"type":"default"}

Для полной ширины по экрану

"layout":{"type":"constrained"

---

Парсим theme.json и заполняем tailwind.config.js

/** @type {import('tailwindcss').Config} */
const fs = require('fs');
const path = require('path');

const themeJson = JSON.parse(                     # путь к theme.json
  fs.readFileSync(path.resolve(__dirname, 'theme.json'), 'utf8')
);

module.exports = {
  content: [
    './**/*.{html, php}',                         # таилвинд видит все html, php файлы в теме
    './assets/src/**/*.{js, css, scss}',          # таилвинд видит все css, scss, js файлы в папке assets/src
  ],

  theme: {
    container: {                                  # ЗАВИСИМОСТИ SCREENS & PADDING
      center: true,                               # по центру страницы
      padding: {
        DEFAULT: '20px',                          # паддинг first-mobile
        sm: '30px',                               # паддинг от 640 до 768
        md: '40px',                               # паддинг от 768 до 1024
        lg: '50px',                               # паддинг от 1024 до 1200
        xl: "75",                                 # паддинг от 1200 до 1440
        '2xl': '120px',                           # паддинг выше 1440
      },
      screens: {                                  # от 0 примениться DEFAULT
        sm: '640px',                              # от 640 примениться sm
        md: '768px',                              # от 768 примениться md
        lg: '1024px',                             # от 1024 примениться lg
        xl: '1200px',                             # от 1200 примениться xl
        '2xl': '1440px',                          # от 1440 примениться 2xl
      },
    },

    extend: {
      maxWidth: {
        container: '1440px',                      # глобальный maxWidth
      },
      colors: parseColors(themeJson.settings.color?.palette || []),                         # colors из theme.json
      fontFamily: parseFontFamilies(themeJson.settings.typography?.fontFamilies || []),     # fontFamily из theme.json
      fontSize: parseFontSizes(themeJson.settings.typography?.fontSizes || []),             # fontSize из theme.json
    },
  },

  plugins: [],              # Можно подключить доп. плагины
};

// ---------- helpers ----------
function parseColors(palette) {
  const colors = {};
  palette.forEach((item) => {
    colors[item.slug] = item.color;
  });
  return colors;
}

function parseFontFamilies(families) {
  const fonts = {};
  families.forEach((item) => {
    fonts[item.slug] = item.fontFamily.split(',').map((f) => f.trim());
  });
  return fonts;
}

function parseFontSizes(sizes) {
  const fontSizes = {};
  sizes.forEach((item) => {
    fontSizes[item.slug] = item.size;
  });
  return fontSizes;
}