Plugin / Powerful Gutenberg Blocks and Templates – Ghost Kit

You can add templates in your theme, so users will be able to insert it on pages with a single click. This is a simple example of theme templates structure: wp-content/themes/YOUR_THEME/ghostkit/templates/ /first-template/ /content.php /thumbnail.png /second-template/ /content.php /thumbnail.png … content.php file content example: content thumbnail.png is not required, but strongly recommended, because users will see what template will look like after insertion.

By default Typography options used for Body, Headings, and Buttons. You can add custom options by extending typography using PHP filter: add_filter( 'gkt_custom_typography', 'my_gkt_custom_typography' ); function my_gkt_custom_typography( $custom_typography ) { // Add typography options for `.my-selector`. $custom_typography['my-selector'] = array( 'label' => esc_html__( 'My Selector', 'ghostkit' ), 'defaults' => array( 'font-family-category' => 'default', 'font-family' => '', 'font-size' => '', 'font-weight' => '', 'line-height' => '', 'letter-spacing' => '', ), 'output' => array( array( 'selectors' => '.my-selector', ), array( 'selectors' => '.editor-styles-wrapper .my-selector', 'editor' => true, ), ), ); // Add typography options for `.my-selector-2` with Font Size and Font Weight control only. $custom_typography['my-selector-2'] = array( 'label' => esc_html__( 'My Selector 2', 'ghostkit' ), 'defaults' => array( 'font-size' => '10px', 'font-weight' => '600', ), 'output' => array( array( 'selectors' => '.my-selector-2', ), array( 'selectors' => '.editor-styles-wrapper .my-selector-2', 'editor' => true, ), ), ); return $icons; }

By default icon picker contains FontAwesome icons. You can add any icons you want. First of all you need to enqueue these icons in editor and frontend pages to see it, then extend icon picker using PHP filter: // add icons list. add_filter( 'gkt_icons_list', 'my_gkt_icons' ); function my_gkt_icons( $icons ) { $icons['my-icons-pack'] = array( 'name' => 'My Icons', 'icons' => array( array( 'class' => 'fab fa-500px', 'keys' => '500px', ), array( 'class' => 'fab fa-500px', 'keys' => '500px', ), ... ), ); return $icons; } // add icons assets // will be automatically added in Editor and Frontend add_action( 'gkt_icons_enqueue_assets__my-icons-pack', 'my_gkt_icons_enqueue_assets' ); function my_gkt_icons_enqueue_assets( $icons ) { wp_register_script( 'my-icons-pack', plugins_url( '/assets/my-icons-pack/script.min.js', __FILE__ ), array(), '1.0.0' ); }

You should use default Gutenberg hooks to extend blocks functionality. Read more here: https://wordpress.org/gutenberg/handbook/designers-developers/developers/filters/block-filters/#block-style-variations

You can extend Gutenberg blocks save attributes using core hooks. Read more here: https://developer.wordpress.org/block-editor/developers/filters/block-filters/#blocks-getsavecontent-extraprops

On frontend there are a lot of jQuery events. Usage example: jQuery( document ).on( 'afterInitBlocks.ghostkit', function( evt, classObject ) { console.log( evt, classObject ); } ); Available events: beforeInit.ghostkit afterInit.ghostkit beforeInitBlocks.ghostkit afterInitBlocks.ghostkit beforePrepareCounters.ghostkit afterPrepareCounters.ghostkit beforeRunCounters.ghostkit afterRunCounters.ghostkit beforePrepareTabs.ghostkit afterPrepareTabs.ghostkit beforePrepareAccordions.ghostkit afterPrepareAccordions.ghostkit beforePrepareCarousels.ghostkit afterPrepareCarousels.ghostkit beforePrepareVideo.ghostkit afterPrepareVideo.ghostkit beforePrepareGist.ghostkit afterPrepareGist.ghostkit beforePrepareChangelog.ghostkit afterPrepareChangelog.ghostkit beforePrepareGoogleMaps.ghostkit beforePrepareGoogleMapsStart.ghostkit beforePrepareGoogleMapsEnd.ghostkit afterPrepareGoogleMaps.ghostkit beforePrepareSR.ghostkit beforePrepareSRStart.ghostkit beforeInitSR.ghostkit beforePrepareSREnd.ghostkit afterPrepareSR.ghostkit