Calin MANESCU

dar cu oblio e posibil? sau sunt perspective in viitor?

Thanks for warning me!

i rolled back to wp 5.9.3 and it works…
upgraded wp to 6.0 and it again no longer works…
upgraded to 6.0.1 and still doesnt work…
tried the same on a clean wp install with no plugins, and still doesnt work after wp 6.0…
so it`s a problem of compatibility with the new wp 6.0 version
hope my input helps.
thanks for your work… your plugin alone is what makes gutenberg easier to work

Here is a useful topic about the integration of CCP colors as variables system-wide https://www.ads-software.com/support/topic/create-css-color-variables-from-within-this-plugin/

Anyway, the best and simplest solution would be to put in GP customizer (as global colors) the variable colors declared in :root, but to enable them to be seen correctly in the picker and in the gutenberg editor, only for a better UX and convenience (as they are basically already working as desired).

Color system behaviour in GPress & GBlocks (Alpha Versions):
Variable colors declared in style.css of the child theme:
– can be applied to elements both from customizer and gutenberg page editor;
– in the customizer, my variable colors from style.css can be declared as Global Colors too (for example “global-color-1” can have my primary color from style.css if instead of hex color, i put “var(–primary) in the dedicated field when editing the respective global color;
– they work the same in both the customizer and editor, indifferently of being applied directly, using “var(–primary)” or indirectly, by declaring “var(primary)” as the “global-color-1” in the customizer
– in both the customizer and gutenberg editor, the variable colors are not rendered correctly in the picker circles; all variable colors from style.css are shown in picker as dark-grey;
– the same dark grey in customizer if i try to declare Stackable custom colors as global in customizer;
– the custom colors set in Stackable cannot be declared as Global Colors in customizer, but they are seen in the picker and applied correctly when coloring particular customizer elements (backgrounds, text etc);
– while working in gutenberg editor, the transformation applied with variable colors declared in style.css is not visible in real time in the editor, but the variable color is applied anyway, visible only when reloading the page from an incognito window.

Working with Central Color Palette plugin:
– it works: the colors of the circles in the picker are seen correctly and can be applied both in editor and customizer…
– but if the color is changed in CCP, the change does not reflect itself in the elements colored with the respective color…
– to apply a CCP color from the picker works, but to apply directly the “var” with the CCP color name doesnt work… probably the theme does not recognize the CCP colors names as variables… but the CCP colors are integrated with the picker when creating GP Global Colors from the GP customizer, so the colors created in the customizer from CCP colors are applied and updated correctly, updating everywhere any changes done in the CCP…

CCP worked best, but sadly, i cannot use it, because i want my color system to be with calculated values (as in my message above) : when i change the primary color, all other colors from the palette to be changed automatically to a new eye-pleasing palette, using programmed HSL values which respect golden ratio and other design rules… ??
For example, the secondary color should be complementary to primary (which can be quantified numerically in HSL) AND its saturation could be 1.618 higher or lower, to introduce a difference using Fibonacci number… the result will be mathematically, easy, automatically pleasing to the eye…

I think that implementing some ways to ease the application of such methods in GP would be a formidable selling proposition for all the designers, since no other theme or pagebuilder is able to do something like that now…

• This reply was modified 3 years, 2 months ago by Calin MANESCU.

Hi @edge22 !
I added this code (below) in the style.css of the blank/normal child theme (downloaded from your site), using 3.1 alpha GP theme.
Results:
– the colors can be added and work in the customizers Global Colors; if i insert, for example “var(–secondary)” in a new global color, it can be applied to the elements in the customizer… i tried with the site background and it worked!
– anyway, in the customizers picker, the color is not translated, it appears as a dark-grey circle for any variable color (but not a big problem, as it keeps the title in tooltip and it works anyway to be applied);
– in Stackable and GenerateBlocks, the variable colors inserted in the customizers Global Colors appear in the picker as the same dark-grey circle, but they do not work to be applied to blocks in gutenberg…

How the colors declared in the code fragment below could be added as default GP colors?
is there any code which could help?
or they will be better supported in the GP 3.1 final version?

Thanks!

:root {
	
/*** COLOR SYSTEM ***/
	
/* 
GLOBAL COLOR SETUP (HSL)
Set the global colors below using HSL variables.
*/
	
	--primary-h: 44;
	--primary-s: 98%;
	--primary-l: 50%;

	--secondary-h: calc(var(--primary-h) + 120);
	--secondary-s: 100%;
	--secondary-l: 63.3%;

	--accent-h: 54.5;
	--accent-s: 15.5%;
	--accent-l: 86.1%;

	--base-h: 357.2;
	--base-s: 70.5%;
	--base-l: 47.8%;

/* 
SHADING VARIABLES
If you want to adjust the generated shade variants, you can adjust the percentages here.
Higher percentages are lighter and lower are darker.
*/

	--ultra-light: 95%;
	--light: 85%;
	--dark: 25%;
	--ultra-dark: 10%;

/* 
GLOBAL COLOR VARIABLES
These are the variables you can use in styling. They don't need to be edited.
Future plans: Auto generate full complimentary, triadic, analogous, etc. color schemes.
*/

	--primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
	--primary-ultra-light: hsl(var(--primary-h), var(--primary-s), var(--ultra-light));
	--primary-light: hsl(var(--primary-h), var(--primary-s), var(--light));
	--primary-dark: hsl(var(--primary-h), var(--primary-s), var(--dark));
	--primary-ultra-dark: hsl(var(--primary-h), var(--primary-s), var(--ultra-dark));
	--primary-trans-80: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .8);
	--primary-trans-60: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .6);
	--primary-trans-40: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .4);
	--primary-trans-20: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .2);
	--primary-comp: hsl(calc(var(--primary-h) + 180), var(--primary-s), var(--primary-l));
	--secondary: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
	--secondary-ultra-light: hsl(var(--secondary-h), var(--secondary-s), var(--ultra-light));
	--secondary-light: hsl(var(--secondary-h), var(--secondary-s), var(--light));
	--secondary-dark: hsl(var(--secondary-h), var(--secondary-s), var(--dark));
	--secondary-ultra-dark: hsl(var(--secondary-h), var(--secondary-s), var(--ultra-dark));
	--secondary-trans-80: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .8);
	--secondary-trans-60: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .6);
	--secondary-trans-40: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .4);
	--secondary-trans-20: hsla(var(--secondary-h), var(--secondary-s), var(--secondary-l), .2);
	--secondary-comp: hsl(calc(var(--secondary-h) + 180), var(--secondary-s), var(--secondary-l));
	--accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
	--accent-ultra-light: hsl(var(--accent-h), var(--accent-s), var(--ultra-light));
	--accent-light: hsl(var(--accent-h), var(--accent-s), var(--light));
	--accent-dark: hsl(var(--accent-h), var(--accent-s), var(--dark));
	--accent-ultra-dark: hsl(var(--accent-h), var(--accent-s), var(--ultra-dark));
	--accent-trans-80: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .8);
	--accent-trans-60: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .6);
	--accent-trans-40: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .4);
	--accent-trans-20: hsla(var(--accent-h), var(--accent-s), var(--accent-l), .2);
	--accent-comp: hsl(calc(var(--accent-h) + 180), var(--accent-s), var(--accent-l));
	--base: hsl(var(--base-h), var(--base-s), var(--base-l));
	--base-ultra-light: hsl(var(--base-h), var(--base-s), var(--ultra-light));
	--base-light: hsl(var(--base-h), var(--base-s), var(--light));
	--base-dark: hsl(var(--base-h), var(--secondary-s), var(--dark));
	--base-ultra-dark: hsl(var(--base-h), var(--base-s), var(--ultra-dark));
	--base-trans-80: hsla(var(--base-h), var(--base-s), var(--base-l), .8);
	--base-trans-60: hsla(var(--base-h), var(--base-s), var(--base-l), .6);
	--base-trans-40: hsla(var(--base-h), var(--base-s), var(--base-l), .4);
	--base-trans-20: hsla(var(--base-h), var(--base-s), var(--base-l), .2);
	--base-comp: hsl(calc(var(--base-h) + 180), var(--base-s), var(--base-l));
	
/*** END COLOR SYSTEM ***/
}

It is an awesome developer child theme for GeneratePress, with a multitude of functions, which is a great help for someone without deep coding knowledge (like me): https://github.com/addisonhall/generatepress-child
Here is an overview: https://www.youtube.com/playlist?list=PL7raQfw3hl92x0ErLPA5hb-I-yHQQXFtt

If I put my colors in the file colors.php (inc/colors.php), they will appear in color pickers both in GP customizer and gutenberg.
I was able to put HSL colors in colors.php, instead of HEX.
And it worked! ??
My HSL colors replaced all default colors in the picker.
It worked only in GP 3.0.4 Version.
In 3.1 alpha it didnt replace the default colors, but there is no need, because in 3.1 the HSL colors can be inserted natively.
But i wasnt able to use HSL calculated values, probably because i dont have the coding knowledge to write the correct syntax to calculate secondary/complementary colors from the primary color.

Another solution i used is https://www.ads-software.com/plugins/kt-tinymce-color-grid/ which seems to work with 3.1 alpha too… but this plugin seems abandoned and it doesn’t offer the possibility to generate calculated color values…

After the GP version 3.1 will be released, Addison Hall will update his developer child theme too.

Until then, i will tinker with 3.1 alpha, to find a way to code the calculations to generate all the color palette only by changing the primary color, like in the video about Oxygen (from my first comment).

hello Tom!
I was able to replace a default color, using HSL, in GP Developer Child Theme (by Addison Hall)
In the file colors.php (inc/colors.php) i was able to replace and rename a grey color with “Light-Purple” in HSL code…
But i wasn’t able to use the “Light-purple” as variable color, as hue in the code bellow, in a new formula to define the new color “Dark Purple”…
Since i`m totally beginner in coding, probably is a syntax error on my part?
Or the theme doesn’t support calculated formulas for generating colors in code?

