presscustomizr / nimble-builder Goto Github PK

Can you reproduce it?

I might have missed something to build.

let me know.

The easiest way to reproduce this is using TwentySeventeen and st:

• in Homepage Settings -> Your homepage displays select A static page
• Select as Homepage a page A, select as Posts page a page B
• in Theme options, make sure that one of your Front Page Section N Content is page B

Even if this is an edge case, the one above is the default starting configuration of TwentySeventeen on a fresh install.

Featured page model defined here : https://github.com/presscustomizr/nimble-builder/blob/master/inc/sektions/_dev_php/3_0_0_sektions_register_modules_after_setup_theme_50.php#L405

Template to be created here : https://github.com/presscustomizr/nimble-builder/blob/master/tmpl/modules/featured_pages_module_tmpl.php

Spec

• the input tmpl should be composed one textarea input type
• the fmk input type name is html_editor, and will be added in this file assets/czr/sek/js/_dev_control/_7_0_sektions_add_inputs_to_api.js
• use the wp.codeEditor.initialize() see wp-admin/js/customize-control.js#5270, to turn this textarea into an editor
• sanitization on save and output validation => see how the wp hmlt widget does it.

What I did to create this issue:

1. I set a margin of 10px to a sektion and I published the change, and exited the customizer
2. I accessed the customizer again and re-set that margin to nothing and published the change.

Here's what I got:

With 2017 theme on a default page (About), the loop_end section is misplaced and too small, both in the preview and in front:
https://imgur.com/a/DFX1rF2

Maybe the .sektion-wrapper should have the clear:both?

There are issues with your plugin code.

Please read this ENTIRE email, address all listed issues, and reply to this email with your corrected code attached (or linked). It is required for you to read and reply to these emails, and failure to do so will result in significant delays with your plugin being accepted.

Remember in addition to code quality, security and functionality, we require all plugins adhere to our guidelines. If you have not yet, please read them:

• https://developer.wordpress.org/plugins/wordpress-org/detailed-plugin-guidelines/

You will not be able to submit another plugin while this one is being reviewed, so please read the email carefully. We know it can be long, but you must follow the directions at the end as not doing so will result in your review being delayed.

Generic function (and/or define) names

All plugins must have unique function names, namespaces, defines, and classnames. This prevents your plugin from conflicting with other plugins or themes. We need you to update your plugin to use more unique and distinct names.

A good way to do this is with a prefix. For example, if your plugin is called "Easy Custom Post Types" then you could use names like these:

function ecpt_save_post()
define( ‘ECPT_LICENSE’, true );
class ECPT_Admin{}
namespace EasyCustomPostTypes;

Don't try to use two letter slugs anymore. We have over 60 THOUSAND plugins on WordPress.org alone, you’re going to run into conflicts.

Similarly, don't use __ (double underscores), wp_ , or _ (single underscore) as a prefix. Those are reserved for WordPress itself. You can use them inside your classes, but not as stand-alone function.

Remember: Good names are unique and distinct. This will help you and the next person in debugging, as well as prevent conflicts.

Some examples from your plugin:

function sek_display_min_php_message()
namespace czr_fn;
function Flat_Skop_Base

---

Please make sure you've addressed ALL issues brought up in this email.

When you've corrected your code, REPLY to this email with the updated code attached as a zip, or provide a link to the new code for us to review. If you use gmail, you won’t be able to send a ZIP file if it contains any JS files (yes, we know it’s stupid, blame Google).

Already started here : https://github.com/presscustomizr/nimble-builder/blob/master/inc/sektions/_dev_php/8_0_0_sektions_front_class_construct.php#L38

Specs classic ajax request

• the prototype could be loaded from the functions
• should display a button on loop_start in the preview
• clicking on the button should
• fetch the image
• insert it in the media library
• return a json_success with the attachment id and url
• display a success/ failure alert with the image id + url

Specs rest api image insertion

