PHPackages                             idetik/coretik-page-builder - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. idetik/coretik-page-builder

ActiveLibrary[Utility & Helpers](/categories/utility)

idetik/coretik-page-builder
===========================

Coretik page builer service

v2.5.0(5mo ago)21.9kPHPCI passing

Since Nov 11Pushed 5mo ago1 watchersCompare

[ Source](https://github.com/idetik/coretik-page-builder)[ Packagist](https://packagist.org/packages/idetik/coretik-page-builder)[ RSS](/packages/idetik-coretik-page-builder/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (5)Versions (54)Used By (0)

[![Latest Stable Version](https://camo.githubusercontent.com/4908837cf51fbac15bf64f2e0e31cf4ef4daa1fad72d0aab7e8977c8058929ad/68747470733a2f2f706f7365722e707567782e6f72672f69646574696b2f636f726574696b2d706167652d6275696c6465722f76)](https://packagist.org/packages/idetik/coretik-page-builder) [![License](https://camo.githubusercontent.com/2dbf75b5286c743d0e0a35e4896774de5cb9d170074c82948cc87f306531e431/68747470733a2f2f706f7365722e707567782e6f72672f69646574696b2f636f726574696b2d706167652d6275696c6465722f6c6963656e7365)](https://github.com/idetik/coretik-page-builder/blob/master/LICENSE.md)

Pagebuilder with ACF for Coretik
================================

[](#pagebuilder-with-acf-for-coretik)

Coretik page builder provides a modern way for developers to build blocks for page builder with **live admin preview** (and it is WP-CLI friendly !). It uses framework logic containing reusable components and composite blocks and it manages as many components levels as necessary. It also provides a way to build block types for the block editor (Gutenberg) with the same logic.

Coding
------

[](#coding)

[![004 (3)](https://private-user-images.githubusercontent.com/5182811/418266928-b595cc34-c3c6-4b1b-bdbc-55aa6738f010.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzM4MTgyOTgsIm5iZiI6MTc3MzgxNzk5OCwicGF0aCI6Ii81MTgyODExLzQxODI2NjkyOC1iNTk1Y2MzNC1jM2M2LTRiMWItYmRiYy01NWFhNjczOGYwMTAuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDMxOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAzMThUMDcxMzE4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MmM5ZDQ3ODRkNzZhYTUyMGRiZjQyYjI0NmZmMTY2NTJmZmNkZjljYjQwOGQ4OTYyOWNkMmQ1MTVmMmVjMzllYiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.uPCkZcPhPRnyojZytG-pk7rBiECjGm7kXoYOqQ3cnxo)](https://private-user-images.githubusercontent.com/5182811/418266928-b595cc34-c3c6-4b1b-bdbc-55aa6738f010.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzM4MTgyOTgsIm5iZiI6MTc3MzgxNzk5OCwicGF0aCI6Ii81MTgyODExLzQxODI2NjkyOC1iNTk1Y2MzNC1jM2M2LTRiMWItYmRiYy01NWFhNjczOGYwMTAuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDMxOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAzMThUMDcxMzE4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MmM5ZDQ3ODRkNzZhYTUyMGRiZjQyYjI0NmZmMTY2NTJmZmNkZjljYjQwOGQ4OTYyOWNkMmQ1MTVmMmVjMzllYiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.uPCkZcPhPRnyojZytG-pk7rBiECjGm7kXoYOqQ3cnxo)

EditingRendering[![004 (2)](https://private-user-images.githubusercontent.com/5182811/418266707-b90ba875-86e6-4bcf-9004-c781c30a8fbc.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzM4MTgyOTgsIm5iZiI6MTc3MzgxNzk5OCwicGF0aCI6Ii81MTgyODExLzQxODI2NjcwNy1iOTBiYTg3NS04NmU2LTRiY2YtOTAwNC1jNzgxYzMwYThmYmMuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDMxOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAzMThUMDcxMzE4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YTZhNDY0MWE4YTE2ODM5ZDhkYmRkZmE4YzVhM2JiNWUzNTExNGMzYmUyZjY5ZjkxMDBjMzhmNzk4NWZhMmNkOSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.TBTrdxRIa6J0_-SGKEABHPS-W5nUPJ06aeNNzrtV0Kw)](https://private-user-images.githubusercontent.com/5182811/418266707-b90ba875-86e6-4bcf-9004-c781c30a8fbc.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzM4MTgyOTgsIm5iZiI6MTc3MzgxNzk5OCwicGF0aCI6Ii81MTgyODExLzQxODI2NjcwNy1iOTBiYTg3NS04NmU2LTRiY2YtOTAwNC1jNzgxYzMwYThmYmMuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDMxOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAzMThUMDcxMzE4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YTZhNDY0MWE4YTE2ODM5ZDhkYmRkZmE4YzVhM2JiNWUzNTExNGMzYmUyZjY5ZjkxMDBjMzhmNzk4NWZhMmNkOSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.TBTrdxRIa6J0_-SGKEABHPS-W5nUPJ06aeNNzrtV0Kw)[![004](https://private-user-images.githubusercontent.com/5182811/418266726-9ed2f8da-73af-4de1-987c-ffb60fd3f6c9.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzM4MTgyOTgsIm5iZiI6MTc3MzgxNzk5OCwicGF0aCI6Ii81MTgyODExLzQxODI2NjcyNi05ZWQyZjhkYS03M2FmLTRkZTEtOTg3Yy1mZmI2MGZkM2Y2YzkuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDMxOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAzMThUMDcxMzE4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NGY1NjI5NjUxNTBmMDJjMzE2OWI0NmNjNzdmNzMxNDc3ZDJhOTZhNTg1MTM3NTY3OGUyZWUyNmY0YjNjNzFiNSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.RA01s-bxFHhd-amD_TgOlzqMF2K8cDncgSC5z_PHuKg)](https://private-user-images.githubusercontent.com/5182811/418266726-9ed2f8da-73af-4de1-987c-ffb60fd3f6c9.jpg?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzM4MTgyOTgsIm5iZiI6MTc3MzgxNzk5OCwicGF0aCI6Ii81MTgyODExLzQxODI2NjcyNi05ZWQyZjhkYS03M2FmLTRkZTEtOTg3Yy1mZmI2MGZkM2Y2YzkuanBnP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDMxOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAzMThUMDcxMzE4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NGY1NjI5NjUxNTBmMDJjMzE2OWI0NmNjNzdmNzMxNDc3ZDJhOTZhNTg1MTM3NTY3OGUyZWUyNmY0YjNjNzFiNSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.RA01s-bxFHhd-amD_TgOlzqMF2K8cDncgSC5z_PHuKg)Overview
--------

[](#overview)

This package works with [StoutLogic/acf-builder](https://github.com/StoutLogic/acf-builder) to create fields and just provide a way to build `StoutLogic\AcfBuilder\FieldsBuilder` blocks. You have to include them in any other fields you want.

Block instance defined all its features :

- rendering method ;
- admin fields and admin preview ;
- block type to register a block.json.

Three block levels exist :

- **Components** : the lower block level, used to build other blocks ;
- **Block** : a free way to build a complete block instance ;
- **Composite** : a fast way to build blocks based on many components or others blocks ;

Components doesn't appear in the user library. There are only used to build others blocks.

Requirements
------------

[](#requirements)

- PHP >= 8.0
- `idetik/coretik` :
- Plugin ACF :  (PRO recommended)
- Plugin ACF Extended :

Installation
------------

[](#installation)

`composer require idetik/coretik-page-builder`

Usage
-----

[](#usage)

This builder comes with some components ready to use. You can find them in `./src/Library/Component/`

### Configuration

[](#configuration)

First, you should define your own environment variables to ovveride the default settings. The default config list :

```
// The template directory in your theme to save the html views parts
'blocks.template.directory' => 'templates/blocks/',

// The blocks classes directory
'blocks.src.directory' => 'src/Services/PageBuilder/Blocks/',

// The template acf directory in your theme to save the additional admin styles and scripts
'blocks.acf.directory' => 'templates/acf/',

// Your blocks root namespace based on your app
'blocks.rootNamespace' => ($c['rootNamespace'] ?? 'App') . '\\Services\\PageBuilder\\Blocks',

// The blocks library containing all of your blocks
'blocks' => $c->get('pageBuilder.library')

// The fields directory to create and write complex fields groups
'fields.directory' => 'src/admin/fields/blocks/',

// The block thumbnail directory to save the blocks previews thumbnails
'fields.thumbnails.directory' => \get_stylesheet_directory() . '/assets/images/admin/acf/',

// The block thumbnail url to get the blocks previews thumbnails
'fields.thumbnails.baseUrl' => '/images/admin/acf/',
```

```
// Example to change the template directory
add_filter('coretik/page-builder/config', function ($config) {
    $config['blocks.template.directory'] = 'my-theme-templates/';
    return $config;
});
```

### Blocks classes

[](#blocks-classes)

**Every block and composite have the capability to build a block.json** file to register a block type in the block editor (Gutenberg) simply by implementing the `Coretik\PageBuilder\Core\Contract\ShouldBuildBlockType` interface. You can use the `Coretik\PageBuilder\Core\Block\Traits\BlockType` trait to do it.

#### Component

[](#component)

This lower block level allow you to reuse some basics fields in your theme. Simplified example for the titleComponent provided in this package as ready to use.

```