A WordPress Block theme designed to work seamlessly with WooCommerce, supported by a Figma Design System.
Home Page: https://lsx.design
License: GNU General Public License v3.0
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![mergify[bot] avatar](https://avatars.githubusercontent.com/in/10562?v=4 "mergify[bot]")
We need to look at the various screens that the WC Memberships plugin creates, and make sure we have templates, patterns or styling to handle the layouts.
You can use the LightSpeed user to view the following screens. It has been setup with a Platinum Plan expiring in 2025.
Describe the bug
Menu displays broken on Tablet, responsiveness needs attention and styling fixes to work on Tablet and similar devices.
Expected behavior
The Menu design should not display behind the Logo and drop down items should display better inline.
Additional Context
This is due to the hard coded breakpoint in WordPress core, set to 600px. There have been a few queries about this already.
Broken Link Checker found a broken link on https://github.com/lightspeedwp/lsx-design
Target: https://github.com/lightspeeddevelopment
HTTP_404
Currently it is manual process of adding properties
There is no standard way to easily apply a subheading style. When we manually set font sizes they no longer respond to the theme defaults.
Add 3 new block styles
When you hover over a menu item, the submenu sits flush with the menu item above.
Solution
We need to increase the bottom and top padding on the LI element, and reduce the padding of the header. To allow the mouse to keep the submenu open when navigating to it.
Additional context
Describe the bug
When using the Site Editor there are specific Blocks which have options to edit text size however these edits are not updating on the front end.
Details Block:
To Reproduce
Expected behavior
The text size should change but doesn't, none of the options working.
Screenshots
Screenshot of Editor
Screenshot of Front End CSS generated from Editor:
Catalog Sorting:
To Reproduce
Expected behavior
There should be options to include Padding at least.
Screenshots
Woocommerce Breadcrumb
To Reproduce
Expected behavior
The text size should change but doesn't, none of the options working.
Screenshots
Screenshot of Shop - Margin is removed.
Screenshot of Category page, same block copied to template. Margin displays, seems like the Gutenburg plugin didnt load the styles from the shop.
Additional context
Will continue to include more editor Bugs once they are found.
Links are not accessible
Visual Accessibility improvements required on all link types. Majority of links dont have any hover stats, active states or focus states. These link types need improvements:
Expected behavior
Internal & External links should include a hover stats, active states or focus states to differentiate from the current link state. A colour change alone will not suffice, include underline for each state:
Broken Link Checker found a broken link on https://github.com/lightspeedwp/lsx-design
Target: https://lsx.design
HTTP_403
Describe the bug
When the browser window width is reduced, the category name, which is displayed to the right of the post title, comes closer and closer to the title. Eventually, the category covers part of the title.
To Reproduce
View an archive page and reduce the browser window width.
Expected behavior
All texts should be readable.
Screenshots
Desktop (please complete the following information):
No Template Support for Events Calendar plugin
The Events Calendar currently does not have any block based or php templates for displaying all of the templates within the Events Calendar plugin, most significant is the single events template.
Single Event
Events Archive
Venues
Organisers:
The Events Calendar templates for LSX Design
The solution is to add the missing templates and CSS needed to display events content effectively.
Example Screenshots for Events Calendar Templates
Add any other context or screenshots about the feature request here.
Organiser Archive
Describe the bug
When there are no search results, the page displays the search form in the top part of the page but not a
message explaining that there were no results. The rest of the page is empty.
This is, of course, optional but common practice.
To add blocks that are only shown when there are no results, add the "no results" block inside the query loop, but outside the post template block. The block itself does not display anything; it only displays the blocks you place inside it.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A message explaining there were no results, and maybe some guidance on what to do next, for example,
list the most recent posts or most popular products.
Describe the solution you'd like
We would like a "dark" version of the theme available.
Requirements
Additional context
Links to resources
Links to Figma Files
PR - #33
Product Search Results using Classic Search Template
Add a block template to the Templates folder
Describe the issue
Spacing improvements to Blog Archive & Single templates.
To Reproduce
Steps to reproduce the spacing issues:
Designs
Describe the bug
When the WP Recent Posts block is added to the footer, or any other area, it does not show the bullets like a list item is supposed to.
Expected behaviour
Additional Context
Have a look at the code screenshot below, it may be WordPress is removing the bullets. And we need to add them in.
Screenshots
Describe the bug
Follow up to #21
There are references in the templates to CSS variables that are not in the theme.
These still work in a sense, because they have fallbacks:
style="padding-top:var(--wp--custom--spacing--small, 1.00rem)
Describe the bug
Currently LSX Design Colour Palette and Buttons require attention to improve Accessibility and standardise the Button Hovers, Active & Focus states to work better with the available Colour Palette. Plus improving options for Fonts Styles & Sub Headings
Expected behavior
Expected Outcomes
Designs on Figma:
https://www.figma.com/file/lDKd5sQc3nhX4ItgczYMJ5/LightSpeed-Website---2023?type=design&node-id=0-1&mode=design
Broken Link Checker found a broken link on https://github.com/lightspeedwp/lsx-design
Target: https://github.com/lightspeeddevelopment
HTTP_404
Describe the bug
In some of the templates and patterns, the hyphens in the block comment are replaced with Unicode.
so instead of wp--custom--spacing etc, it says var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dspacing\u002d\u002dlarge
To Reproduce
View the source of the header template parts and header patterns.
Expected behavior
The recommended format for the CSS variables in the block comments is "var:preset|spacing|70"
Using var(--wp--preset--spacing--70 also works.
Notes
Describe the bug
The search template limits the results to one page:
<!-- wp:query {"queryId":0,"query":{"pages":1,"
The number of results that show match the setting in the WordPress Admin > Reading > Blog pages show at most.
"pages": 1 to "pages": 0 in the comment for the query block.To Reproduce
Steps to reproduce the behavior:
Expected behavior
To display all results
WooCommerce Product Archives are using classic templates
Switch WooCommerce Products Block and Product Archive Block Templates
Describe the solution you'd like
We need to move the CSS for the quote block out of the current file, and enqueue is using "wp_enqueue_block_style". This will load the CSS conditionally.
Additional context
This is how to enqueue the quote styles - https://github.com/lightspeedwp/lsx-mega-menus/blob/master/includes/class-core.php#L143
Describe the bug
Attempted to create an LSX Sharing Pattern which could be used site wide. Encountered error when adding to theme as Pattern.
Adding as a Template Part did work better locally I got error from LSX Sharing
Error Code
TypeError: Cannot read properties of undefined (reading 'useBlockProps')
at save (http://demo.local/wp-content/plugins/lsx-sharing//build/blocks.js?ver=6.4.1:1:10784)
at zr (http://demo.local/wp-includes/js/dist/blocks.min.js?ver=7204d43123223474471a:10:4798)
at Ir (http://demo.local/wp-includes/js/dist/blocks.min.js?ver=7204d43123223474471a:10:5179)
at http://demo.local/wp-includes/js/dist/blocks.min.js?ver=7204d43123223474471a:10:34027
at Yn (http://demo.local/wp-includes/js/dist/blocks.min.js?ver=7204d43123223474471a:10:34143)
at http://demo.local/wp-includes/js/dist/blocks.min.js?ver=7204d43123223474471a:10:35228
at Zn (http://demo.local/wp-includes/js/dist/blocks.min.js?ver=7204d43123223474471a:10:35292)
at http://demo.local/wp-includes/js/dist/blocks.min.js?ver=7204d43123223474471a:10:35030
at Array.map ()
at Zn (http://demo.local/wp-includes/js/dist/blocks.min.js?ver=7204d43123223474471a:10:35022)
Expected behavior
Have a Social Share template part which could be which is pre-build and can be added to any template easily when needed.
Description
There is no CSS for the Gravity Forms "form block" in the theme. Currently the button does not inherit the
Prep
Styling
Current Form
Additional context
The old LSX for reference - https://lsx-demo-staging.lightspeedwp.dev/contact/
Broken Link Checker found a broken link on https://github.com/lightspeedwp/lsx-design
Target: https://lsx.design
HTTP_403
Child theme missing Template parts - Header & Footer
Template part has been deleted or is unavailable error when enabling another theme.
This PR fixes an issue where the homepage returned the Template part has been deleted or is unavailable error when enabling another theme.
This issue was caused by the theme attribute being included in the wp:template-part tags for the header and footer of the home template.
A similar issue was detailed in WordPress/create-block-theme#242, which is where I identified the fix.
Describe the bug
It is not possible to open and close the FAQ block with the keyboard only.
This is a problem for:
The plus icon is not a focusable element.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
To be able to open and close the questions and answers
Screenshots
Desktop (please complete the following information):
Describe the solution you'd like
We would like to be able to use the LSX Search plugin in conjunction with the classic WooCommerce Shop and Archive Templates (Category, Tags, Attribute Archives)
We need to look at how the Woo templates are inserted, and if the LSX Search can be made compatible with those.
Additional context
https://demo.lsx.design/wp-admin/options-general.php?page=lsx-search-settings&cmb_tab=product_search
https://demo.lsx.design/wp-admin/options-general.php?page=facetwp
https://demo.lsx.design/shop/
Describe the bug
Woocommerce - Product Title Link Colour/Hover - not responding to colour changes.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Link colours should inherit Editor Options
Video example of issue - https://www.loom.com/share/c973a92589a041b8939820ad1feda487?sid=9b3c0389-fe7e-4387-97a7-105cff657427
Looks like the Front end doesn't include any classes or options updated from the editor.
Screenshots
Screenshot of Editor
Screenshot of Front end with incorrect colours
Distraction Free Checkout Header
Commit LSX Checkout Header to LSXD
Description
We would like to export our set of custom variables in Figma to the theme.json file in our Theme.
Colours to Consider
Resources
LSX Design. Featured Patterns:
Contain images, remove images and update Pattern
Improve Responsive Design for Header & Footers for LSX Design theme
A clear and concise description of what the bug is.
New Designs supplied Headers including Mobile designs for LSX Design theme. Including Menu in Mobile.
Headers:
3 header options - https://lsx.design/template-parts/wordpress/headers/
Screenshots
New Designs for Desktop & Mobile(Open & Closed Menu)
Desktop
Smartphone:
Describe the bug
There seem to be several block patterns that are included as files but not used.
Please also remember that GPL allows re-using code from other GPL products, but adding copyright information and license information for that product is required.
So if you borrow patterns and code from the "Frost" theme and Storefront, you can, but you need to add credits, for example in the readme file.
Describe the bug
In the readme, the installation instruction says that one should install Storefront, which of course, is a different theme:
== Installation ==
1. In your admin panel, go to *Appearance > Themes* and click the *'Add New'* button.
2. Type in Storefront in the search form and press the 'Enter' key on your keyboard.
3. Click on the *'Activate'* button to use your new theme right away.
5. Navigate to *Appearance > Site Editor* in your admin panel and customize to taste.
Description
The new WP6.4 lightbox adds the tags to all images that output. So all images are combined into 1 gallery on a page.
To Reproduce
With the new WP 6.4 installed, load a few galleries onto a page, and click one of the images. You will see all of them are in 1 gallery.
Expected behaviour
We would like to specifically enable it for certain images, such as only the WP gallery on a page, and not have the featured image included in that.
Tasks
Screenshots
Description
We need to offer the user a way to find what they are looking for, when their search returns no results.
Possible Solutions
-[ ] Change the text to something like "No results found, please modify your keywords and try again."
-[ ] Display a list of the most recent posts / post types.
-[ ] Display a list of the categories?
Additional context
https://demo.lsx.design/?s=asdfsss
Description
We need to make sure the theme displays the Sensei LMS frontend pages and blocks in a decent manner.
We need to go through each page and make sure the following align with the LSX Design scheme.
*Checklist
Pages
Additional context
Resources
Learn.WordPress.org Example:
NOTE: Login with the feedmymedia wordpress.org user
All courses - https://learn.wordpress.org/courses/
Single Course - https://learn.wordpress.org/course/open-source-basics-and-wordpress/
Single Lesson - https://learn.wordpress.org/lesson/open-source-principle-0-with-many-eyes-all-bugs-are-shallow-2/
*Screenshots
These are the pages that need most attention.
Courses Login Page
Course List View - images are huge.
Course Dashboard - Log in screen colours.
My Courses Page - Various
Describe the bug
Including SVG's into the theme is not possible with Wordpress Security policy.
I have identified a work around to use SVG Unicode, this does work for Flat SVG colours, however if SVG's colours need to be dynamic based on the theme.JSON values, these presets dont appear to adjust any colour settings and this would be needed for Child themes.
Ideally we would like to include SVG icon to work with the Buttons and each Colour Palette including Child themes for future projects.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Additional context
Example CSS for SVG code which includes Fill & Stroke
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='29' viewBox='0 0 28 29' fill='none'%3E%3Ccircle cx='14.5' cy='15' r='12' stroke='white' stroke-width='2'/%3E%3Cpath d='M13.4887 11.0045L16.3617 13.7766H9.41327C8.90717 13.7766 8.5 14.1863 8.5 14.6956V15.3082C8.5 15.8175 8.90717 16.2272 9.41327 16.2272H16.3617L13.4887 18.9994C13.1196 19.3555 13.112 19.9489 13.4735 20.3127L13.8921 20.7301C14.2498 21.09 14.8282 21.09 15.1821 20.7301L20.2317 15.6528C20.5894 15.2929 20.5894 14.7109 20.2317 14.3548L15.1821 9.26994C14.8244 8.91002 14.246 8.91002 13.8921 9.26994L13.4735 9.6873C13.112 10.0549 13.1196 10.6484 13.4887 11.0045Z' fill='white'/%3E%3C/svg%3E");
Ideally the Fill & Stroke should be replaced with a theme.JSON preset value: Example - var(--wp--preset--color--cta);
Assigning CSS for Fill & Stroke dont seem to adjust the SVG Unicode.
Describe the bug
Version 1.0 of LSX Design theme has various issues with theme patterns, these issues needed to be addressed by improving designs so that a clear
To Reproduce
Steps to reproduce the behavior:
Tasks
Designs
Patterns - https://www.figma.com/file/U3MB5DRLxHpQDoDs2Pi2jG/LSX-WordPress?type=design&node-id=1151-16&mode=design&t=PGkRDb5NlGP94mNq-0
Full Page Patterns - https://www.figma.com/file/U3MB5DRLxHpQDoDs2Pi2jG/LSX-WordPress?type=design&node-id=1151%3A17&mode=design&t=7yWXAmGZJXuF4WtX-1
Is your feature request related to a problem? Please describe.
Using the WP Core table block works, however, it does not shrink nicely for mobile
https://fisa-2023.lightspeedwp.dev/resources/membership-terminated/
Describe the solution you'd like
Make the table block responsive
Try correct with theme.json otherwise with custom CSS for the table block
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Additional context
Add any other context or screenshots about the feature request here.
WooCommerce Order Confirmation Template not blockified
Current the order confirmation template is using classic templates.
Transform the classic template to a block template
Reference this design
https://www.figma.com/file/X2XqREwNM6b3QW2G43rj11/LSX-WooCommerce?type=design&node-id=874%3A7095&mode=design&t=KGJ2QhxJ2jUz1GKg-1
Broken Link Checker found a broken link on https://github.com/lightspeedwp/lsx-design
Target: https://lsx.design
HTTP_403
Broken Link Checker found a broken link on https://github.com/lightspeedwp/lsx-design
Target: /lightspeedwp/lsx-design/search?l=php
HTTP_429
Cart Cross Sells block does not display any products, just a title
Broken Link Checker found a broken link on https://github.com/lightspeedwp/lsx-design
Target: https://github.com/lightspeeddevelopment
HTTP_404
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.