You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
0c33094de9 | 7 months ago | |
---|---|---|
.. | ||
README.md | 7 months ago | |
arch.php | 7 months ago | |
bean.php | 7 months ago | |
blades.php | 7 months ago | |
caret.php | 7 months ago | |
chevrons.php | 7 months ago | |
corner-blob.php | 7 months ago | |
corner-lake.php | 7 months ago | |
corner-paint.php | 7 months ago | |
corner-pill.php | 7 months ago | |
corner-square.php | 7 months ago | |
diagonal-bars-2.php | 7 months ago | |
diagonal-bars.php | 7 months ago | |
diagonal-pills.php | 7 months ago | |
diagonal.php | 7 months ago | |
ellipse.php | 7 months ago | |
floating-squares.php | 7 months ago | |
honeycomb.php | 7 months ago | |
layer-blob.php | 7 months ago | |
paint.php | 7 months ago | |
rock-stack.php | 7 months ago | |
square-stripes.php | 7 months ago | |
triangles.php | 7 months ago | |
wave.php | 7 months ago |
README.md
Adding New Mask Style
To add new Mask style in the Divi Builder follow the Actions Items.
Action Items
- Copy Mask Template (see bellow).
- Replace
NAME
, all theET_Builder_Mask_NAME
in the template (3 places). - Replace
TITLE
in the template (2 places). - Replace
PRIORITY
in the template, lower number will make it show-up early in Mask Style Dropdown list in the VB. - Save in a new file, e.g:
some-name.php
, in this folder, add/commit to the repository.
Tip:
- For
NAME
, if it's multiple words likeDiagonal Lines
, use_
to join, e.gDiagonal_Lines
. - For
filename
, if it's multiple words likeDiagonal Lines
, use-
to join and make it lower case, e.gdiagonal-lines.php
. - Once new
filename.php
placed in this folder, the new mask would automatically appear in the VB (just refresh). landscape
,portrait
andsquare
should only contain all tags inside the<svg></svg>
file, e.g:
'landscape' => '<path d="M28,28H56V56H28ZM0,0H28V28H0Z"/>',
Regular Mask Template:
<?php
/**
* Background Mask Style - TITLE.
*
* @package Divi
* @sub-package Builder
* @since ??
*/
if ( ! defined( 'ABSPATH' ) ) {
die( 'Direct access forbidden.' );
}
/**
* Class ET_Builder_Mask_NAME
*
* @since ??
*/
class ET_Builder_Mask_NAME extends ET_Builder_Background_Mask_Style_Base {
/**
* Configuration.
*
* @return array
*/
public function settings() {
return array(
'label' => esc_html__( 'TITLE', 'et-builder' ),
'svgContent' => array(
'default' => array(
'landscape' => '',
'portrait' => '',
'square' => '',
),
'default-inverted' => array(
'landscape' => '',
'portrait' => '',
'square' => '',
),
'rotated' => array(
'landscape' => '',
'portrait' => '',
'square' => '',
),
'rotated-inverted' => array(
'landscape' => '',
'portrait' => '',
'square' => '',
),
),
// Replace following PRIORITY with number (1-9) and uncomment to make it on top 9 list.
// phpcs:ignore Squiz.PHP.CommentedOutCode.Found -- temporary comment.
// 'priority' => PRIORITY,
);
}
}
return new ET_Builder_Mask_NAME();
Extended Mask Template:
We're using following default viewBox
settings for all masks (Code Ref).
/**
* Default viewBox settings for Mask.
*
* @return string[]
*/
public function view_box_settings() {
return array(
'landscape' => '0 0 1920 1440',
'portrait' => '0 0 1920 2560',
'square' => '0 0 1920 1920',
'thumbnail' => '0 0 1920 1440',
);
}
Also, we're using svgContent of square
to show as thumbnail
to display in Dropdown Style list in the VB.
In case a mask need any custom value for viewBox and/or custom thumbnail, can be done like following:
<?php
/**
* Background Mask Style - TITLE.
*
* @package Divi
* @sub-package Builder
* @since ??
*/
if ( ! defined( 'ABSPATH' ) ) {
die( 'Direct access forbidden.' );
}
/**
* Class ET_Builder_Mask_NAME
*
* @since ??
*/
class ET_Builder_Mask_NAME extends ET_Builder_Background_Mask_Style_Base {
/**
* Configuration.
*
* @return array
*/
public function settings() {
return array(
'label' => esc_html__( 'TITLE', 'et-builder' ),
'svgContent' => array(
'default' => array(
'landscape' => '',
'portrait' => '',
'square' => '',
),
'default-inverted' => array(
'landscape' => '',
'portrait' => '',
'square' => '',
),
'rotated' => array(
'landscape' => '',
'portrait' => '',
'square' => '',
),
'rotated-inverted' => array(
'landscape' => '',
'portrait' => '',
'square' => '',
),
// Following is optional, uncomment it if don't want to reuse landscape value.
// 'thumbnail' => '',
),
// Replace following PRIORITY with number (1-9) and uncomment to make it on top 9 list.
// phpcs:ignore Squiz.PHP.CommentedOutCode.Found -- temporary comment.
// 'priority' => PRIORITY,
// Following is optional, remove any number of them if you want to reuse global settings.
'viewBox' => array(
'landscape' => '0 0 1920 1440',
'portrait' => '0 0 1920 2560',
'square' => '0 0 1920 1920',
'thumbnail' => '0 0 1920 1440',
),
);
}
}
return new ET_Builder_Mask_NAME();
The Code works as following:
- Look for
viewBox
value from mask file, if not exists, global settings are used. - Look for
thumbnail
value fromsvgContent
array from mask file, if not exists,square
value is used.
Last Updated: Feb 10, 2022.