$style ){ $new = ''; foreach( $style as $property => $value ){ if( $value == '' ){ $new .= $property; }else { $new .= " $property: $value;"; } } $output .= "$selector { $new }"; } return $output; } } // Services Section Block class ServicesSectionBlock{ protected static $_instance = null; function __construct(){ add_action( 'enqueue_block_assets', [$this, 'enqueue_block_assets'] ); add_action( 'init', [$this, 'register'] ); } public static function instance(){ if( self::$_instance === null ){ self::$_instance = new self(); } return self::$_instance; } function enqueue_block_assets(){ wp_enqueue_script( 'font-awesome-kit', SSB_ASSETS_DIR . 'js/font-awesome-kit.js', array(), SSB_PLUGIN_VERSION, true ); } function register_script( $block, $options = array() ){ register_block_type( 'services-section/' . $block, array_merge( array( 'editor_script' => 'ssb_editor_script', 'editor_style' => 'ssb_editor_style', 'script' => 'ssb_script', 'style' => 'ssb_style', ), $options ) ); } // Register Script function register(){ wp_register_script( 'ssb_editor_script', plugins_url( 'dist/editor.js', __FILE__ ), array( 'wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-html-entities', 'wp-i18n', 'wp-rich-text' ), SSB_PLUGIN_VERSION, false ); // Backend Script wp_register_style( 'ssb_editor_style', plugins_url( 'dist/editor.css', __FILE__ ), array( 'wp-edit-blocks' ), SSB_PLUGIN_VERSION ); // Backend Style wp_register_script( 'ssb_script', plugins_url( 'dist/script.js', __FILE__ ), array( 'jquery' ), SSB_PLUGIN_VERSION, true ); // Frontend Script wp_register_style( 'ssb_style', plugins_url( 'dist/style.css', __FILE__ ), array( 'wp-editor' ), SSB_PLUGIN_VERSION ); // Frontend Style $this->register_script( 'services', array( 'render_callback' => [$this, 'render_services'] ) ); $this->register_script( 'service', array( 'render_callback' => [$this, 'render_service'] ) ); wp_set_script_translations( 'ssb_editor_script', 'services-section', plugin_dir_path( __FILE__ ) . 'languages' ); // Translate } // Register function render_services( $attributes, $content ){ extract( $attributes ); $align = $align ?? ''; $cId = $cId ?? ''; $layout = $layout ?? 'default'; $columns = $columns ?? array( 'desktop' => 3, 'tablet' => 2, 'mobile' => 1 ); $columnGap = $columnGap ?? '30px'; $rowGap = $rowGap ?? '30px'; $background = $background ?? '#0000'; $textAlign = $textAlign ?? 'left'; $itemHeight = $itemHeight ?? '375px'; $itemPadding = $itemPadding ?? array( 'top' => '50px', 'right' => '30px', 'bottom' => '50px', 'left' => '50px' ); $itemShadow = $itemShadow ?? array( 'blur' => '20px', 'color' => '#0000001a' ); $itemBorder = $itemBorder ?? array( 'radius' => '15px' ); $iconPadding = $iconPadding ?? array( 'bottom' => '10px' ); $iconMargin = $iconMargin ?? array( 'bottom' => '20px' ); $titleTypo = $titleTypo ?? array( 'fontSize' => 23 ); $titleMargin = $titleMargin ?? array( 'bottom' => '30px' ); $descTypo = $descTypo ?? array( 'fontSize' => 16 ); $servicesStyle = new SSBStyleGenerator(); // Generate Styles $servicesStyle::addStyle( "#ssbServices-$cId .ssbServices", array( 'grid-gap' => "$rowGap $columnGap", $background['styles'] ?? 'background-color: #0000;' => '' ) ); $servicesStyle::addStyle( "#ssbServices-$cId .ssbServices .ssbService", array( 'text-align' => $textAlign, 'min-height' => $itemHeight, 'padding' => $itemPadding['styles'] ?? '50px 30px 50px 50px', 'box-shadow' => $itemShadow['styles'] ?? '0 0 20px 0 #0000001a', $itemBorder['styles'] ?? 'border-radius: 15px;' => '' ) ); $servicesStyle::addStyle( "#ssbServices-$cId .ssbServices .ssbService .bgLayer", array( 'border-radius' => $itemBorder['radius'] ?? '15px' ) ); $servicesStyle::addStyle( "#ssbServices-$cId .ssbServices .ssbService .icon", array( 'padding' => $iconPadding['styles'] ?? '0 0 10px 0', 'margin' => $iconMargin['styles'] ?? '0 0 20px 0' ) ); $servicesStyle::addStyle( "#ssbServices-$cId .ssbServices .ssbService .title", array( $titleTypo['styles'] ?? 'font-size: 23px' => '', 'margin' => $titleMargin['styles'] ?? '0 0 30px 0' ) ); $servicesStyle::addStyle( "#ssbServices-$cId .ssbServices .ssbService .description", array( $descTypo['styles'] ?? 'font-size: 16px' => '' ) ); $titleFontLink = $titleTypo['googleFontLink'] ?? ''; $descFontLink = $descTypo['googleFontLink'] ?? ''; return "
$content
"; $servicesStyle::$styles = array(); // Empty styles } // Render Services function render_service( $attributes ){ extract( $attributes ); $cId = $cId ?? ''; $background = $background ?? array( 'color' => '#0000' ); $hoverBG = $hoverBG ?? array( 'type' => 'image', 'image' => array( 'url' => plugins_url( 'dist/src/img/service-pattern.png', __FILE__ ) ), 'overlayColor' => '#0000', 'position' => 'bottom left', 'size' => 'auto' ); $isIcon = $isIcon ?? true; $isUpIcon = $isUpIcon ?? false; $icon = $icon ?? array( 'class' => 'fa fa-wordpress', 'fontSize' => 70 ); $upIcon = $upIcon ?? array( 'id' => NULL, 'url' => '', 'alt' => '', 'title' => '' ); $iconWidth = $iconWidth ?? '70px'; $iconBorder = $iconBorder ?? array(); $isTitle = $isTitle ?? true; $title = $title ?? 'Service title'; $titleColor = $titleColor ?? '#222'; $isDesc = $isDesc ?? true; $desc = $desc ?? 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus, fuga.'; $descColor = $descColor ?? '#333'; $isLink = $isLink ?? true; $link = $link ?? '#'; $linkIn = $linkIn ?? 'button'; $linkIconColor = $linkIconColor ?? '#fff'; $linkBGColor = $linkBGColor ?? '#d2d2d2'; $linkBGHovColor = $linkBGHovColor ?? '#fe6601'; $serviceStyle = new SSBStyleGenerator(); // Generate Styles $serviceStyle::addStyle( "#ssbService-$cId .ssbService", array( $background['styles'] ?? 'background-color: #0000;' => '' ) ); $serviceStyle::addStyle( "#ssbService-$cId .ssbService .bgLayer", array( $hoverBG['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;' => '' ) ); $serviceStyle::addStyle( "#ssbService-$cId .ssbService .icon", array( $iconBorder['styles'] ?? '' => '' ) ); $serviceStyle::addStyle( "#ssbService-$cId .ssbService .icon i", array( $icon['styles'] ?? 'font-size: 70px;' => '' ) ); $serviceStyle::addStyle( "#ssbService-$cId .ssbService .icon img", array( 'width' => $iconWidth ) ); $serviceStyle::addStyle( "#ssbService-$cId .ssbService .title", array( 'color' => $titleColor ) ); $serviceStyle::addStyle( "#ssbService-$cId .ssbService .description", array( 'color' => $descColor ) ); $serviceStyle::addStyle( "#ssbService-$cId .ssbService .link a", array( 'background-color' => $linkBGColor ) ); $serviceStyle::addStyle( "#ssbService-$cId:hover .ssbService .link a", array( 'background-color' => $linkBGHovColor ) ); $serviceStyle::addStyle( "#ssbService-$cId .ssbService .link a svg", array( 'fill' => $linkIconColor ) ); ob_start(); ?>
" : ''; ?>
" : '' ) : ( isset($icon['class'] ) ? "" : '' ); ?>

". wp_kses_post( $title ) ."

" : "

". wp_kses_post( $title ) ."

") : ''; ?> ". wp_kses_post( $desc ) ."

" : ''; ?>
" : ''; ?>