lightspeedwp / lsx-blocks-old Goto Github PK

Description
We need to bring the LSX Testimonial plugin functionality in to a block, this block should show only of the LSX Testimonials plugins is on and will have the same options as the former testimonial widget.

To Do
Add a block for the "LSX Testimonials" post type extension.

The Block should do the following

• Check if the LSX testimonials plugin is on.
• Enqueue files for the block only is the LSX Testimonials is on.
• Create a block that brings the testimonial custom post type in list.
• Add a Title option Deprecated
• Add an option for this title to be a link. Deprecated
• Add a tagline option. Deprecated
• Add columns options (1 to 6 columns)
• Add order and order by options.
• Add option to limit the amount of testimonials.
• Add option to show just specific testimonials (ID).
• Add an option to display the excerpt (enabled by default).
• Add an option to add a View All button at the bottom that leaves to the testimonial archive page. Deprecated
• Add option to disable testimonial image.
• Add option to convert grid to carousel.

Front End design

• One Column

• Two column with Carousel

• Three column with Excerpt

Concatenations inside a loop generate a lot of temporary variables. They are accumulated and tend to raise the memory usage, leading to slower performances.

https://github.com/lightspeeddevelopment/lsx-blocks/blob/44257c42a2462a74b8275b6ae64a830ff6e7e1d6/src/blocks/block-post-carousel/index.php#L43

Describe the issue

When using a Button block in setting up a page in a back-end, hover effect does not work even when all settings are correctly filled in.

To Reproduce

