Default element data

Guide to Default Data Structure in YayMail Elements

  1. Basic Element Data Structure

    public static function get_data( $attributes = [] ) {    
        return [
            'id'        => uniqid(),
            'type'      => self::$type,
            'name'      => 'Element Name',
            'icon'      => self::$icon,
            'group'     => 'your_group',
            'available' => true,
            'position'  => 190,
            'data'      => [
                // Element specific data here
            ]
        ];
    }

  1. Example Implementation

    <?php
    public static function get_data( $attributes = [] ) {
        return [
            'id'        => uniqid(),
            'type'      => self::$type,
            'name'      => 'New Element',
            'icon'      => self::$icon,
            'group'     => 'woocommerce',
            'available' => true,
            'position'  => 190,
            'data'      => [
                // Layout
                'padding' => [
                    'value_path'    => 'padding',
                    'component'     => 'Spacing',
                    'title'         => 'Padding',
                    'default_value' => [
                        'top'    => '15',
                        'right'  => '50',
                        'bottom' => '15',
                        'left'   => '50',
                    ],
                ],
                'align'            => [
                    'value_path'    => 'align',
                    'component'     => 'Align',
                    'title'         => 'Align',
                    'default_value' => 'center',
                ],
                'width'            => [
                    'value_path'    => 'width',
                    'component'     => 'Dimension',
                    'title'         => 'Width',
                    'default_value' => '100',
                    'extras_data'   => [
                        'min'  => 0,
                        'max'  => 100,
                        'unit' => '%',
                    ],
                ],
                'height'           => [
                    'value_path'    => 'height',
                    'component'     => 'Dimension',
                    'title'         => 'Height',
                    'default_value' => '6',
                    'extras_data'   => [
                        'min' => 1,
                        'max' => 30,
                    ],
                ],
                'border_width'            => [
                    'value_path'    => 'border_width',
                    'component'     => 'NumberInput',
                    'title'         => 'Border width',
                    'default_value' => '3',
                    'extras_data'   => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'border_radius' => [
                    'component'     => 'Spacing',
                    'value_path'    => 'border_radius',
                    'title'         => 'Border radius',
                    'default_value' => [
                        'top_left'     => '5',
                        'top_right'    => '5',
                        'bottom_right' => '5',
                        'bottom_left'  => '5',
                    ],
                ],
               
                
                // Colors
                'text_color'           => [
                    'value_path'    => 'text_color',
                    'component'     => 'Color',
                    'title'         => 'Text color',
                    'default_value' => YAYMAIL_COLOR_TEXT_DEFAULT,
                ],
                'background_color' => [
                    'value_path'    => 'background_color',
                    'component'     => 'Color',
                    'title'         => 'Background color',
                    'default_value' => YAYMAIL_COLOR_BACKGROUND_DEFAULT,
                ],
                'background_image'       => [
                    'value_path'    => 'background_image',
                    'component'     => 'BackgroundImage',
                    'title'         => 'Background image',
                    'default_value' => [
                        'url'        => '',
                        'position'   => 'default',
                        'x_position' => 0,
                        'y_position' => 0,
                        'repeat'     => 'default',
                        'size'       => 'default',
                    ],
                ],
                'border_color'         => [
                    'value_path'    => 'border_color',
                    'component'     => 'Color',
                    'title'         => 'Border color',
                    'default_value' => YAYMAIL_COLOR_BORDER_DEFAULT,
                ],
                
                // Typography
                'font_family' => [
                    'value_path'    => 'font_family',
                    'component'     => 'FontFamilySelector',
                    'title'         => 'Font family',
                    'default_value' => YAYMAIL_DEFAULT_FAMILY,
                ],
                'border_style'            => [
                        'value_path'    => 'border_style',
                        'component'     => 'Selector',
                        'title'         => 'Border style',
                        'default_value' => 'solid',
                        'extras_data'   => [
                            'options' => [
                                [
                                    'label' => 'Solid',
                                    'value' => 'solid',
                                ],
                                [
                                    'label' => 'Double',
                                    'value' => 'double',
                                ],
                                [
                                    'label' => 'Dotted',
                                    'value' => 'dotted',
                                ],
                                [
                                    'label' => 'Dashed',
                                    'value' => 'dashed',
                                ],
                            ],
                        ],
                    ],
                
                // Title  
                'title' => [
                    'value_path'    => 'title',
                    'component'     => 'TextInput',
                    'title'         => 'Title',
                    'default_value' => 'Default Title',
                ],
                'title_color'          => [
                    'value_path'    => 'title_color',
                    'component'     => 'Color',
                    'title'         => 'Title color',
                    'default_value' => YAYMAIL_COLOR_WC_DEFAULT,
                ],
                
                // Content
                'url'              => [
                    'value_path'    => 'url',
                    'component'     => 'TextInput',
                    'title'         => 'URL',
                    'default_value' => '#',
                ],
                'content' => [
                    'value_path'    => 'content',
                    'component'     => 'RichTextEditor',
                    'title'         => 'Content',
                    'default_value' => '[your_shortcode]', // please folow created custom shortcode 
                ],
                'content_width'           => [
                    'value_path'    => 'content_width',
                    'component'     => 'Dimensions',
                    'title'         => 'Content width',
                    'default_value' => '60',
                ],
                
                // Divider
                'divider_color'    => [
                    'value_path'    => 'divider_color',
                    'component'     => 'Color',
                    'title'         => 'Line color',
                    'default_value' => '#333',
                ],
                'divider_type'     => [
                    'value_path'    => 'divider_type',
                    'component'     => 'DividerTypeSelector',
                    'title'         => 'Line type',
                    'default_value' => 'solid',
                    'extras_data'   => [
                        'options' => [
                            [
                                'label' => 'Solid',
                                'value' => 'solid',
                            ],
                            [
                                'label' => 'Double',
                                'value' => 'double',
                            ],
                            [
                                'label' => 'Dotted',
                                'value' => 'dotted',
                            ],
                            [
                                'label' => 'Dashed',
                                'value' => 'dashed',
                            ],
                        ],
                    ],
                ],
                
                // Button
                'button_text'             => [
                    'value_path'    => 'button_text',
                    'component'     => 'TextInput',
                    'title'         => 'Button text',
                    'default_value' => 'ORDER NOW',
                ],
                'button_url'              => [
                    'value_path'    => 'button_url',
                    'component'     => 'TextInput',
                    'title'         => 'Button URL',
                    'default_value' => '#',
                ],
                'button_background_color' => [
                    'value_path'    => 'button_background_color',
                    'component'     => 'Color',
                    'title'         => 'Button background color',
                    'default_value' => YAYMAIL_COLOR_BACKGROUND_DEFAULT,
                ],
                'button_text_color'       => [
                    'value_path'    => 'button_text_color',
                    'component'     => 'Color',
                    'title'         => 'Button text color',
                    'default_value' => '#fff',
                ],
                
                // Icon
                'width_icon'       => [
                    'value_path'    => 'width_icon',
                    'component'     => 'Dimension',
                    'title'         => 'Width',
                    'default_value' => '24',
                    'extras_data'   => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'theme'            => [
                    'value_path'    => 'theme',
                    'component'     => 'SocialIconThemeSelector',
                    'title'         => 'Styles theme',
                    'default_value' => 'Colorful',
                ],
                'icon_list'        => [
                    'value_path'    => 'icon_list',
                    'component'     => 'SocialList',
                    'title'         => 'Socials',
                    'default_value' => [
                        [
                            'icon' => 'facebook',
                            'url'  => '#',
                        ],
                        [
                            'icon' => 'instagram',
                            'url'  => '#',
                        ],
                        [
                            'icon' => 'linkedin',
                            'url'  => '#',
                        ],
                    ],
                ],
                
                // Image Box
                'image_box'        => [
                    'component' => 'ImageBox',
                    'column_1'  => [
                        'padding' => [
                            'top'    => '10',
                            'right'  => '10',
                            'bottom' => '10',
                            'left'   => '50',
                        ],
                        'align'   => 'center',
                        'image'   => YAYMAIL_PLUGIN_URL . 'assets/images/default-photo.png' ,
                        'width'   => '242',
                        'url'     => '#',
                    ],
                    'column_2'  => [
                        'padding'     => [
                            'top'    => '10',
                            'right'  => '50',
                            'bottom' => '10',
                            'left'   => '10',
                        ],
                        'font_family' => YAYMAIL_DEFAULT_FAMILY,
                        'rich_text'   => '<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>',
                    ],
                ],
                
                // Image List
                'image_list'       => [
                    'value_path'    => 'image_list',
                    'component'     => 'ImageList',
                    'default_value' => [
                        'column_1' => [
                            'align'            => 'center',
                            'padding'          => [
                                'top'    => '10',
                                'right'  => '10',
                                'bottom' => '10',
                                'left'   => '50',
                            ],
                            'image'            => YAYMAIL_PLUGIN_URL . 'assets/images/default-photo.png',
                            'width'            => '100',
                            'background_color' => '#fff',
                            'url'              => '#',
                        ],
                        'column_2' => [
                            'align'            => 'center',
                            'padding'          => [
                                'top'    => '10',
                                'right'  => '10',
                                'bottom' => '10',
                                'left'   => '50',
                            ],
                            'image'            => YAYMAIL_PLUGIN_URL . 'assets/images/default-photo.png',
                            'width'            => '100',
                            'background_color' => '#fff',
                            'url'              => '#',
                        ],
                        'column_3' => [
                            'align'            => 'center',
                            'padding'          => [
                                'top'    => '10',
                                'right'  => '10',
                                'bottom' => '10',
                                'left'   => '50',
                            ],
                            'image'            => YAYMAIL_PLUGIN_URL . 'assets/images/default-photo.png',
                            'width'            => '100',
                            'background_color' => '#fff',
                            'url'              => '#',
                        ],
                    ],
                ],
            ],
        ];
    }

Last updated

Was this helpful?