Global Props

Global props are automatically available to all components in the Livewire Page Builder. These props provide common styling options that can be applied to any component.

Configuration

Global props are configured in the config/livewire-page-builder.php file. You can customize the default values and add new global props by modifying the global_props array:

return [
    // ... other configuration options ...
    
    'global_props' => [
        'padding' => [
            'type' => \LivewirePageBuilder\Props\Padding::class,
            'label' => 'Padding',
            'default' => [
                'left' => 0,
                'right' => 0,
                'top' => 0,
                'bottom' => 0,
                'unit' => 'px'
            ],
        ],
        'margin' => [
            'type' => \LivewirePageBuilder\Props\Margin::class,
            'label' => 'Margin',
            'default' => [
                'left' => 0,
                'right' => 0,
                'top' => 0,
                'bottom' => 0,
                'unit' => 'px'
            ]
        ],
        'border' => [
            'type' => \LivewirePageBuilder\Props\Border::class,
            'label' => 'Border',
            'default' => [
                'style' => 'solid',
                'width' => 0,
                'color' => null,
                'radius_top_left' => 0,
                'radius_top_right' => 0,
                'radius_bottom_left' => 0,
                'radius_bottom_right' => 0,
                'unit' => 'px',
            ]
        ]
    ],
];

Available Global Props

The page builder includes three global props by default:

1. Padding

   • Controls the component's padding
   • Type: \LivewirePageBuilder\Props\Padding::class
   • Default: ['left' => 0, 'right' => 0, 'top' => 0, 'bottom' => 0, 'unit' => 'px']

2. Margin

   • Controls the component's margin
   • Type: \LivewirePageBuilder\Props\Margin::class
   • Default: ['left' => 0, 'right' => 0, 'top' => 0, 'bottom' => 0, 'unit' => 'px']

3. Border

   • Controls the component's border properties
   • Type: \LivewirePageBuilder\Props\Border::class
   • Default: ['style' => 'solid', 'width' => 0, 'color' => null, 'radius_top_left' => 0, 'radius_top_right' => 0, 'radius_bottom_left' => 0, 'radius_bottom_right' => 0, 'unit' => 'px']

Disabling Global Props

You can disable global props for specific components by adding them to the disabled_global_props array in your component's configuration.

Example

public static function getConfig(): array
{
    return [
        'name' => __('Custom Component'),
        'description' => __('A custom component with disabled global props.'),
        'icon' => '/path/to/icon.svg',
        'allow_children' => false,
        'disabled_global_props' => ['margin', 'padding', 'border'],
        'props' => [
            // Your component props here
        ]
    ];
}

Disabling Specific Props

You can disable individual global props by including only the ones you want to disable:

// Disable only margin
'disabled_global_props' => ['margin'],

// Disable margin and padding
'disabled_global_props' => ['margin', 'padding'],

// Disable all global props
'disabled_global_props' => ['margin', 'padding', 'border'],

Best Practices

1. Selective Disabling

   • Only disable global props that don't make sense for your component
   • Keep global props enabled when they provide useful functionality

2. Documentation

   • Document which global props are disabled and why
   • Consider adding comments in your component's configuration

3. Consistency

   • Be consistent with which global props you disable across similar components
   • Consider creating a base component class with common global prop configurations

4. Configuration

   • Keep default values in the config file consistent across your application
   • Use meaningful default values that make sense for most use cases
   • Consider using environment variables for configurable defaults

Example Component with Disabled Global Props

<?php

namespace App\Components;

use LivewirePageBuilder\Traits\PageBuilderComponent;
use Livewire\Component;
use LivewirePageBuilder\Interfaces\PageBuilderComponentInterface;

class CustomComponent extends Component implements PageBuilderComponentInterface
{
    use PageBuilderComponent;

    public $title;

    public function render()
    {
        return view('components.custom-component');
    }

    public static function getConfig(): array
    {
        return [
            'name' => __('Custom Component'),
            'description' => __('A component with specific global props disabled.'),
            'icon' => '/path/to/icon.svg',
            'allow_children' => false,
            // Disable margin and padding, but keep border
            'disabled_global_props' => ['margin', 'padding'],
            'props' => [
                'title' => [
                    'type' => \LivewirePageBuilder\Props\Text::class,
                    'label' => __('Title'),
                    'default' => __('Default Title'),
                ],
            ],
        ];
    }
}

In this example, the component:

• Disables margin and padding global props
• Keeps the border global prop enabled
• Adds its own custom title prop