• try to implement the image insertion using this approach : https://github.com/youknowriad/dropit/blob/master/scripts/sidebar/components/photo/index.js#L47

Sorry for the bad title.

How to reproduce it:

1. Open a whatever level settings editor
2. Click on a spacing property input to change: e.g. padding-top
3. you'll see the element refreshing in the preview, even if you really didn't change anything
4. write a number in the property input box (or use the "steppers")
5. you'll see the element refreshing in the preview WITHOUT the padding-top you set correctly applied
6. now click (focus) on a different spacing property input, e.g. padding-bottom
7. you'll see the element refreshing in the preview WITHOUT the padding-top you set applied

you can do this back and forth

Can you reproduce this issue?

How to reproduce this:

1. Go to the Text Editor Font Style tab
2. Set the "Font size in pixels" to 22
3. Save and publish
4. Reload the customizer
5. Go to the Text Editor Font Style tab
6. You'll see the "Font size in pixels" showing the default value

Is it something you can reproduce on your end? (maybe you already fixed it)

Because it aligns the "children" of the element to which we apply this option.
E.g. normally, if we don't change the height option, of a module, using the vertical alignment option won't produce any difference.

I'm not sure the reason of this addition :D
Also because its alteration is not totally possible with the margin/padding options.

Why do we have this?

Take a look at the screenshot:

It's a column with an image placeholder, then with the red background you can see a nested sektion of two columns.
Do we really want this kind of mixed vertical alignment? Meaning, you can see that the right/left edges of the top image (column with orange background) are not aligned with the left edge of the first column text (yellow background) and the right edge of the second column image (blue background).