Here is the code (the two last colors are my attempts, light purple using simple HSL, dark purple trying to use a calculated value):

* ADD YOUR THEME COLORS HERE!
 * Array of theme colors will be added to WordPress
 */
$gpc_theme_colors = array(
    array(
		'name'  => __( 'White', 'generatepress-child' ),
		'slug'  => 'white',
		'color'	=> '#ffffff',
	),
	array(
		'name'  => __( 'Purple', 'generatepress-child' ),
		'slug'  => 'purple',
		'color'	=> '#8939cc',
	),
	array(
		'name'  => __( 'Black', 'generatepress-child' ),
		'slug'  => 'black',
		'color' => '#000000',
    ),
	array(
		'name'  => __( 'Light Purple', 'generatepress-child' ),
		'slug'  => 'light-purple',
		'color'	=> 'hsl(267, 81%, 90%)',
	),
	array(
		'name'  => __( 'Dark Purple', 'generatepress-child' ),
		'slug'  => 'dark-purple',
		'color' => 'hsl(var(--light-purple), 100%, 35%)',			
    ),
);

Now it works perfectly. I will test it thoroughly and if i discover any other bugs, i will keep you informed.
Your plugin is almost unique, crucially useful and lightweight. The whole community is grateful to you.
Thanks David!

It`s a great work, David! We thank you!
I discovered a small bug: when a plugin is completely removed from wordpress, if it was part of a group in Plugin Groups, the respective group still displays the number as it wasnt deleted and when i try to click on the group in Plugin Groups, the group no longer works (white screen).
It is a survivable bug though… I found a workaround, by deleting first the plugin from all the groups in the Plugin Groups. Only after that i remove it from wordpress.
Thanks!

exactly, bulk actions from the Plugin Groups, available in “Installed Plugins” wordpress section… no options to add/remove new groups appear there in the new version… it is an intended behaviour? or my installation have a bug?

it is no longer possible to create/delete groups from the dropdown in “Installed Plugins” wordpress page (as in 1.2 version)?
it was very easy to select for new groups the plugins active/inactive or part of another groups… it would be great to have such feature back…

thanks!
first, it happened in 2.0.1
then, i tried 2.0.0 and the error was the same

great! it looks very cool!
on some of my sites it works, but on other it didnt work…

this is the error:

Warning: include(/home4/domain/public_html/subdomain/wp-content/plugins/plugin-groups/js/.asset.php): failed to open stream: No such file or directory in /home4/domain/public_html/subdomain/wp-content/plugins/plugin-groups/classes/class-plugin-groups.php on line 660

Warning: include(): Failed opening '/home4/domain/public_html/subdomain/wp-content/plugins/plugin-groups/js/.asset.php' for inclusion (include_path='.:/opt/alt/php74/usr/share/pear') in /home4/domain/public_html/subdomain/wp-content/plugins/plugin-groups/classes/class-plugin-groups.php on line 660

Fatal error: Uncaught Error: Class 'Plugin_Groups\Utils' not found in /home4/domain/public_html/subdomain/wp-content/plugins/plugin-groups/classes/class-plugin-groups.php:439 Stack trace: #0 /home4/domain/public_html/subdomain/wp-content/plugins/plugin-groups/classes/class-plugin-groups.php(193): Plugin_Groups\Plugin_Groups->make_all_tag() #1 /home4/domain/public_html/subdomain/wp-includes/class-wp-hook.php(303): Plugin_Groups\Plugin_Groups->render_group_navigation(Array) #2 /home4/domain/public_html/subdomain/wp-includes/class-wp-hook.php(327): WP_Hook->apply_filters('', Array) #3 /home4/domain/public_html/subdomain/wp-includes/plugin.php(470): WP_Hook->do_action(Array) #4 /home4/domain/public_html/subdomain/wp-admin/plugins.php(757): do_action('pre_current_act...', Array) #5 {main} thrown in /home4/domain/public_html/subdomain/wp-content/plugins/plugin-groups/classes/class-plugin-groups.php on line 439

Yes, it would be great with support for Kadence. I use Kadence too…
Thanks Daniel, for all your effort!