maxi-blocks / maxi-blocks Goto Github PK

Should we prepare a background image component? Question referred on #16

Gutenberg API for doing NUX ( New User Experience )

https://developer.wordpress.org/block-editor/packages/packages-nux/

Need to implement it to the our plugin

Add options chooser for AlignmentControl

Adapt the existing code to become a full functionally component:

Values for margin, padding, border cannot be saved for some reason.

Problem

On some components, MiniSizeControl has not been implemented

Problem

Typography component is not ready for displaying 'text-shadow' setting.

Do the component work with an Object: would be able to reuse with any other topics and the code would be much cleaner.

Hello team,
working on ImageSettings components I've been experiencing some issues and finally seems they come from PanelColorSettings component. I'll explain here:

Problem

ImageSettings components works, as other does, with an object that is stringified and saved as string on props. Everything runs perfect, but each time I changed any option related with color, all the properties of the object returned to the last saved ones. For example, saved the block with the image with alignment 'left', changed to 'right', and after changed the background color: the alignment returns to 'left'.

What happens?

Seems like the scope of the PanelColorSettings is not catching the value send. Checking the object stringified, it gets to the component once and is not update, so it's returning the object always on its first schema.
The reason? I don't know. If you figure out why, please, let me know: I'll sleep better 😛

Solution

I create a cleaner solution for having a color component. I called it ColorControl, and also gives the opportunity to add an alpha value to the color.
Some of the advantages are:

1. Returns a RGBA value, so it can have Alpha value (opacity)
2. Can have GradientPicker component and activate it easily
3. Would be cleaner on the code

Some disadvantages are:

1. It would need to be implemented in all the existent components
2. Needs new styling CSS, may can be reused from the old component.

You'll find more on wiki

You'll find the prototype on my branch. I would appreciate your opinion, suggestions or comments in order to keep working on it.
Thanks for your time 😄

Problem

Box shadow doesn't allow gradients as a color

Solution

Disable gradient on BoxShadow component

Detected on Image Box Extra, but should be something to review in all the blocks:

Problem

Typography option is not showing an alignment option.

Solution

Add AlignmentControl and option on Typography

Problem

BoxShadow affects the <img> element, not the <figure>. So, if there's a element, this is not affected by the box-shadow

Image on backend:
On blue the <figure>
Caption is over the box-shadow

Image on frontend:
On black the <figure>
Caption is behind box-shadow

Should the box-shadow affect the image or the figure?

Should be re-usable, so can be a Button Component.
Also we have Button Blocks too.

Bugs and improvements:

• Bug: doesn't present style correctly
• Bug: in case it needs to load more than one font, just loads the first
• Bug: strange behavior on click reset
• Show the properties that each font have. I.e: if 'Montserrat' font just have 100, 200, 300 and 400 for font-weight, don't show all the options; just the ones that this font accepts

Is known that ImageSettings component has, at least, one known bug:

1. When changing any color of the options, rest of changes can dissapear
   Is related with #41 and needs its fix to move forward 👍

Problem

Background blend mode is not compatible with i.e.

Problem

Opacity is showing from 0 to 1 and should show from 0 to 100

Right now it's necessary to call for an init function to get and load from external the saved fonts on the block on the backend. Also, code is duplicate for both backend and frontend. I would like to do it automatically and without duplicating the code.
Done 80% of it, just need to finish some details

Anything you can do to make it more flexible. We will re-use it a lot.

Have an option to display the colors before the labels in typography component.

Adapt the existing code to become a full functionally component:

There are some minor fixes to consider on it:

• Should deliver a cleanear object: without max or sync properties, for example.
• Should deliver a better CSS with no class repeats.
• Delete block styles if the block is deleted
• Deliver linted, prefixed and minified CSS
• On Typography: gutenberg_scripts.js?ver=0.1:178 Uncaught DOMException: Failed to execute 'check' on 'FontFaceSet': Could not resolve '12px Default' as a font. at FontFamilyResolver.loadFonts (http://localhost/wp-content/plugins/gutenberg-extra-joshua-main/js/gutenberg_scripts.js?ver=0.1:178:47) at FontFamilyResolver.onLoadPage (http://localhost/wp-content/plugins/gutenberg-extra-joshua-main/js/gutenberg_scripts.js?ver=0.1:145:22) at new FontFamilyResolver (http://localhost/wp-content/plugins/gutenberg-extra-joshua-main/js/gutenberg_scripts.js?ver=0.1:23:14) at HTMLDocument.document.onreadystatechange (http://localhost/wp-content/plugins/gutenberg-extra-joshua-main/js/gutenberg_scripts.js?ver=0.1:217:9)

Getting
[16-Mar-2020 12:37:10 UTC] PHP Notice: Undefined property: stdClass::$unit in /home/elzadj/Work/WordPress/wp-content/plugins/gutenberg-extra/src/includes/classes/class-responsive-frontend-block-styles.php on line 52

in /gutenberg-extra/src/includes/classes/class-responsive-frontend-block-styles.php

Fix it please.

Problem

In case of 1+ instances of LinkedButton on the same post, link box dissapears

Mostly buttons, they added height: 30px to many of them.

On localhost, JS Fetch API has a fake fail for CORS. Can be fixed with chrome extension:
https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en

Anyway, it should have a second path in case fetch fails, and load the JSON with AJAX. Slower, but functional!

Problem

If alignment is selected, and margin is changed, alignment disappears. Related with CSS

Adding icon by CSS pseudo-elements as ::before or ::after on Typography component limits the possibility to change the icon assuming different situations. Is the case of the novel ExternalLink component, that is not able to have another icon. I suggest to enhance PopoverControl component in order to have an icon options 👍

Problem

On saving, border-style becomes 'solid' (as it should); but as there's no border-with, CSS puts a default one, creating a not desired border

Problem

On choosing custom size image, ImageCrop component loads a cropped image if it has been cropped before or it's cropped in another post/block. So the image can be just cropped once.
It means that, saving on the same image object creates a conflict: when is loaded in another block and select custom size, it retrieves that size. So, it will be modified in all the blocks.

Solution

The solution could be to save the image as a post meta, and not in the image object.

Adapt the existing code to become a full functionally component:

From Joshua: "Gutenberg doesn't match with the way Customizer loads the front as meta on the frontend, so I'll be implementing the native JS API FontFace for the GX Image Box, and ensuring with a polyfill that it would be able for all devices, even old ones. This API doesn't need installation or key, so it will be 100% integrate".

Problem

As loading a block, it's not showing the default Typography styles. It shows WP native styles

Please implement WordPress Internationalization functions to your code.

https://developer.wordpress.org/plugins/internationalization/

Block Internationalization https://developer.wordpress.org/block-editor/developers/internationalization/

Course 'WordPress Internationalization' from 2nd chapter, 497771_02_01_XR30_gettext.mp4

The text domain is going to be 'gutenberg-extra'

Sometimes it opens automatically when you choose a GX block.

To reproduce:
Open GX Image Box block, click on 'Style' tab, click on 'Title Typography' icon and then save the post. After, reload the page, and click on the block. The block opening the Popover.

Problem

On changing the value on FontLevel, Typography component values are not being changed, and they are not affected

Solution

Make FontLevel component able to modify Typography values

Problem

On Image Box Extra block, if setting the image on a side, ImageSettings components don't allow to decide where the image should go in terms of Y-axis

Solution

Add up&down option. May need a new component that substitute AlignmentControl that let have 5 positions: top, right, bottom, left and center.

Hello team,
in order to give default properties to elements subjected to Typography component, we need to face the next situation:

Problem

The script that is loading the fonts (as the rest of styles) is activate once is a change on some prop. It means that, in fonts case, if we put e.g. font-family: Roboto, Roboto font will be download from GFonts, but the property won't be added to the element until we do some change on the Typography control (as changing the size, for example).

Solution

As we have default settings, I thought a SCSS code that will take a global class that all the blocks should contain, and inside a reference to each of the different headings and paragraphs and other typo elements. Something like:

    .general-class-for-all-gx-blocks {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p {
            font-family: Roboto
        }
        ...etc
    }

Let me know your ideas and ways to implement it. BTW, you'll find that all wikis have been updated with new default settings for Typography component 👍

This is how it looks closed

This is how it looks opened

If needs options as target or rel:

(it says: open in a new tab)

Problem

If styling a block, the styles remain on the post even after deleting the block

Future improvements for Dimension Control:

• - Border radius should have another label under the numbers
  Unit should affect just one device, not all
• - Sometimes, on value input, the left 0 doesn't dissapear
• - Should check CSS conflicts with themes as WP core themes
• - Negative values

Problem

Custom CSS and custom class is not ready

• The GutenbergExtra Customizer tab is not loading sometimes
• Need to make the Customizer css priority higher

Problem

When displaying some measures like 'width' or 'height', if it's selected 'px', doesn't allow to go further than 100. It doesn't allow negative values too.

Solution

Make the component able to have this options