What is Gutenberg, and what will bring to the table. Should we Support it or Unsupport it. Why it is important to decide before the 5.0 Wordpress Release.

1. WordPress Beirut 16th Meetup - September
7:00 - Mingle/Networking/coffee/Hello
7:10 - Intro
7:15 - How Gutenberg will Change WordPress
8:00 - Break
8:15 - WordPress Performance
9:00 - Closing
fb.com/wpbeirut
wpbeirut.org
WhatsApp Group

2. Ali Basheer @alibasheer
WordPress Developer
At Strategies dC

3. How did you heard about the
meetup
● Previous WP Meetup
● Facebook
● Friend
● WordPress admin widget

4. WordPress Beirut
● Contribution
● Every 1st Tuesday/Month
● Started July 2017
● One of 600 WP Meetups

6. Arabic community
status:
● Lebanon
○ active since June 2017
● Egypt
○ active since January 2018
● Jordan
○ 1 meetup on February 2016
● UAE
○ 1 meetup on Aug 2014

7. do_action Beirut
July 2017
● Volunteering to build
website for NGOs
● In 1 day
● 30+ volunteer
● 3 websites created
● We will announce new one
soon

8. do_action Beirut 2018
Saturday 20th of October
8:00am to 8:00pm
● Saida or Beirut
● Co-organizers and Volunteers:
○ Ghassan Hashem
○ Hiyam Matar
○ Rani Barbir
○ Mohamed Farhat
● NGOs
● Event day volunteers

9. You can Help:
● Speak at meetup (45min)
○ No level of experience
○ Your Story with WP
○ SEO topic
○ Business & Freelance
○ Content & branding
● Suggest ideas/topics
● Spread the word
● Start a meetup

10. Gutenberg
Johannes Gutenberg

11. Fadi Zahhar
Modern Full-
Stack Developer

12. Softwares claims
WYSIWYG in 90’s
● Fireworks
● Dreamweaver
● Flash
● Front Page
WYSIWYG

13. Wordpress
WYSIWYG
● Is it a true WYSIWYG!
WYSIWYG

14. Wordpress
WYSIWYG
● It is another lie!
● We can call it what you
see is why you get
without the header, or
footer or sidebar or any
option in the theme only
content… bla bla bla.
WYSIWYG

15. Wordpress is old
15 Years ago.
● Used for old screens
● Today, we have Laptops,
Tablets, Mobile, VR
WYSIWYG

16. Purpose
● Provide users with a
more modern toolset
● Allowing for greater
freedom
Aims
● To transform the core
content editing system
Is Not
● Looking to make the
entirety of wordpress into
a drag-and-drop builder.
Purpose, Aims and what is not
Gutenberg

17. Blocks and Embeds
● The new blocks contain many of
the old favorites when it comes
to content: text, images,
galleries, hero images,
corresponding service embeds,
and more. In addition, new
blocks can be easily created,
allowing developers to give
clients highly customized
building blocks for their own
site.
Blocks and Embeds
Developers would previously have been required to create any
page-specific templates, but these can now be created by most
users.

18. Possibilities
Imagine defining a whole page
template as a set of default
blocks, ready to be filled once
the user creates a page. (Matias
Ventura)
You can feed in a template of
wordpress.
Contextual Enhancements
Yoast is trying to put notifications into blocks and tell you
if they are good for SEO or not.

19. Possibilities
Gutenberg aims to give
developers a way to define and
protect structural markup and
their design while giving users
the ability to directly edit the
information intuitively. (Matias
Ventura)
You can feed in a template of
wordpress.
Be your own builder
https://wordpress.org/gutenberg/files/2018/07/Insert-
Block-2-1.gif
https://wordpress.org/gutenberg/files/2018/08/Builder.gi
f

20. Possibilities
● Layout Selector
● Repeatable Block
● The web won’t be a rectanglar
screen, in the future will be in all
view, and then possible VR.
Gutenberg have the possibility
for that, since it is a block
concept.

