=== Custom Layouts - Post, Product and CPT Grids === Contributors: CodeAmp Tags: posts, products, post grid, product grid, block, blocks Requires at least: 5.7 Tested up to: 5.7 Requires PHP: 7.2 Stable tag: 1.3.0 License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Build a list or grid layout of any post type (products, pages, posts + more). Design the look of each item in the layout using our powerful drag and drop template editor. == Description == Build a list or grid layout of any post type (products, pages, posts + more). * Design post templates (cards) using our drag and drop builder * Built for both Gutenberg users and non Gutenberg users (block + shortcodes available) * Query editor - select from multiple post types or restrict by tags, categories and taxonomies * Works with any theme * No coding required * Responsive options Check out the [Custom Layouts Website](https://customlayouts.com) for examples (docs are coming soon). == Layout Editor == * Build single column or grid based layouts using the visual editor * Supports Masonry out of the box * Tons of design options to build the layout you want * Choose to add numbered Pagination ( 'Load more' and 'Infinite scroll' options coming soon ) * Powerful query editor allows you to show the posts you want - choose multiple post types, with taxonomy restrictions and ordering parameters * Responsive columns (choose how many columns to show for each device size - and set your own breakpoints) == Template editor == * Design individual templates (cards) using our drag and drop editor - creativity is your only limit * Link them with your layouts to build beautiful designs * Hundreds of design options * Unique Elements system (based on the block system) * granular control over the elements you add to your design * choose from a (growing) list of unique elements and add them where you want * to re-arrange elements, just drag and drop * each element has it's own sidebar full of options * Currently available elements: * **Post Title** - Change header tag, link to post * **Post Excerpt** - Limit number of characters displayed when using content * **Post Author** - Show Gravatar, link to author archive, display full name, first name, last name, display name or nickname. * **Published + Modified Date** - custom date formatting options * **Link** - Link to post, open in new window * **Custom Field** - multiple formatting options - restrict content length by chars or words, format as number with decimals, or format as a date * **Taxonomies** - supports tag, categories + custom taxonomies - combine multiple taxonomies together, order by Name, ID, Slug, count * **Basic Text** - add custom text, supports shortcodes, * Supports custom gradients + alpha transparencies == Gutenberg integration == * Custom blocks for building layouts * Seamlessly integrates with our Template Editor * UI built using 90% Gutenberg components 👍 * Experimental FSE Query block support (drop our Post Template block into the Query block) == Built for speed == * At its base - loads only 1 css file and 1 javascript file on the frontend - total bundle size approx 15kb. * CSS file dynamically created, saving resources and requests per page load (+ avoiding inline CSS) * Caches posts + queries for optimum performance * Not jQuery dependant == Includes 7 sample templates == We've included a pack of templates ready for you to customise - check the installation tab for how to import these to your site. == Screenshots == 1. Using the layout block 2. The Template Editor - full customization over each item 3. Frontend result 4. Short demo animation 5. Responsive controls == Installation == = Uploading in WordPress Dashboard = 1. Navigate to the 'Add New' in the plugins dashboard 2. Navigate to the 'Upload' area 3. Select `custom-layouts.zip` from your computer 4. Click 'Install Now' 5. Activate the plugin in the Plugin dashboard = Using FTP = 1. Download `custom-layouts.zip` 2. Extract the `custom-layouts` directory to your computer 3. Upload the `custom-layouts` directory to the `/wp-content/plugins/` directory 4. Activate the plugin in the Plugin dashboard = Importing the sample templates = To import the sample template data, follow these steps: 1. Log in to your site as an administrator. 2. Go to Tools: "Import" in the WordPress admin panel. 3. Install the "WordPress" importer from the list. 4. Activate & Run Importer. 5. Upload the file from our plugin folder - `custom-layouts/sample-data/sample-templates.xml` - using the form provided on that page. 6. You will first be asked to map the authors in this export file to users on the site. For each author, you may choose to map to an existing user on the site or to create a new user. 7. WordPress will then import each of the templates into your site. 8. Access your new templates via wp-admin -> "Custom Layouts" -> "Templates" == Frequently Asked Questions == = How do I add a layout to a page? (Gutenberg way) = Then you can use the `Custom Layouts` block. All of the layout options are available from within the block inspector. = How do I add a layout to a page? (Shortcode method) = You can find this shortcode in the sidebar of your Layout. It will look something like: `[custom-layouts id="123"]` Where `123` is the ID of your layout = How do I add a template to a layout? = * First create a template by heading to "Templates" in the "Custom Layouts" admin menu or by clicking "add new" in the layout block. * Edit your template and when finished you can choose it from the "Post Template" dropdown in your layout. == Known Issues == * Admin Template Editor only works on desktop computers (tablets + mobiles not supported) * Admin Template Editor does not work on IE, all other major browsers supported - ** the frontend of this plugin supports IE 11+, no sweat == Roadmap == * Improve performance and load speed by providing an option to use CSS Grid for layouts + masonry * Support additional CSS unit types (currently only supports px) * Elements for WooCommerce * Elements for ACF * More layout elements (possibly use the block library) * Additional hover options * Additional font options - either Google fonts or the Gutenberg api which looks like it's coming soon * Social/sharing elements == Changelog == = 1.3.0 = * Release notes - https://codeamp.com/update-custom-layouts-1-3-0/ * Fix - some query issues when taxonomy query was disabled (but the settings were still being applied) * Fix - some instances where our assets were not being supplied the correct version number, and consequently remained cached after an update * Fix - author gravatar was not scaling with font size * Fix - various issues to do with popovers and tooltip alignment * Fix - regenerate CSS feature was not fully regenerating the CSS * Fix - by default, select display name in author element rather than full name (full name can be empty) * Fix - actions were not firing (filters were ok) - we were mixing back slash and forward - now all filters + actions use forward slashes only * Update - required WP version to 5.7 * Update - sample templates - addition of taxonomies + new spacing controls * Update - admin icons for some template elements * New - Filters + actions for frontend elements * New - change container size of a block to be full width or wrap to content (new toolbar button) * New - "fill last row" layout option - you can now stretch the last row of a grid if results do not fill all of the columns * New - Custom Field element - display the value of a custom field in your templates as a string (restrict by words/characters) or formatted number (with decimals), or a formatted date (custom formatting options) * New - Taxonomies element - list any combination of taxonomy terms in your templates * New - allow unit types for margins, padding and border radius - upgrade components to use BoxControl = 1.2.1 = * Fix - an issue when using the query restrictions the first time (in a new layout) * Fix - an issue with the S&F integration and Polylang * Fix - issues with custom classes on the layout block and layout shortcode * Fix - issues with the font size selector * Fix - a layout glitch when dragging the first element into a template * Fix - prevent saving of a new template via modal, until a title has been set * Improvement - when creating a new template via the modal, auto select it in the layout after saving * New - no results message - add your own message to display when the query settings return no results = 1.2.0 = * Improvement - Change the label of the "Custom Layout" block to "Posts Layout" * New - "Post Template" Block - Drop into an FSE Query block or use the post selector to display any post with any template * New - Query options for Layouts - select multiple post types and restrict by tag/category/taxonomy = 1.1.7 = * Fix - a JS error when launching the template editor modal * New - the template editor modal now uses the query from the layout to display the set of posts for previews * New - responsive columns - choose how many columns to show for Mobile, Tablet and Desktop * New - settings page to set responsive breakpoints + regenerate CSS = 1.1.6 = * Fix - missing files from bad commit = 1.1.5 = * Fix - issue with the order paramters on the frontend * Fix - issue with the sticky post paramater on the frontend * Fix - issue with block align not working on the frontend * Fix - add loaders/placeholders to layout block + admin page * Fix - an issue with CSS not loading due to a https bug in wp_uploads_url() = 1.1.4 = * New - Add visual editing to the layout admin page = 1.1.3 = * Fix - an issue with Post Title not being displayed correctly = 1.1.2 = * Fix - an issue with CSS generation * Fix - Rename "Custom Layouts" block to "Custom Layout" * New - Show a default image icon when no image is present + allow color to be changed = 1.1.1 = * Fix - Enable link on featured image was not working * Fix - Modal template title not showing up correctly * Fix - Grid spacing not working * Fix - Border color not being set properly * Fix - Update CSS file when templates are drafted / trashed / deleted * Improvement - store queried IDs in transients (they will get complex eventually) * Improvement - update icon (still room for improvement) * Improvement - Theme colours + gradients now available in template editor admin page with WP 5.7 or Gutenberg 9.7+ * Improvement - Update all frontend class names to use BEM naming conventions for predictable and reliable naming (we do increase the specificity, though) * New - Gradient picker for background colors * New - Alpha transparency for all color pickers * New - Create new templates directly from the layout block * New - Equal height rows (when not using masonry) * New - Featured Image options - set image size, ratio and fit mode * New - Add support for layout block alignment (supports wide and full width) * New - Demo templates = 1.1.0 = * New - Gutenberg Integration - New block + modal editor * Layout Block - build layouts using the new layout block * Modal Template Editor - get the full template editor as a modal from within the layout block * Fix - update version number whenever templates are saved to prevent caching of frontend CSS * Fix - remove admin-ajax dynamic CSS and opt to use inline CSS as a fallback instead * Fix - store generated CSS in post meta for faster loading, and only regenerate the updated templates when needed * General UI fixes = 1.0.1 = * Fix - issue with imagesLoaded & re-initialising the layout on frontend * Fix - issue with frontend date formatting when "custom" was chosen (thanks @paaljoachim) * Fix - issues with the padlock unsetting in our dimension controls * Fix - allow for multiple layouts on a single page + support for multiple masonry instances = 1.0.0 = * Initial version. = 0.0.1 = * Init project setup == Upgrade Notice == = 1.1.7 = When upgrading, CSS should be automatically regenerated. If it is not, head to the new settings page and choose "Regenerate CSS".