1. The nested sektion should reset its parent column padding
2. The nested sektion .sek-sektion-inner should not have a right/left padding of 15px (I'm not sure about this padding overall, see: #24 )

Here's the screenshot with the 1) and 2) applied

CSS:

[data-sek-is-nested="true"] .sek-container-fluid, 
[data-sek-is-nested="true"] .sek-sektion-inner {
    padding-right: 0;
    padding-left: 0;
}

What do you think?

The question is : what is the most convenient format to use for the icon list ?
The solution should take into account the ease of initial creation and maintenance of such a list.

In an ideal world, the best solution would be to use a raw css file downloded from fontawesome.com, which would be parsed by a smart php ajax callback to produce a js parsable json sent to the customizer.

@eri-trabiccolo let's discuss that tomorrow.

This issue happens as soon as you have a featured page set.

Hi Nico,
I'm not sure about opening the nimble module picker on mouse click in the preview.
If I'm not already in the nimble builder and I want to customize something else, e.g. the theme otpions, I would be pretty pissed off of being brought to the module picker every time I click in the preview, e.g.

• I want to select a text
• I want to navigate the site
• I want to use a form, hence I have to click on an input field to focus it and then on the submit.
• Even clicking on the partial refresh button would open the module picker before opening the actual set of options tied to the partial

Is it normal that when I click on a text module pencil the editor doesn't automatically open anymore?! I have to click on the Edit button.

Users should be able to easily create full width / boxed sections

• Hide in Destkops
• Hide in Tablets
• Hide in Smartphones

This can be pretty convenient

requested for Featured Pages in Customizr-Pro here:
https://secure.helpscout.net/conversation/609640293/163835?folderId=607541

follow up of https://github.com/presscustomizr/advanced-customizer/issues/6

laptops and desktops => The column width is controlled by a default set of css classes expressed in percentages.
For example for a 5 columns structure, the class could be : sek-col-20 { width : 20% }
for a 7 columns, this would be sek-col-14 { width:14.285%}

below 768px => width is 100%

How and where to generate the scss ?
grunt tasks inspired from the boostrap ( auto prefixer )
create a folder with a set of scss files in sektions/assets/front/scss
the generated css should be named sektions/assets/front/sek-main.css

Next step
SCSS / CSS
1- Generate a sek-base.css with the grid system + other things in the future
2- Keep sek-main.css as it is

HTML MARKUP
adapt the front end ::render() markup with the new class names https://github.com/eri-trabiccolo/advanced-customizer/blob/custom-grid/inc/sektions/_dev_php/8_4_0_sektions_front_class_render.php

investigate the content filtering...

• [JS] add the js input_type to the api.czrInputMap in a specific file in assets\czr\sek\js\_dev_control\inputs\
• [PHP] add the input_type case in the switch statement in inc\sektions\_dev_php\input_tmpl\3_0_1_sek_input_tmpl_base_filter.php
• [PHP] add the input_type callback in a file in inc\sektions\_dev_php\input_tmpl\
• [Grunt] add the new php and js files to the concat task in __grunt-tasks-config__\concat.js

Notes

@eri-trabiccolo If you need to add a new type of params to an input tmpl when registrating the module ( for example the code_type, you'll need to declare this new param here https://github.com/presscustomizr/czr-base-fmk/blob/master/_dev_php/0_3_czr-base-fmk-tmpl_builder.php#L14.

Can you reproduce this?

Not sure whether or not we want to add this setting in the nimble, but I discovered it recently and I think can be useful, what do you think?
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip

I'm mostly talking about
border-box
padding-box
content-box

values.

solution possible add overflow hidden to the wrapper

or

.sek-wp-content-wrapper:after {
content: '';
display: block;
clear: both;
}

• we need to create a video_upload input type, inspired from our current upload_* types
• add the input type methods in a specific file. Like assets/czr/sek/js/_dev_control/_7_0_sektions_add_inputs_to_api.js
• the video core WP widget does it well => let's implement the same, without the title field
• the front end rendering, could be based on what the core wp widget does
  

Would provide better approach for this type of cases this https://github.com/presscustomizr/nimble-builder/pull/40/files#diff-4b409507f268341ee89e1b75bba57bdeR85
The module css selector would be declared on php registration

fontawesome,
slider,
magnify popup,
...

How to reproduce this.

1. Add an image module ( you'll see the two selects rightly populated )
2. click on the module gear icon to access the module settings
3. click on the pencil icon to access the module content editor again

You'll see:
a) The selects not populated anymore
b) that inputs which should be hidden because they depend on the state of another input are now visible.

Adding a new modules requires to modify several files in the code.

General idea

1. register a module in php => the registered params will be used both when customizing and on front end
2. register a module in js => to motorize the ui when customizing
3. create a php template file => for the rendering on front and when customizing

Files to add / modify as of June 2018

• inc/sektions/_dev_php/module_registration/4_0_0_sek_register_modules_after_setup_theme_50.php => this is where we declare the php functions in charge of loading the modules registration params + the module is registered
• inc/sektions/_dev_php/module_registration/front/4_1_0_sek_register_{module_name}.php => the file in which the registration callback has to be declared.
• assets/czr/sek/js/_dev_control/modules/front/_9_1_9_FRONT_{module_name}.js => the file where the customizer module can be registered to the api.czrModuleMap
• inc/sektions/_dev_php/input_tmpl/3_0_1_sek_input_tmpl_module_picker.php => this is where we add new modules so they are draggable when customizing
• tmpl/modules/{module_name}_tmpl.php => this is where all modules rendering php templates are located. Used both on front end when customizing and when published. The template path is declared as a param when registering the module in php.
• __grunt-tasks-config__/concat.js => the concatenated files have to be updated with the newly added files

When the module needs specific localized params, like a list of options for a select input for example, or a translation string :

• inc/sektions/_dev_php/1_0_0_sektions_customizer_assets.php => can be used to register localized params for the modules

Example

The heading module => 8a90aca

Step to reproduce

1. move a column from one section to a target section
2. Try to resize a column of the target section

The idea is to create an end point allowing to us to fetch this option by providing as query param

• the skope id

the prototype should only print a button, and attach a click event on it to generate js alert() with the options.