Git Product home page Git Product logo

block-gallery's People

Contributors

amjadr360 avatar dependabot[bot] avatar mtekk avatar richtabor avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

block-gallery's Issues

Confusing admin notices

I'm testing WordPress 5.0 RC3 and just installed your new plugin.

After installation I get an admin notice, that I should run Gutenberg (which is already included in WP 5.0) and deactivate the Classic Editor (file class-block-gallery-gutenberg-checker.php). I assume, the plugin should work in WP 5.0 without additionally running the Gutenberg plugin? Perhaps you are already working on a solution for the release tomorrow.

The message to deactivate the Classic Editor is IMHO somewhat misleading. Of course I understand that I won't be able to use any blocks if I use the classic editor, but the plugin also allows to be used optionally for single posts or pages (e.g. to edit existing posts and pages in the classic editor, but create a new page with your block gallery in the new block editor). Perhaps a simple notice-info "To create gallery blocks you need to run the block editor" with an option to dismiss would be better suitable? I didn't write a pull request, as I wasn't sure about the wording and the plugin check also needs to be enhanced to check the WordPress version number.

Besides that … Damn cool stuff. Thank you for sharing. ❤️

Add opacity check to images within the galleries

I've received a couple notices of errors where themes have set the opacity for images to zero (for lazy-loading purposes) but then lazy-loading does not trigger within the block. A possible solution would be to force the images to display at 100% opacity.

.blockgallery--item img {
  opacity: 1 !important;
}

Translation does not work

Hello,

I found this great plugin when I set up a new WordPress blog for a Chinese friend. Thank you very much for this plugin. It's intuitive and easy to use. Although it might lack some features such as, for instance, caption for each carousel items, and caption placed over each items, it's not very hard to "fix" them for advanced users who know CSS and JS.

However, after I quickly translated the /languages/block-gallery.pot file into Simplified Chinese (zh_CN) with Poedit Pro and put the two files (block-gallery-zh_CN.po and block-gallery-zh_CN.mo) into the /languages/ folder, it didn't work (except for the description of the plugin which was well translated). I then used Poedit to fetch all translatable strings from .php files (making sure those are the latest strings) and retranslate them, no luck. I also tried to put .po and .mo into /wp-content/languages/ but it didn't work either.

I then went to plugin page on wordpress.org and noticed the plugin has already been translated into several languages including Traditional Chinese (zh_TW) here, which is the most complete (100%) translation so far. I changed my zh_CN WordPress to zh_TW, redownloaded and reinstalled Block Gallery (so that zh_TW language pack here was automatically fetched into my WordPress), all those Block Gallery-related strings in Gutenberg editor still remained in English.

I've submitted my translation here.

Add option to show captions only on hover

From idekogel on WordPress.org:

I was wondering if it would be possible to add an option to only show the caption when hovering over the image. This was an option in the old-style WordPress galleries, but has not reappeared yet in gutenberg. I think it would be a great option in many situations, especially for big captions, and/or small images.

It's an interesting idea. I'd like to explore it further, though it may only pertain only to the Masonry Block (currently).

Support of lazy loading

Adding some sort of support for lazy loading plugins would be great.
Using other lazy loading plugins like https://wordpress.org/plugins/lazy-loading-responsive-images/ breaks Masonry galleries because the correct size of images is not known at the time of page load.

Could you add some JavaScript event to check if the image is actually loaded and only then do the calculation?
The previously mentioned plugin loads base64 encoded 1x1 pixel image in src attribute when image is not yet loaded.

Masonry Block Column Size Resets

Describe the bug
When using the Masonry block, removing the width setting setting and changing column size to Extra Large, the width and column size settings are not retained when coming back to the post.

To Reproduce
Steps to reproduce the behavior:

  1. Create a post with a Masonry block
  2. Add photos to the block
  3. In Toolbar, click on Wide Width button to remove the width setting
  4. In Block Settings, click on Column Size: Extra Large
  5. Update post
  6. Refresh post

Expected behavior
The width and column size settings should be retained.

WordPress theme
Tabor

Desktop (please complete the following information):

  • OS: Mac OS
  • Browser: Chrome
  • Version: 72.0.3626.121

Originally posted here: https://github.com/coblocks/coblocks/issues/376

Carousel: adaptiveHeight setting

