nk-crew / ghostkit Goto Github PK

1. Countdown

2. Additional style for default headings - Numbered

3. Table of Contents

4. Badge (inline block). The same as used in Changelog block

5. Customizer

6. Custom CSS

7. Bootstrap Grid

8. Button

9. Progress Bar

10. Icon Box

11. Counter

12. Tabs

13. Accordion

14. Alert

15. Carousel

16. Github Gist

17. Video

18. Testimonial

19. Changelog

20. Widgetized area

21. Google Maps

22. Pricing

23. Instagram

24. Twitter

25. News (We can use Visual Portfolio plugin, it is highly functional now)

26. Spacer (already added in Gutenberg core)

27. Team Members (Use simple images + text blocks and Grid)

28. Categories / Tags

Like in Yoast SEO:

Related topic: https://wordpress.org/support/topic/cant-insert-tab-titles/

In the same way as Tabs.

Related topic: https://wordpress.org/support/topic/suggested-option-to-scroll-to-opened-accordion-on-click/

Hello ghostkit team,
After the update i encountered an Error. The grid column content made with gk 2.3 can't be displayed.
Message: "This block has encountered an error and cannot be previewed."
There is also a message in the console:
in wp-content/plugins/ghostkit/gutenberg/index.min.js?ver=1558978561
react-dom.min.js?ver=16.6.3:104 TypeError: Cannot read property 'getBlockOrder' of undefined at index.min.js?ver=1558978561:62 at n (data.min.js?ver=4.2.1:1) at new r (data.min.js?ver=4.2.1:1) at zf (react-dom.min.js?ver=16.6.3:69) at Mf (react-dom.min.js?ver=16.6.3:87) at ph (react-dom.min.js?ver=16.6.3:98) at eg (react-dom.min.js?ver=16.6.3:125) at fg (react-dom.min.js?ver=16.6.3:126) at wc (react-dom.min.js?ver=16.6.3:138) at fa (react-dom.min.js?ver=16.6.3:137) Pf @ react-dom.min.js?ver=16.6.3:104
Did i forgot something?
Thanks in advance
Spencer

Hi nk-o,

This is a great plugin. Thank you for this huge work. I am trying to add some custom styles to the Grid block using the following code:

  wp.blocks.registerBlockStyle( 'ghostkit/grid', {
    name: 'slideshow-align-right',
    label: 'Align slide content right',
  } );

I see the tyles dropdown in the inspector but when I click on it, the editor crashes.

Default Gutenberg blocks now use Material Icons, so we also need to use it https://material.io/tools/icons/?style=outline

Would be great if there would be an option at grid row/section where the nested columns have a maximum width setting. Like section structure setting under Maximum Content Width" in Otter blocks... but better set only boxed content -> default container width or individual max content in px/%/vw . So there is no need to nest row/section blocks
Regards Spencer

For now creates a lot of additional attributes for extensions:

Current additional attributes:

{
	"ghostkitId": "Z1Jjxoc",
	"ghostkitClassname": "core-paragraph-Z1Jjxoc",
	"ghostkitStyles": {
		".core-paragraph-Z1Jjxoc": {
			"paddingTop": "20",
			"paddingBottom": "20",
			"marginLeft": "30",
			"marginRight": "30"
		}
	},
	"ghostkitSpacings": {
		"paddingTop": "20",
		"paddingBottom": "20",
		"marginLeft": "30",
		"marginRight": "30"
	},
	"ghostkitDisplay": {
		"all": "block",
		"md": "none"
	},
	"ghostkitSR": "fade-up"
}

Better structure:

{
	"ghostkit": {
		"id": "Z1Jjxoc",
		"className": "core-paragraph-Z1Jjxoc",
		"styles": {
			".core-paragraph-Z1Jjxoc": {
				"paddingTop": "20",
				"paddingBottom": "20",
				"marginLeft": "30",
				"marginRight": "30"
			}
		},
		"spacings": {
			"paddingTop": "20",
			"paddingBottom": "20",
			"marginLeft": "30",
			"marginRight": "30"
		},
		"display": {
			"all": "block",
			"md": "none"
		},
		"scrollReveal": "fade-up"
	}
}

Block code from example:

<!-- wp:paragraph {"ghostkitStyles":{".core-paragraph-Z1Jjxoc":{"paddingTop":"20","paddingBottom":"20","marginLeft":"30","marginRight":"30"}},"ghostkitClassname":"core-paragraph-Z1Jjxoc","ghostkitId":"Z1Jjxoc","ghostkitSpacings":{"paddingTop":"20","paddingBottom":"20","marginLeft":"30","marginRight":"30"},"ghostkitDisplay":{"all":"block","md":"none"},"ghostkitSR":"fade-up"} -->
<p class="core-paragraph-Z1Jjxoc ghostkit-d-block ghostkit-d-md-none" data-ghostkit-styles=".core-paragraph-Z1Jjxoc { padding-top: 20px; padding-bottom: 20px; margin-left: 30px; margin-right: 30px; }" data-ghostkit-sr="fade-up">Paragraph Test</p>
<!-- /wp:paragraph -->

Block in Editor:

Related topic: https://wordpress.org/support/topic/translating-tabs/

Templates:

• Predefined library of sections, by categories:
  • Hero
  • Features
  • Stats (Counters)
  • Call to Action
  • Clients
  • Contact
  • Pricing
  • Team
  • Testimonials
  • FAQ
• Predefined library of pages
• Custom sets, added in PHP by the theme / plugin authors

Features:

• Export / Import block templates
• Add exported blocks using PHP, so theme and plugin authors may use it
• Custom user templates library saved as custom post type with Featured image and category support
• Add check for blocks when adding templates (if some of the blocks doesn't exist - add a quick notice to the user)

Better to make visual grid builder without dropdowns and range sliders. Something like this one: http://shoelace.io/

1. 
2. Plugin example: https://ru.wordpress.org/plugins/gridable/

Twenty Nineteen:

1. Pricing Table block stacked in the editor

Use this octocat SVG https://octicons.github.com/icon/octoface/

When I try to use the carousel it says "Start writing/typing to choose a block". When I do, the only options are "Preformatted", "List", "Verse", "Heading" and "Quote". I would like to use images. I can not seem to figure out how to get that option.

Thanks in advance.

The plugin gives the following error in the editor. Seems like it happens when plugins using the create-guten-block toolkit are also activated.

react-dom.min.js?ver=16.6.3:104 TypeError: this.activateMode is not a function
    at media-views.min.js?ver=5.0.3:1
    at arrayEach (lodash.js?3387:516)
    at Function.forEach (lodash.js?3387:9344)
    at n._createModes (media-views.min.js?ver=5.0.3:1)
    at n.initialize (media-views.min.js?ver=5.0.3:1)
    at n.initialize (media-views.min.js?ver=5.0.3:1)
    at n.initialize (media-views.min.js?ver=5.0.3:1)
    at n.e.View (backbone.min.js?ver=1.2.3:1)
    at n.constructor (wp-backbone.min.js?ver=5.0.3:1)
    at n.constructor (media-views.min.js?ver=5.0.3:1)

Blocks

1. Accordion
   • + Button to add accordion block
2. Accordion item
   • - Button to remove block
   • Collapsed option in toolbar and inspector
3. Alert
   • Icon dropdown in block preview
4. Buttons
   • Icon dropdown in block preview
   • + Button to add button block
   • Gap option in Toolbar
5. Button
   • - Button to remove block
   • Icon dropdown in block preview
   • Size option in Toolbar
   • Icon Position option in icon picker dropdown
6. Number Box
   • Number Position option in Toolbar
7. Divider
   • Icon dropdown in block preview
   • Type option in Toolbar
8. Google Maps
   • Add Marker option in Toolbar
   • Style option in Toolbar
   • Better Style selector with image preview (probably from Snazzy Maps API)
   • Resize block height by dragging
9. Grid
   • Hide options from Inspector if no layout selected
   • Change predefined layouts to flex and css without any svg images
   • Gap option in Toolbar
10. Grid Column
    • Sticky option in Toolbar
11. Icon Box
    • Icon dropdown in block preview
    • Icon Position option in toolbar
12. Pricing Table
    • + Button to add pricing block
    • Gap option in Toolbar
13. Pricing Table Item
    • - Button to remove block
14. Progress
    • Resize indicator when block selected, so user will know that they may change
    • Show Count option in Toolbar
    • Striped option in Toolbarheight and width by dragging
15. Tabs
    • Align option in Toolbar
    • + Button to add tab
    • - Button to remove block
16. Testimonial
    • Icon dropdown in block preview
    • Image option in Toolbar
17. Video
    • Icon dropdown in block preview
    • Aspect Ratio image selector instead of selector
    • URL for YouTube/Vimeo option in Toolbar
    • Aspect Ratio option in Toolbar
    • Type option in Toolbar
    • Click Action option in Toolbar
    • Poster Image option in Toolbar

:active should work the same like :hover.

:focus should add box-shadow like on Bootstrap buttons:

• Typography options:
  • Family (Google Fonts + default fonts)
  • Style (Weight + Style)
  • Size
  • Line Height
  • Letter Spacing
• Default typography CSS selectors:
  • H1 - H6
  • Body
  • Buttons (Ghost Kit and core Gutenberg blocks)
• Change typography for a whole site
• Change typography on the current page
• Let theme authors extend typography options for their own CSS selectors

For now user may add only Custom CSS on the current page, need to add more freedom:

• Custom CSS & JS globally and on the current page
  • in <head> section
  • in the end of <body> tag

While trying to build ghostkit, I found that:

event-stream is a dependency of gulp-vinyl-zip

event-stream is no longer available after it was discovered that malware had slipped into it.

See https://blog.npmjs.org/post/180565383195/details-about-the-event-stream-incident
and dominictarr/event-stream#116

Thank for this awesome blocks, its a cool feature that there is only minimal styling options on the block editor side.
Sometimes it would be cool if the editor could adjust rendering tag for SEO or semantic reasons
Example: set accordion title to h2, h3, h4, h5, h6, p, span tag
What do you think?
Kind regards Spencer

Return this error on open new post or page

Uncaught TypeError: Cannot read property 'ghostkitStyles' of undefined at index.min.js?ver=1539144848:23 at Array.forEach (<anonymous>) at index.min.js?ver=1539144848:23 at hooks.min.js?ver=2.0.3:1 at Q (blocks.min.js?ver=6.0.3:2) at block-library.min.js?ver=2.2.9:12 at Array.forEach (<anonymous>) at no (block-library.min.js?ver=2.2.9:12) at Module.Jn (edit-post.min.js?ver=3.1.4:12) at HTMLDocument.<anonymous> (post-new.php?post_type=page:238)

When you trying to add block, the popup is just closed and "+" button never showed up again:

The API key is accepted and map loads correctly without a search query. When I try to enter a search query for either the map or for markers I get an error message that the map didn't load correctly.

Wordpress version: 5.2.1
GhostKit version: 2.4.2

Add effects on all blocks using https://github.com/scrollreveal/scrollreveal

Thanks for the nice (an quite unique blocks, like Instagram and Changelog!).

Would you be interested in providing your blocks on GutenbergCloud.org before it launches?

Docs are here: https://github.com/front/cloud-blocks/tree/master/docs Let me know if you are interested! Would love to help.

Already changed in AWB: nk-crew/awb@218bee2

Need to register block individually and separate styles and script for each block, so when the block will be disabled, assets will not be loaded on the frontend.

The same as in native Column block:

https://github.com/WordPress/gutenberg/blob/34d24ed9d98f738c682c20b500634d85319cd33c/packages/block-library/src/column/edit.js#L65-L71

Visual block spacing change. How it should look:

p.s. first, need to resolve this issue #13

Add these options under additional settings of URL input:

• Open in new tab
• Add nofollow

Hello,

First of all great plugin, keep up the good work!

I have a problem where the color of button is wrong when it has been :visited.
Usually this is in the hands of the stylesheet, but when using frameworks such as bootstrap, this is set in their css. I cannot overwrite the color without specifying it to a certain color, and it should be dynamic based on what is chosen in admin.

What I would suggest is :visited (and maybe :active) with the chosen color be added to the class of the button, what do you think?

https://wordpress.org/gutenberg/handbook/designers-developers/developers/filters/block-filters/#block-style-variations

Hi ,

this software has "GNU GENERAL PUBLIC LICENSE". That means: I can modify and use "Ghost-Kit" in my own project. I can add new functions or remove the "Go Pro" link?

Do you have any objections to this?

Best Regards
JQ

We can save the styles in post meta when post save button clicked.

For now blocks looks like this:

unable to disable block.
Return
Unhandled promise rejection : “failed to update disabled blocks”

Preview for Spacing extension available for Ghostkit blocks, but not for others.

We need to fetch options automatically on first block insertion or let the user know that he needs to open Appearance > Customize once.

In Gutenberg 4.7 will be added a new method updateCategory. Will work something like that:

import GhostKitIcon from './_icons/ghostkit-black.svg';

if ( wp.blocks.updateCategory ) {
	wp.blocks.updateCategory( 'ghostkit', { icon: GhostKitIcon } );
}