21. Warning for WP 5.0
● Metaboxes won’t be the same
● Which plugins need updating for
Gutenberg?
○ Custom post types
○ Complex metaboxes
○ Shortcodes
○ Editor featuers
How to Prepare Your Plugins for
WordPress Gutenberg
Simple metaboxes should
work with Gutenberg out of
the box, although they will be
displayed differently.
However, if you have
complex Metaboxes such as
the one in the Yoast SEO
plugin, then you'll have to test
it against Gutenberg and
maybe create a new one just
for Gutenberg.

22. Support or do not
support this is the
question!
● Support Gutenberg
● Disable Gutenberg
Two approaches no third.
Supporting Gutenberg
would mean that we will put
extra effort into refactoring
our code (maybe even
duplicating some) so that
our plugin users won't have
any difficulty using it..

23. Disabling
Gutenberg
● Completely
● Per Post Type
How to Disable Gutenberg
We can disable Gutenberg
completely or only where
our plugin is being used. In
this section, I will take my
own plugin "Simple
Giveaways" that has a
custom post type and also
metaboxes.

24. Disabling
Gutenberg
● Completely
<?php
add_filter(
'gutenberg_can_edit_post_type',
'__return_false' );
Disabling Gutenberg Completely
This is something I would
not recommend doing
from your plugin. Instead,
you might want to inform
your plugin users with an
admin notice that your
plugin doesn't work with
Gutenberg so that they can
revert back to the Classic
Editor.
Reverting can be done by
installing the plugin Classic
Editor.
This filter can be found in the function
gutenberg_can_edit_post_type which is
used to check if Gutenberg can be
loaded on that particular post type. If
we always return false, then it means
that we won't support Gutenberg at all.

25. Disabling
Gutenberg
● Per Post Type
<?php
$args = array(
'label' => __( 'Simple Giveaways',
'giveasap' ),
'labels' => $labels,
'supports' => array(
'title',
//'editor', Disabling Gutenberg
'thumbnail',
),
'hierarchical' => false,
// ...
);
register_post_type( 'giveasap', $args );
Disabling Gutenberg per Post Type
If your plugin has a custom
post type, then you may
want to disable Gutenberg
for that particular post
type. To disable Gutenberg
for your custom post type,
you can just change your
post type configuration.
Maybe you need the editor but you don't
need it in the REST API? Gutenberg
won't load if you don't support the REST
API. Similarly to the above example, we
will do that in the post type
configuration.
<?php
$args = array(
'label' => __( 'Simple
Giveaways', 'giveasap' ),
// ...
'show_in_rest' => false, //
Disable Gutenberg
// ...
);
register_post_type( 'giveasap',

26. Disabling
Gutenberg
● Per Post Type
<?php
add_filter(
'gutenberg_can_edit_post_type',
function( $can_edit, $post_type ){
if ( $can_edit && 'giveasap' ===
$post_type ) {
return false;
}
return $can_edit;
}, 20, 2 );
Disabling Gutenberg per Post Type
We can use the previously
mentioned filter to disable
Gutenberg only for our
custom post type.
With this code, we are checking if we are on our custom post type. If
we are, then just return false. This won't affect any other post types.

27. Disabling
Gutenberg
● With Metaboxes
<?php
add_meta_box(
'giveasap_users',
__( 'Users', 'giveasap' ),
'giveasap_metabox_users',
array( 'giveasap' ),
'side',
'high',
array(
// Not Compatible. Disable
Gutenberg.
'__block_editor_compatible_meta_box'
=> false,
)
);
Disabling Gutenberg With Metaboxes
If you have complex
metaboxes, maybe it would
take too long for you to
create a version of your
plugin that could support
Gutenberg. If that's the
case, you can disable
Gutenberg until you have
something that works with
Gutenberg.

28. Support Gutenberg
● What is Static Block
● What is Dynamic Block
● Demo in writing gutenberg Block
● Introduction video:
https://www.youtube.com/watc
h?v=yXBTE2hBnII
● Demo Repository:
https://github.com/wpbeirut/Un
derstanding_Gutenberg_Plugin
How to Support Gutenberg
Work on making new
blocks for your shortcodes
and even widgets.
Create Static and dynamic
blocks.

29. Questions?

30. Thank You.