{"id":25874569,"url":"https://github.com/avcat/custom-blocks","last_synced_at":"2025-03-02T09:28:18.323Z","repository":{"id":278604830,"uuid":"735140160","full_name":"avcat/custom-blocks","owner":"avcat","description":"Wordpress plugin based on ACF Blocks. A convenient way to create and maintain website UI system.","archived":false,"fork":false,"pushed_at":"2025-02-20T16:52:51.000Z","size":9743,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-20T17:42:29.441Z","etag":null,"topics":["acf","acf-blocks","css","css-nesting","php","scss","wordpress-plugin"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/avcat.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-12-23T20:05:50.000Z","updated_at":"2025-02-20T16:53:11.000Z","dependencies_parsed_at":"2025-02-20T17:42:37.112Z","dependency_job_id":"ffbe2e67-eb52-410c-9517-41591f493b42","html_url":"https://github.com/avcat/custom-blocks","commit_stats":null,"previous_names":["avcat/custom-blocks"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avcat%2Fcustom-blocks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avcat%2Fcustom-blocks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avcat%2Fcustom-blocks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/avcat%2Fcustom-blocks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/avcat","download_url":"https://codeload.github.com/avcat/custom-blocks/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241485013,"owners_count":19970410,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["acf","acf-blocks","css","css-nesting","php","scss","wordpress-plugin"],"created_at":"2025-03-02T09:28:17.679Z","updated_at":"2025-03-02T09:28:18.297Z","avatar_url":"https://github.com/avcat.png","language":"PHP","readme":"## Содержание\n\n- [О плагине](#о-плагине)\n- [Файлы блока](#файлы-блока)\n  - [Обязательные](#обязательные)\n  - [Необязательные](#необязательные)\n- [Компилирование SCSS (необязательно)](#компилирование-scss-необязательно)\n- [Как добавить новый блок](#как-добавить-новый-блок)\n  - [Регистрация блока](#регистрация-блока)\n  - [Добавление ACF](#добавление-acf)\n- [Как изменить ACF конкретного блока](#как-изменить-acf-конкретного-блока)\n- [Как изменить общий ACF всех блоков](#как-изменить-общий-acf-всех-блоков)\n- [Как использовать template parts](#как-использовать-template-parts)\n- [Конвенции при разработке и использовании плагина](#конвенции-при-разработке-и-использовании-плагина)\n  - [Обязательно](#обязательно)\n  - [Рекомендуется](#рекомендуется)\n\n## О плагине\n\nПлагин призван стать новой версией дизайна контента, которая бы не конфликтовала с существующей дизайн-системой на основе легаси Content Builder и существующих стилей.\n\nПлагин создан с идеей максимально упростить создание новых блоков и поддержку существующих блоков.\n\n## Файлы блока\n\n### Обязательные\n\n| Название | Назначение |\n| --- | --- |\n| `render.php` | Логика рендера блока.\u003cbr\u003eВ этом же файле можно описывать дополнительную логику рендеринга ACF. |\n| `template.php` | Шаблон блока.\u003cbr\u003eБлок будет обёрнут в контейнер, описанный в `templates/blocks-wrapper.php`. |\n\n### Необязательные\n\n| Название | Назначение |\n| --- | --- |\n| `acf/*.json `| Настройки ACF полей блока.\u003cbr\u003eACF, общий для всех блоков, хранится в корневой папке `acf` плагина. |\n| `index.php` | Дополнительная логика рендера ACF полей. |\n| `preview.png` | Превью блока, которое будет показываться при наведении на иконку блока в сайдбаре блочного редактора. |\n| `script.js` | JS, который будет добавлен на страницу вместе с данным блоком. |\n| `style.css` | CSS, который будет добавлен на страницу вместе с данным блоком. |\n| `compilable.scss` | Дополнительный файл стилей для обеспечения совместимости и как альтернатива [CSS Nesting](https://caniuse.com/css-nesting).\u003cbr\u003eБудет скомпилирован в `compilable.css` и добавлен к остальным стилям вместе с `style.css`. |\n\n## Компилирование SCSS (необязательно)\n\n| Команда | Описание |\n| --- | --- |\n| `cd wp-content/plugins/custom-blocks` | Перейти в папку плагина. |\n| `sass --version` | Проверить, что Sass установлен глобально. |\n| `npm install` | Установить библиотеку для компилирования Sass локально.\u003cbr\u003eЭтот шаг можно пропустить, если Sass установлен глобально. |\n| `npm run dev` | Скомпилировать `.scss`/`.sass` файлы из папки `blocks` один раз. |\n| `npm run watch` | Следить за изменениями. |\n| `npm run prod` | Скомпилировать и минифицировать. |\n\n## Как добавить новый блок\n\nВсе блоки хранятся в папке `blocks`.\n\nСначала необходимо зарегистрировать новый блок, затем добавить к нему ACF.\n\n### Регистрация блока\n\n*   Скопировать любой другой блок из папки `blocks`. \n*   Обновить файлы, описанные в [Файлах блока](#файлы-блока).\n\n### Добавление ACF\n\nACF можно добавить через админ панель. \n\n1.  В `Settings - Location Rules` указать тип группы `Block`, название - добавленный ранее блок.\n2.  Экспортировать новую группу полей как JSON. Поместить `acf.json` файл в папку acf в диреактории блока. В `acf.json` удалить открывающую `[` и `]` закрывающую квадратные скобки. То есть ACF блока должен иметь такую `{…}` структуру **вместо** такой `[{…}]`.\n3.  В админ панели удалить или деактивировать группу полей, так чтобы ACF поля блока описывались только файлом `acf.json`, который хранится в папке блока.\n\n## Как изменить ACF конкретного блока\n\nACF конретного блока находится в директории соответствующего блока в папке `acf`.\n\nМожно либо изменить файл напрямую в коде, либо импортировать файл средствами плагина ACF и изменить через GUI. Далее смотрите [Добавление ACF](#добавление-acf), пункты 2-3.\n\n## Как изменить общий ACF всех блоков\n\nACF для всех блоков находятся в корневой папке `acf` плагина.\n\nИзменить их можно так же, как и ACF блоков - смотрите [Как изменить ACF конкретного блока](#как-изменить-acf-конкретного-блока).\n\n## Как использовать template parts\n\nИспользование стандартной функции WordPress `get_template_part` невозможно при работе с файлами плагина. Вместо неё используется самописная функция `cb_get_template($name, $args = [])` с похожим функционалом, которая берёт файлы из папки `templates`.\n\n## Конвенции при разработке и использовании плагина\n\n### Обязательно\n\n* Для файлов плагина используйте только названия, указанные в [Файлах блока](#файлы-блока).\n* НЕ используйте квадратные скобки в файлах acf.json (смотрите [Добавление ACF](#добавление-acf), пункт 2).\n* Все ACF поля для конкретного блока должны храниться внутри группы **Field Type: Group** с обязательным селектором **Field Name: `fields`**.\n\n### Рекомендуется\n\n* Общий подход\n  * Используйте отдельный **шаблон** страниц для CB Blocks - \"Custom Blocks”.\n  * При создании блоков соблюдайте конвенцию: **“одна секция = один блок”**. Предпочтение отдаётся количеству и разнообразию секций в ущерб возможному переиспользованию кода.\n  * Если файл может иметь произвольное название (например, файлы _.json_), добавляйте ему осмысленное название. Например, '_blocks-background-color_', '_blocks-alignment_', etc.\n* HTML\n  * Используйте [data-атрибуты](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) для элементов, предназначенных для использования в JS: _data-js_, _data-slider_, etc.\n  * Для иконок используйте синтаксис [SVG спрайтов](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use): `\u003csvg\u003e\u003cuse href=\"sprite.svg#icon\"\u003e\u003c/use\u003e\u003c/svg\u003e`.\n* CSS\n  * **НЕ** используйте легаси стили из старой темы.\n  * Используйте новейший синтаксис для более понятного и лаконичного кода: [CSS Nesting](https://caniuse.com/css-nesting), [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), [:has()](https://caniuse.com/css-has), [grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout), [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox).\n  * Инкапсулируйте стили лишь внутри своего блока с помощью CSS Nesting.\n  * НЕ используйте сторонние библиотеки без необходимости.\n* JS\n  * Используйте [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE).\n  * НЕ используйте сторонние библиотеки без необходимости.\n\n ","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favcat%2Fcustom-blocks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Favcat%2Fcustom-blocks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Favcat%2Fcustom-blocks/lists"}