• Go to https://nextlevelcycling.feedmybeta.com/wp-admin/edit.php?post_type=page
• Create a new page, or edit some exiting page (in my case it was Home page.
• Add a Button block.
• Configure every colour setting.
• Save and test the hover effect in a frontend.

The Problem
The LSX Container block has a basic background option, this does not allow to do advanced things like change the position of the background or change the background image on Tablet/Mobile.

The solution
Add more options to the Container block, that will make it more flexible on mobile and tablets.

To do

• Add options for adding a different background image on mobile.
• Add options for adding a different background image on tablet.
• Add options for adding a different background position on mobile.
• Add options for adding a different background position on tablet.
• The image uploader and settings for these options will only show if the option is turned on.
• This improvements should be created deprecating old content so the block has compatibility with older block versions.

call_user_func_array() expects parameter 1 to be a valid callback, class 'lsx\blocks\classes\Core' does not have a method 'load_plugin_textdomain'

Is your enhancement related to a problem? Please describe.

The page banner is now working as expected, but it lacks the option to control the height of the banner, which can be useful for images that are not that tall, and for controlling the layout in general like the cover block does.

Describe the solution you'd like

Please add an additional option if the page banner image or background color is enabled, to control the min height of the banner.

Designs

Problem
The default headings block is too simple for most of our sites, we need more advanced options to customize the headings (spacing, font size, underlining, etc)

Solution
Extend the core Headings Block adding options that allows to customize the heading further.

To Do

• Create the extended block structure.
• Add options for changing font size.
• Add options for changing spacing.
• Add options for enabling the lsx-title style (underline).
• Add option for small subtext

What a customized title should look like
This is how a heading can look like with all the customization options enabled:

Description
Create a new block that is part of the Health Plan section, that brings a list of featured Tips in a carousel.

To Do

• Create the main files for the Featured Tips block, following the blocks folder structure.
• The block will call a list of Featured Tips from the Health Plan plugin.
• Add a title option (by default is Featured Tips)
• Each item of the carousel should show the Tip title
• Each item of the carousel should show the Tip description
• Each item of the carousel should show the Tip image attached
• This block will only be available if the Health Plan plugin is active.

Final design

Is your enhancement related to a problem? Please describe.

The FAQ block has several styling issues that need to be improved

Describe the solution you'd like

• Fix general padding, it needs to be consistent.
• The plus and minus icons should be on the right
• The accordion summary should have hover state
• The accordion summary should have a background color change when its opened
• The mouse pointer should change on hover to indicate things are clickable
• The content of the accordion should be in a lighter color and inside a box when is toggled

Describe the issue

IF you have no sub-heading content extra div should be gone.
We using LSX Hero Block now for most sites as the banner go to. We don't always add in a button or sub-title content, but it still adds the DIVS in code with some margin/padding on them which causes un-even height on banners. I would suggest we either hide those divs or just remove styling if nothing is present.

To Reproduce

• Go to a new page with gutenberg and LSX blocks
• Create a new Hero block
• Add just a background image
• Go to the front and inspect, see how the empty divs for title and button are showing on the markup.

Screenshot

Expected behavior
The card blocks needs padding options between the image and the rest of the content, this way it will be more flexible, if there is an icon instead of a full image showing.
I will need to add padding for each component of the content part, this way, the padding will only appear if the content is there, and it won't make that area so tall and empty

To do

• Add padding options to the sidebar of the card blocks (4 items, top, bottom, lef, right)
• Make sure the improvement is compatible with old block versions deprecating code.

Screenshots
Difference between a card with an image and a card with an icon

Describe the bug

The page title option from the block editor settings is not showing on frontend

Steps to Reproduce

1. Go to a page with the block editor
2. Click on page editor right sidebar page title option and enable it
3. Set any configuration you want (Alignment, width, color, etc)
4. Go to the front of the page you are applying this option and see the title is not showing as expected

Expected behavior

The page title should show in the frontend with any options you picked from the editor.

Screenshots

Environment information

• Device: All of them
• OS: All of them
• Browser and version: All of them
• WordPress version: 5.5

Description
Create a new block that is part of the Health Plan section, that brings a list of featured Recipes in a carousel.

To Do

• Create the main files for the Featured Recipes block, following the blocks folder structure.
• The block will call a list of Featured Recipes from the Health Plan plugin.
• Add a title option (by default is Featured Recipes)
• Each item of the carousel should show the Tip title
• Each item of the carousel should show the Tip description
• Each item of the carousel should show the Tip image attached
• Each item should have a button that links to the recipe
• This block will only be available if the Health Plan plugin is active.

Final design

Description
Create a new block that is part of the Health Plan section, that brings a list of weeks.

To Do

• Create the main files for the Weekly plan grid block, following the blocks folder structure.
• The block will call a list of weeks from the Health Plan plugin.
• Each should show the list of days linking to each day.
• If the weekly download option is enabled on the LSX Health Plan plugin options, it should show the downloads for each week.
• This block will only be available if the Health Plan plugin is active.

Final design

Is your enhancement related to a problem? Please describe.

There are a lot of core blocks that come with WordPress by default that are not really being use, we need to deregister them.

Describe the solution you'd like

Deregister the following core blocks:

Formatting blocks to remove:

• core/preformatted
• core/code
• core/pullquote
• core/verse

Widget blocks to remove

• core/archives
• core/latest-comments

All Embed blocks can be deregistered:

• core-embed/soundcloud
• core-embed/spotify
• core-embed/flickr
• core-embed/vimeo
• core-embed/animoto
• core-embed/cloudup
• core-embed/collegehumor
• core-embed/dailymotion
• core-embed/funnyordie
• core-embed/hulu
• core-embed/imgur
• core-embed/issuu
• core-embed/kickstarter
• core-embed/meetup-com
• core-embed/mixcloud
• core-embed/photobucket
• core-embed/polldaddy
• core-embed/reddit
• core-embed/reverbnation
• core-embed/screencast
• core-embed/scribd
• core-embed/slideshare
• core-embed/smugmug
• core-embed/speaker
• core-embed/ted
• core-embed/tumblr
• core-embed/videopress
• core-embed/wordpress-tv

Additional context

See this documentation:

• https://wpdevelopment.courses/articles/a-list-of-all-default-gutenberg-blocks-in-wordpress-5-0/
• https://www.billerickson.net/gutenberg-tips-for-success#remove-core-blocks

Add the "let", "const" or "var" keyword to this declaration of "slick" to make it explicit.

let and const was introduced in ECMAScript 2015, and are now the preferred keywords for variable declaration.

https://github.com/lightspeeddevelopment/lsx-blocks/blob/44257c42a2462a74b8275b6ae64a830ff6e7e1d6/bin/cardheight.js#L1

Description

Extend the Blockquote core block to have a block style that applies all LSX styles to it.

Expected behavior
The Blockquote core block should look like an LSX blockquote out of the box.

Description
We need to bring the LSX Team plugin functionality in to a block, this block should show only of the LSX Team plugins is on and will have the same options as the former Team widget.

To Do
Add a block for the "LSX Team" post type extension.

The Block should do the following

• Check if the LSX Team plugin is on.
• Enqueue files for the block only is the LSX Team is on.
• Create a block that brings the Team custom post type in list.
• Add a Title option deprecated
• Add an option for this title to be a link. deprecated
• Add a tagline option. deprecated
• Add an option to display team members within a specific role.
• Add columns options (1 to 6 columns)
• Add order and order by options.
• Add option to limit the amount of Team.
• Add option to show just specific Team (ID).
• Add an option to display the excerpt (enabled by default).
• Disable the option to Link to Single profile.
• Disable the option to show team member social links, job title and role.
• Add an option to add a View All button at the bottom that leaves to the Team archive page. deprecated
• Add option to disable Team image.
• Add option to convert grid to carousel.

Front End design

Problem
We can not add featured posts in a grid using the Grid Post block or the Carousel Post Block.

Solution
Add support for "post tags", this will enable us to create a posts carousel or posts grid displaying all posts from "featured" tag. This can be achieved now, there is a tag JSON url, but we cannot have categories and tags in 1 field, they will be separate.

To do

• Add an option to the Grid Post block to filter content by post tags
• Add an option to the Carousel Post block to filter content by post tags
• The design should remain the same.
• Make sure the improvements are compatible with the old blocks by deprecating content.
• Add background color options.
• Add option for carousel.

CHALLENGE: Adding subheadings is time-consuming

• When doing block editor content management, adding subheadings can be time-consuming.
• We have used subtitles for many years and we always use a standard approach for styling them, this became evident when creating Heading and Subheading sections.
• The space surrounding heading and subheading needs to balance with other elements.
• We need to decide how the LightSpeed team should handle subheadings going forward, specifically around styling and HTML tags.

CURRENT SOLUTION: Manually format a paragraph block for each subheading

• When adding a new heading + subheading, Do not put "lsx-title" class on the H2 or H3 title.
• Next step is to add a Paragraph block for the subheading and apply the "lsx-title" class to the paragraph text below the title.
• Set the paragraph text to Large font size, which is font size 36
• The "lsx-title" class fixes the formatting of the subhead text, without the class the line height is insufficient and text overlaps with it breaks to a second line.

PROPOSED SOLUTION: Add a Subheading Block Style for Paragraph Block

Requirements:

• Define a method for setting subhead size consistently within the block editor.
• Distinguish subheads from the heading and body copy.
• Headings and Subheadings need breathing room, make sure we define clear padding rules between the two blocks.

Styling Considerations:

• Typeface
• Size
• Weight
• Style
• Colour

Solution:

• The Subheading block that used to be in core used the HTML

  tag.

• We could create a subheading block style for the paragraph block and this will solve the issue.

Additional Considerations:

• HTML Heading tags (H1, H2, etc) denote content hierarchy to search engines.
• h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.
• Using the right tag to markup the subhead is important, because otherwise search engine may not properly categorise the page.

Designs:

Problem
The card block should have a link option for the Title of the card, this gives more accessibility to the content.

To Do
Adding Link Functionality to Title of Card in LSX Card Block

• Check if there is a link enabled on the button of the card.
• Enable an option to make the title also a link based on this url.
• This options should be enabled by default.
• Make sure this improvement is compatible with the block older version by deprecating code.

Context

Description
Create a new block that is part of the Health Plan section, that brings a list of featured workouts in a carousel.

To Do

• Create the main files for the Featured Workouts block, following the blocks folder structure.
• The block will call a list of Featured workouts from the Health Plan plugin.
• Add a title option (by default is Featured Workouts)
• Each item of the carousel should show the workout title
• Each item of the carousel should show the workout description
• Each item of the carousel should show the workout video or image attached
• This block will only be available if the Health Plan plugin is active.

Final design

Describe the bug

Currently list view on the LSX Team Block has a few issues:

• Doesn't inherit Group Block Colors for Text and Background
• Avatar has a set background - And no option to change it
• Job Title is sitting on the left and should be under the name
• Currently no options to change heading color for Team Members

Steps to Reproduce

1. Add a Group Block
2. Add LSX Team Block inside of that
3. Change Group Block colors
4. See error

Expected behavior

Inherit group block colors
No Background for Avatar / Content Wrapper unless set
Color Options for

Screenshots

Current Color Settings in Back-end

Result in Front-end

To Do
We often need to do a carousel of images or cards with links on the images, how would we add this to our LSX Blocks plugin?

• Adding a carousel option to card blocks.

The problem
We often need to do a carousel of images or cards with links on the images, so we need a new block similar to the card block but with more options to have a series of images on a carousel, with a title and a description.

To do

• Create a new block called Card Carousel
• Create a basic structure where we have a container with an image, then a title and then a description.
• The image section must allow multiple images in a gallery.
• Add the option to have a link
• Make sure the dalery look good on mobile
• Change the dots to arrows on smaller screens

Design

Issue Description

On the Verloor Jou Boep dev site homepage - https://verloorjouboep.feedmybeta.com/ - we need the title on the first section to have a heavy font weight and the rest normal font weights. Currently it the desktop block is working, but because we serve a different block on mobile we are unable to style the mobile block the way we need to.

To do this you could simply add a span element with the styling associated. Currently the Hero Block doesn't allow any html edits to its content. Doing so results in the block breaking.

Verloor Jou Boep Homepage Desktop Design for Hero Block

Verloor Jou Boep Homepage Desktop Dev Site for Hero Block

Verloor Jou Boep Homepage Mobile Design for Hero Block

Verloor Jou Boep Homepage Mobile Dev Site for Hero Block

This is where span needs to be added in HTML View

Describe the bug
When adding a LSX Post Grid block on the https://tour-operator-demo.lsdev.biz/ on the homepage. The following error occurs:

TypeError: Cannot read property 'map' of null
    at Mn (https://tour-operator-demo.lsdev.biz/wp-includes/js/dist/components.min.js:21:285336)
    at je (https://tour-operator-demo.lsdev.biz/wp-includes/js/dist/vendor/react-dom.min.js:78:476)
    at qe (https://tour-operator-demo.lsdev.biz/wp-includes/js/dist/vendor/react-dom.min.js:89:115)
    at ph (https://tour-operator-demo.lsdev.biz/wp-includes/js/dist/vendor/react-dom.min.js:216:489)
    at lh (https://tour-operator-demo.lsdev.biz/wp-includes/js/dist/vendor/react-dom.min.js:126:409)
    at O (https://tour-operator-demo.lsdev.biz/wp-includes/js/dist/vendor/react-dom.min.js:121:71)
    at ze (https://tour-operator-demo.lsdev.biz/wp-includes/js/dist/vendor/react-dom.min.js:118:14)
    at https://tour-operator-demo.lsdev.biz/wp-includes/js/dist/vendor/react-dom.min.js:53:49
    at unstable_runWithPriority (https://tour-operator-demo.lsdev.biz/wp-includes/js/dist/vendor/react.min.js:26:340)
    at Ma (https://tour-operator-demo.lsdev.biz/wp-includes/js/dist/vendor/react-dom.min.js:52:280)

Expected behaviour
Adding Either block should be fine and not crash the page.

Screenshots

Is your enhancement related to a problem? Please describe.

Currently on the https://hoodlinked.feedmybeta.com/ site we have a top-level page that pulls in content from its sub-pages. So for example Where to Stay would have guest houses and hotels etc.

The top-level page pulls in blog posts but its currently only able to select 1 category. We need it to be able to select different categories.

Describe the solution you'd like

• It would be great to be able to select multiple categories instead of just 1.
• This can be done with a simple checkbox method like the WC Blocks

Screenshot

Extend the button block to accept all LSX styles

• Currently the buttons dont have the correct "pushed in" style when clicked
• We need settings in the back end for the drop shadow colour
• We need settings in the back end for the border colour

Solution

• When a button is "pushed in", the drop shadow should disappear like on the 1st column of the example link - https://gutenberg.feedmybeta.com/lsx-blocks-2/lsx-button/
• Please add the settings in the backend for dropshadow and border colour

We've been noticing that the post grid block has been adding the sizes="(max-width: 400px) 50vw, 10vw" attribute and this is causing the images to get pixelated. If that is removed the images display fine. I've had a look in the code but can't see how its being added.

You can see this currently here: https://menswear.feedmybeta.com/

Description
Create Health Plan Blocks block category inside the LSX Blocks that will only display with the LSX HP plugin active, this section will have all the plugins related to the LSX Health Plan plugin.

To do

• Require the LSX Health Plan Plugin first, so all the blocks related to HP Plan will show.
• Create a new block section just for HP blocks.

New Block sections should look like this

Call the following blocks inside this category:

• Featured Workouts videos block -> #29
• FAQs block (this is a new post type coming)
• Featured Tips block -> #30
• Featured recipes block -> #31
• Weekly plan grid view block -> #32
• Daily plan grid view block - > #33

Is your enhancement related to a problem? Please describe.

The cover block is starting to be used as we now use the lsx container block. It has almost all the same functionality and the advantage that is maintained by the WordPress team.
But it needs an important setting that the Container block has:

• An inner width that can be set if you need it (for example if you want to limit the width of a text inside a cover)

Describe the solution you'd like

• Add a setting to add an optional max width to the cover inner content.

Example

This text is inside a container that has a background that has all the width of the most outer wrapper but has a limit of 676px for the inner content:

Describe the bug

When adding or editing a post grid block, the ajax never returns the posts to display.

Screenshots

Additional context

It works fine via the frontend.

Environment information

• WordPress version: 5.7
• Link

Describe the bug
Currently when adding columns there seems to be no padding between columns unless classes are used.

To Reproduce
Edit this post:
https://wotf.feedmybeta.com/anele-mkuzo-rising-star-2017/

Expected behavior
Should be a gap between 2 columns.

Screenshots

Issue Description

When you trash a recipe that has already been linked to a day it still stays on the day plan which results in an empty recipes tab content on the day.

Tested on Verloor jou boep -

https://verloorjouboep.feedmybeta.com/plan/vrydag/recipes/

The buttons font-weight needs to be bold for more legibility.

Describe the bug

LSX Blocks is using the development build of React.

Steps to Reproduce

1. Setup new WordPress install
2. Activate LSX Blocks plugin
3. Install React Developer Tools Chrome extension
4. Open page/post in the block editor.

Expected behaviour

Use the Production Build of React

If you’re benchmarking or experiencing performance problems in your React apps, make sure you’re testing with the minified production build.

By default, React includes many helpful warnings. These warnings are very useful in development. However, they make React larger and slower so you should make sure to use the production version when you deploy the app.

Ref - https://reactjs.org/docs/optimizing-performance.html#use-the-production-build

Screenshots

Describe the bug

meta_key: lsx_disable_title postmeta is not limited to content only where needed, for example, WooCommerce Action Scheduler prior to version 3.0 (current version used on most sites) utilizes a custom post type for their 'actions', all these actions are being written with the meta_key: lsx_disable_title resulting in numerous useless postmeta data caused by LSX Blocks.

Screenshots

See export - https://docs.google.com/spreadsheets/d/1SZgKjMKMjibh9LElWNSnp773z_db12GoBvbOWspQQkA/edit?usp=sharing

https://github.com/lightspeeddevelopment/lsx-blocks/blob/44257c42a2462a74b8275b6ae64a830ff6e7e1d6/bin/cardheight.js#L16-L17

Description
Create a new block that is part of the Health Plan section, that brings a list of days in a grid.

To Do

• Create the main files for the Daily plan grid block, following the blocks folder structure.
• The block will call a list of days in a grid from the Health Plan plugin.
• Each should show the list of days linking to each day.
• Make sure to add the proper stylin, so if a day is completed, there will be a check icon instead of the day number.
• This block will only be available if the Health Plan plugin is active.

Final design

Describe the bug
Hero Block background needs to grow according to the content.
If there is to much content and the background image is small, the content will overflow the container.

Expected behavior
The size of the container should be dynamic to adapt to the content

Solution
Extend Core Cover Block with LSX options, this will replace Hero Block. The cover block has all the Hero block options and includes video options.

What to Extend

• Add padding options
• Add Margin options

Screenshots

Problem
When doing the Six Cats Refer a friend section on the page I couldn't link up the modal with the button as there was no way to add the required data-target and data-toggle attributes needed to trigger the modal.

Solution
Add in the ability to add data-target & data-toggle attributes to Button block.

To do

• Add extra fields options on the button block for a data-target attributes
• Add extra fields options on the button block for a data-toggle attributes
• Make sure the improvements are compatible with older block version deprecating code.