Redesign Smaily block component #30
Conversation
The block component has an issue that the source code is not editable. This can be resolved only by implementing a new component with source code available for manipulation. This allows further improvements to the component and fixing bugs and providing new features is a much simpler task.
|
@kaittodesk ready for the first test run. I have some improvements to make but it should be compatible with previous functionality right now. So... to get started you should run Currently blocking question is if the block should be usable also in case the user hasn't validated their credentials. I will give you also a general overview. The block-building flow is similar, you can find it in the block editor when searching for smaily or by scrolling
I have changed the Blocks UI logic - the user sees the preview in the block editor and settings in the settings panel. The previous iteration didn't provide a preview in the editor. You could only see the form "live".
Settings are separated into two categories - visible and hidden. The visible category is open by default, hidden fields are more "advanced" and should be manipulated only for advanced usage.
Visible fields no longer provide an option to select a "title". This can be done in the editor by just introducing a title block above the form. Also, the form is relatively simple and minimal. This allows the building of UI elements around the form itself. This allows adding pictures or other visual elements to catch the attention of possible subscribers. Also, the success and error messages are unified into two states where the user can define messages. The same logic is applied for labels so that users don't have to install a third-party plugin to translate values into their preferred language.
The advanced form options allow selecting the autoresponder and success/error URLs. These default URLs (not specified) no longer redirect back to the webpage root but to the same page on which the block is on. I think this is a better approach. |
| title: __( 'Smaily Sign-Up Form', 'smaily' ), | ||
| description: __( 'Smaily newsletter subscription form.', 'smaily' ), |
There was a problem hiding this comment.
Might need a name improvement here:
There was a problem hiding this comment.
Maybe Opt-in subscribers directly to Smaily for seamless email marketing.
The block component has an issue that the source code is not editable. This can be resolved only by implementing a new component with source code available for manipulation. This allows further improvements to the component and fixing bugs and providing new features is a much simpler task.