| 1 |
<?php |
| 2 |
/** |
| 3 |
* Plugin Name: Services Section |
| 4 |
* Description: Use Services Section Block to provide services of your business to clients with customizable settings. |
| 5 |
* Version: 1.1 |
| 6 |
* Author: bPlugins LLC |
| 7 |
* Author URI: http://bplugins.com |
| 8 |
* License: GPLv3 |
| 9 |
* License URI: https://www.gnu.org/licenses/gpl-2.0.txt |
| 10 |
* Text Domain: services-section |
| 11 |
*/ |
| 12 |
|
| 13 |
// ABS PATH |
| 14 |
if ( !defined( 'ABSPATH' ) ) { exit; } |
| 15 |
|
| 16 |
// Constant |
| 17 |
define( 'SSB_PLUGIN_VERSION', '1.1' ); |
| 18 |
define( 'SSB_ASSETS_DIR', plugin_dir_url( __FILE__ ) . 'assets/' ); |
| 19 |
|
| 20 |
// Register Block Category |
| 21 |
function ssb_block_categories( $categories ) { |
| 22 |
return array_merge( array( array( |
| 23 |
'slug' => 'ssb', |
| 24 |
'title' => __( 'Services Section', 'services-section' ), |
| 25 |
) ), $categories ); |
| 26 |
} |
| 27 |
if ( version_compare( $GLOBALS['wp_version'], '5.8-alpha-1', '<' ) ) { |
| 28 |
add_filter( 'block_categories', 'ssb_block_categories', 10, 2 ); |
| 29 |
} else { |
| 30 |
add_filter( 'block_categories_all', 'ssb_block_categories', 10, 2 ); |
| 31 |
} |
| 32 |
|
| 33 |
// Register Blocks |
| 34 |
function ssb_wp_register_script( $block, $options = array() ) { |
| 35 |
register_block_type( 'services-section/' . $block, |
| 36 |
array_merge( array( |
| 37 |
'editor_script' => 'ssb_editor_script', |
| 38 |
'editor_style' => 'ssb_editor_style', |
| 39 |
'script' => 'ssb_script', |
| 40 |
'style' => 'ssb_style', |
| 41 |
), $options ) |
| 42 |
); |
| 43 |
} |
| 44 |
|
| 45 |
// Enqueue assets |
| 46 |
function ssb_enqueue_block_assets() { |
| 47 |
wp_enqueue_script( 'font-awesome-kit', SSB_ASSETS_DIR . 'js/font-awesome-kit.js', array(), SSB_PLUGIN_VERSION, true ); |
| 48 |
} |
| 49 |
add_action( 'enqueue_block_assets', 'ssb_enqueue_block_assets' ); |
| 50 |
|
| 51 |
function ssb_register() { |
| 52 |
// Resister script in editor |
| 53 |
wp_register_script( 'ssb_editor_script', plugins_url( 'dist/editor.js', __FILE__ ), array( 'wp-blocks', 'wp-element', 'wp-data', 'wp-i18n', 'wp-editor', 'wp-components', 'wp-blob', 'wp-html-entities', 'wp-compose', 'wp-rich-text' ), null, false ); |
| 54 |
// Register style in editor |
| 55 |
wp_register_style( 'ssb_editor_style', plugins_url( 'dist/editor.css', __FILE__ ), array( 'wp-edit-blocks'), null ); |
| 56 |
|
| 57 |
// Register script in frontend |
| 58 |
wp_register_script( 'ssb_script', plugins_url( 'dist/script.js', __FILE__ ), array( 'jquery'), null, true ); |
| 59 |
// Register style in frontend |
| 60 |
wp_register_style( 'ssb_style', plugins_url( 'dist/style.css', __FILE__ ), array( 'wp-editor' ), null ); |
| 61 |
|
| 62 |
// Register Blocks |
| 63 |
ssb_wp_register_script( 'services', array( 'render_callback' => 'render_ssb_services' ) ); |
| 64 |
ssb_wp_register_script( 'service', array( 'render_callback' => 'render_ssb_service' ) ); |
| 65 |
|
| 66 |
wp_set_script_translations( 'ssb_editor_script', 'services-section', plugin_dir_path( __FILE__ ) . 'languages' ); |
| 67 |
} |
| 68 |
add_action( 'init', 'ssb_register' ); |
| 69 |
|
| 70 |
// Generate Styles |
| 71 |
class SSBStyleGenerator { |
| 72 |
public static $styles = []; |
| 73 |
public static function addStyle($selector, $styles){ |
| 74 |
if(array_key_exists($selector, self::$styles)){ |
| 75 |
self::$styles[$selector] = wp_parse_args(self::$styles[$selector], $styles); |
| 76 |
}else { |
| 77 |
self::$styles[$selector] = $styles; |
| 78 |
} |
| 79 |
} |
| 80 |
public static function renderStyle(){ |
| 81 |
$output = ''; |
| 82 |
foreach(self::$styles as $selector => $style){ |
| 83 |
$new = ''; |
| 84 |
foreach($style as $property => $value){ |
| 85 |
if($value == ''){ $new .= $property; }else { $new .= " $property: $value;"; } |
| 86 |
} |
| 87 |
$output .= "$selector { $new }"; |
| 88 |
} |
| 89 |
return $output; |
| 90 |
} |
| 91 |
} |
| 92 |
|
| 93 |
// Render Services |
| 94 |
function render_ssb_services($attributes, $content){ |
| 95 |
extract( $attributes ); |
| 96 |
|
| 97 |
$cId = $cId ?? ''; |
| 98 |
$columns = $columns ?? array( 'desktop' => 3, 'tablet' => 2, 'mobile' => 1 ); |
| 99 |
$columnGap = $columnGap ?? '30px'; |
| 100 |
$rowGap = $rowGap ?? '30px'; |
| 101 |
$textAlign = $textAlign ?? 'left'; |
| 102 |
$itemHeight = $itemHeight ?? '375px'; |
| 103 |
$itemPadding = $itemPadding ?? array('top' => '50px', 'right' => '30px', 'bottom' => '50px', 'left' => '50px'); |
| 104 |
$itemShadow = $itemShadow ?? array('blur' => '20px', 'color' => '#0000001a'); |
| 105 |
$itemBorder = $itemBorder ?? array('radius' => '15px'); |
| 106 |
$iconMargin = $iconMargin ?? array('bottom' => '30px'); |
| 107 |
$titleTypo = $titleTypo ?? array('fontSize' => 23); |
| 108 |
$titleMargin = $titleMargin ?? array('bottom' => '30px'); |
| 109 |
$descTypo = $descTypo ?? array('fontSize' => 16); |
| 110 |
|
| 111 |
// Generate Styles |
| 112 |
$servicesStyle = new SSBStyleGenerator(); |
| 113 |
$servicesStyle::addStyle("#ssbServices-$cId .ssbServices", array( |
| 114 |
'grid-gap' => "$rowGap $columnGap" |
| 115 |
)); |
| 116 |
$servicesStyle::addStyle("#ssbServices-$cId .ssbServices .ssbService", array( |
| 117 |
'text-align' => $textAlign, |
| 118 |
'min-height' => $itemHeight, |
| 119 |
'padding' => $itemPadding['styles'] ?? '50px 30px 50px 50px', |
| 120 |
'box-shadow' => $itemShadow['styles'] ?? '0 0 20px 0 #0000001a', |
| 121 |
$itemBorder['styles'] ?? 'border-radius: 15px;' => '' |
| 122 |
)); |
| 123 |
$servicesStyle::addStyle("#ssbServices-$cId .ssbServices .ssbService .bgLayer", array( |
| 124 |
'border-radius' => $itemBorder['radius'] ?? '15px' |
| 125 |
)); |
| 126 |
$servicesStyle::addStyle("#ssbServices-$cId .ssbServices .ssbService .icon", array( |
| 127 |
'margin' => $iconMargin['styles'] ?? '0 0 30px 0' |
| 128 |
)); |
| 129 |
$servicesStyle::addStyle("#ssbServices-$cId .ssbServices .ssbService .title", array( |
| 130 |
$titleTypo['styles'] ?? 'font-size: 23px' => '', |
| 131 |
'margin' => $titleMargin['styles'] ?? '0 0 30px 0' |
| 132 |
)); |
| 133 |
$servicesStyle::addStyle("#ssbServices-$cId .ssbServices .ssbService .description", array( |
| 134 |
$descTypo['styles'] ?? 'font-size: 16px' => '' |
| 135 |
)); |
| 136 |
|
| 137 |
$titleFontLink = $titleTypo['googleFontLink'] ?? ''; |
| 138 |
$descFontLink = $descTypo['googleFontLink'] ?? ''; |
| 139 |
|
| 140 |
ob_start(); // Echo the content |
| 141 |
echo "<div class='wp-block-services-section-services' id='ssbServices-$cId'> |
| 142 |
<style>@import url($titleFontLink); @import url($descFontLink);". $servicesStyle::renderStyle() ."</style> |
| 143 |
|
| 144 |
<div class='ssbServices columns-".$columns['desktop']." columns-tablet-".$columns['tablet']." columns-mobile-".$columns['mobile']."'>". $content ."</div> |
| 145 |
</div>"; |
| 146 |
|
| 147 |
$servicesStyle::$styles = array(); // Empty before blocks styles in after blocks |
| 148 |
return ob_get_clean(); |
| 149 |
} |
| 150 |
|
| 151 |
// Render Service |
| 152 |
function render_ssb_service( $attributes ) { |
| 153 |
extract( $attributes ); |
| 154 |
|
| 155 |
$cId = $cId ?? ''; |
| 156 |
$background = $background ?? array('type' => 'image', 'image' => array('url' => plugins_url( 'dist/src/img/service-pattern.png', __FILE__ )), 'overlayColor' => '#0000', 'position' => 'bottom left', 'size' => 'auto'); |
| 157 |
$isIcon = $isIcon ?? true; |
| 158 |
$isUpIcon = $isUpIcon ?? false; |
| 159 |
$icon = $icon ?? array('class' => 'fa fa-wordpress', 'fontSize' => 70); |
| 160 |
$upIcon = $upIcon ?? array('id' => NULL, 'url' => '', 'alt' => '', 'title' => ''); |
| 161 |
$iconWidth = $iconWidth ?? '70px'; |
| 162 |
$isTitle = $isTitle ?? true; |
| 163 |
$title = $title ?? 'Service title'; |
| 164 |
$titleColor = $titleColor ?? '#222'; |
| 165 |
$isDesc = $isDesc ?? true; |
| 166 |
$desc = $desc ?? 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus, fuga.'; |
| 167 |
$descColor = $descColor ?? '#333'; |
| 168 |
$isLink = $isLink ?? true; |
| 169 |
$link = $link ?? '#'; |
| 170 |
$linkBGColor = $linkBGColor ?? '#d2d2d2'; |
| 171 |
$linkBGHovColor = $linkBGHovColor ?? '#fe6601'; |
| 172 |
$linkIconColor = $linkIconColor ?? '#fff'; |
| 173 |
|
| 174 |
// Generate Styles |
| 175 |
$serviceStyle = new SSBStyleGenerator(); |
| 176 |
$serviceStyle::addStyle("#ssbService-$cId .ssbService .bgLayer", array( |
| 177 |
$background['styles'] ?? 'background-image: url('. plugins_url( 'dist/src/img/service-pattern.png', __FILE__ ) .'); background-position: bottom left; background-size: auto; background-repeat: no-repeat; background-color: #0000;' => '' |
| 178 |
)); |
| 179 |
$serviceStyle::addStyle("#ssbService-$cId .ssbService .icon i", array( |
| 180 |
$icon['styles'] ?? 'font-size: 70px;' => '' |
| 181 |
)); |
| 182 |
$serviceStyle::addStyle("#ssbService-$cId .ssbService .icon img", array( |
| 183 |
'width' => $iconWidth |
| 184 |
)); |
| 185 |
$serviceStyle::addStyle("#ssbService-$cId .ssbService .title", array( |
| 186 |
'color' => $titleColor |
| 187 |
)); |
| 188 |
$serviceStyle::addStyle("#ssbService-$cId .ssbService .description", array( |
| 189 |
'color' => $descColor |
| 190 |
)); |
| 191 |
$serviceStyle::addStyle("#ssbService-$cId .ssbService .link a", array( |
| 192 |
'background-color' => $linkBGColor |
| 193 |
)); |
| 194 |
$serviceStyle::addStyle("#ssbService-$cId:hover .ssbService .link a", array( |
| 195 |
'background-color' => $linkBGHovColor |
| 196 |
)); |
| 197 |
$serviceStyle::addStyle("#ssbService-$cId .ssbService .link a svg", array( |
| 198 |
'fill' => $linkIconColor |
| 199 |
)); |
| 200 |
|
| 201 |
// Components |
| 202 |
$iconLibEl = isset($icon['class']) ? "<i class='".$icon['class']."'></i>" : ''; |
| 203 |
$iconUpEl = isset($upIcon['url']) ? "<img src='".$upIcon['url']."' alt='".$upIcon['alt']."' />" : ''; |
| 204 |
$iconEl = $isUpIcon ? $iconUpEl : $iconLibEl; |
| 205 |
$iconWrapEl = $isIcon ? "<div class='icon'>$iconEl</div>" : ''; |
| 206 |
$titleEl = $isTitle ? "<h3 class='title'>$title</h3>" : ''; |
| 207 |
$descEl = $isDesc ? "<p class='description'>$desc</p>" : ''; |
| 208 |
$linkEl = $isLink ? "<div class='link'><a href='$link'> |
| 209 |
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 493.356 493.356'> |
| 210 |
<path d='M490.498,239.278l-109.632-99.929c-3.046-2.474-6.376-2.95-9.993-1.427c-3.613,1.525-5.427,4.283-5.427,8.282v63.954H9.136 c-2.666,0-4.856,0.855-6.567,2.568C0.859,214.438,0,216.628,0,219.292v54.816c0,2.663,0.855,4.853,2.568,6.563 c1.715,1.712,3.905,2.567,6.567,2.567h356.313v63.953c0,3.812,1.817,6.57,5.428,8.278c3.62,1.529,6.95,0.951,9.996-1.708 l109.632-101.077c1.903-1.902,2.852-4.182,2.852-6.849C493.356,243.367,492.401,241.181,490.498,239.278z' /> |
| 211 |
</svg> |
| 212 |
</a></div>" : ''; |
| 213 |
|
| 214 |
ob_start(); // Echo the content |
| 215 |
echo "<div class='wp-block-services-section-service' id='ssbService-$cId'> |
| 216 |
<style>". $serviceStyle::renderStyle() ."</style> |
| 217 |
|
| 218 |
<div class='ssbService wow flipInY animated animated' data-wow-delay='300ms' data-wow-duration='1500ms'> |
| 219 |
<div class='bgLayer'></div> |
| 220 |
$iconWrapEl $titleEl $descEl $linkEl |
| 221 |
</div> |
| 222 |
</div>"; |
| 223 |
|
| 224 |
$serviceStyle::$styles = array(); // Empty before blocks styles in after blocks |
| 225 |
return ob_get_clean(); |
| 226 |
} |