Since the carousel is using Flickity, we should allow the user toggle adaptive height. This is critical if we want the carousel to work well on both desktop and mobile.

Use case: on desktop for a carousel of landscape images of 4:3 and 16:9 ratios, where the website is contained to about 1200px width. To show the the images resonably well, the user has to set the height to at least 560px. But in a small mobile device, this becomes a carousel that fills up 90% of the screen's height and becomes a portrait carousel, and the images are cropped/zoomed in an way that doesn't do justice to what the images are trying to show.

Having 'adaptiveHeight' set to true, the images are displayed according to the original image ratios defined by the author.

If implemented, when both adaptiveHeight and autoPlay is true, we need to make sure that autoPlay is paused when the carousel is not within the viewport, so that the window's scroll is not changed and shifts other content (that the user is reading at that moment) up or down.

Or if we don't want to implement adaptiveHeight, we should at least allow the user to set a height for mobile devices applied in a media query for 'orientation: portrait'.

Carousel - Fullwidth gets white space in right side and between slides

Hi

I want to use the Carousel in full width. But as the plugin got some media queries for lager screen sizes, making it 80% when bigger then 1200px, I've tried to override that with:

.blockgallery--item {
    width: 100% !important;
}

But that creates some white space on the right side 🤔

And more strage – when resizing the window below the 1200px and back to +1200px, it snaps back and works perfect!

Screenshot

Add support for PHP 5.3

As requested via this WP.org ticket.

The description of this plug-in says that the required PHP version is 5.2.4 or higher. However upon trying to activate the plug-in on top of PHP 5.3.x, the following error shows up:

Parse error: syntax error, unexpected '[' in /var/www/my_wp_path/wp-content/plugins/block-gallery/includes/admin/class-block-gallery-action-links.php on line 87.

This particular error is due to the used array initialization which was introduced in PHP 5.4.x.

Would be great to have the plug-in working on top of 5.3.x, or even 5.2.4 as mentioned in the requirements.

Feature request

One of my clients really likes this plugin. They began trying to replicate the looks of the image carousel in case of embedded youtoube videos. Well, they just apply left and right alignment to the youtube embed block as that way those turn into a video thumbnail and they think they were doing it right. However it is definately not the case.

This made the idea of this feature request:
Please let the plugin also accept video links (or maybe all the embed types), not just images.

trigger masonry layout after each image loads

The current behaviour loads all images first before masonry layout will be initialized. Please consider to trigger masonry layout each time after an image has been loaded. Depending on how many images a user needs to load, this could take a rather long time. I'd prefer to see the masonry layout as soon as possible, especially if you use lazy loading.

Package json broken?

I had the intention to try some stuff out with the gallery. Therefore I cloned the repo, ran "npm install" and then npm "start" which seemed to work fine. Then when trying to build I got error from the gulp task.
I played around a lot, updated packages, ran "npm audit fix" but didn't really get things to work. Something that seemed strange to me was the package.json build script which runs babel for some reason, even though the cgb package already claims to use babel transpiling.
After removing the "babel src" pipe I was able to run "npm run build" (cgb-scribts build) without any error but using the gulp build task didn't work and reported something like "unrecognized command or bashfile cgb-scripts".

Also the "npm run makepot" doesn't work without the wp-cli, there is an NPM package for that maybe you could install that or give more precise development instructions in the readme

I think this plugin needs some updates and maybe remove babel?
But maybe I'm just missing something.

Carousel Block overflowing in CSS Grid layout

I have used the plugin with no issues in a display:block; layout, but I have recently converted the site to a CSS Grid and the same pages that work in a block layout are displaying the following:

image

image

The same carousel block in my old theme:

image

The carousel is nested inside body>main>article with the following CSS rules:

body{ display:grid; grid-template-columns:1fr 6fr 2fr 1fr; }
main{ display:block; }
article{ display:block; }

ISBAT select images from the Media Library to add to Block Gallery galleries

As a user, ISBAT easily add existing images from the Media Library to any Block Gallery block.

Core recently tweaked the default Gallery block UI. In the spirit of familiarity, we should follow suite to allow the same. We need to also tweak the UI within our blocks' inserter to resemble the design pattern utilized in the core Gallery block (pictured below).

  • Masonry block
  • Carousel block
  • Stacked block

From the core Gallery block:

Screen_Shot_2019-04-17_at_10 56 41_AM

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.