Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tiled galleries: Disable captions #29776

Merged
merged 2 commits into from
Jan 3, 2019
Merged

Tiled galleries: Disable captions #29776

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4365ea7
Comment out captions
sirreal Dec 28, 2018
2053b47
Comment out more caption related code
ockham Jan 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion client/gutenberg/extensions/tiled-gallery/edit.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,12 @@ export function defaultColumnsNumber( attributes ) {
}

export const pickRelevantMediaFiles = image => {
const imageProps = pick( image, [ [ 'alt' ], [ 'id' ], [ 'link' ], [ 'caption' ] ] );
const imageProps = pick( image, [
[ 'alt' ],
[ 'id' ],
[ 'link' ],
/* @TODO Captions disabled [ 'caption' ], */
] );
imageProps.url =
get( image, [ 'sizes', 'large', 'url' ] ) ||
get( image, [ 'media_details', 'sizes', 'large', 'source_url' ] ) ||
Expand Down
77 changes: 40 additions & 37 deletions client/gutenberg/extensions/tiled-gallery/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,45 +20,47 @@
opacity: 0.3;
}

.editor-rich-text {
position: absolute;
bottom: 0;
width: 100%;
max-height: 100%;
overflow-y: auto;
}

.editor-rich-text figcaption:not( [data-is-placeholder-visible='true'] ) {
position: relative;
overflow: hidden;
color: $white;
}

&.is-selected .editor-rich-text {
// IE calculates this incorrectly, so leave it to modern browsers.
@supports ( position: sticky ) {
right: 0;
left: 0;
margin-top: -4px;
}

// Override negative margins so this toolbar isn't hidden by overflow. Overflow is needed for long captions.
.editor-rich-text__inline-toolbar {
top: 0;
}

// Make extra space for the inline toolbar.
.editor-rich-text__tinymce {
padding-top: 48px;
}
}
/* @TODO Caption has been commented out */
// .editor-rich-text {
// position: absolute;
// bottom: 0;
// width: 100%;
// max-height: 100%;
// overflow-y: auto;
// }

// .editor-rich-text figcaption:not( [data-is-placeholder-visible='true'] ) {
// position: relative;
// overflow: hidden;
// color: $white;
// }

// &.is-selected .editor-rich-text {
// // IE calculates this incorrectly, so leave it to modern browsers.
// @supports ( position: sticky ) {
// right: 0;
// left: 0;
// margin-top: -4px;
// }

// // Override negative margins so this toolbar isn't hidden by overflow. Overflow is needed for long captions.
// .editor-rich-text__inline-toolbar {
// top: 0;
// }

// // Make extra space for the inline toolbar.
// .editor-rich-text__tinymce {
// padding-top: 48px;
// }
// }
}

// Circle layout doesn't support captions
// @TODO handle this in the component
&.is-style-circle .tiled-gallery__item .editor-rich-text {
display: none;
}
/* @TODO Caption has been commented out */
// &.is-style-circle .tiled-gallery__item .editor-rich-text {
// display: none;
// }

.tiled-gallery__add-item {
margin-top: $tiled-gallery-gutter;
Expand Down Expand Up @@ -120,8 +122,9 @@

// Hide captions and upload buttons in style picker preview
.editor-block-preview__content & {
.editor-media-placeholder,
figcaption {
/* @TODO Caption has been commented out */
// figcaption,
.editor-media-placeholder {
display: none;
}
}
Expand Down
65 changes: 34 additions & 31 deletions client/gutenberg/extensions/tiled-gallery/gallery-image/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import { BACKSPACE, DELETE } from '@wordpress/keycodes';
import { Component, createRef, Fragment } from '@wordpress/element';
import { IconButton, Spinner } from '@wordpress/components';
import { isBlobURL } from '@wordpress/blob';
import { RichText } from '@wordpress/editor';
/* @TODO Caption has been commented out */
// import { RichText } from '@wordpress/editor';
import { withSelect } from '@wordpress/data';

/**
Expand All @@ -17,21 +18,22 @@ import { __ } from 'gutenberg/extensions/presets/jetpack/utils/i18n';
class GalleryImageEdit extends Component {
img = createRef();

state = {
captionSelected: false,
};
/* @TODO Caption has been commented out */
// state = {
// captionSelected: false,
// };

onSelectCaption = () => {
if ( ! this.state.captionSelected ) {
this.setState( {
captionSelected: true,
} );
}
// onSelectCaption = () => {
// if ( ! this.state.captionSelected ) {
// this.setState( {
// captionSelected: true,
// } );
// }

if ( ! this.props.isSelected ) {
this.props.onSelect();
}
};
// if ( ! this.props.isSelected ) {
// this.props.onSelect();
// }
// };

onImageClick = e => {
e.preventDefault();
Expand All @@ -41,11 +43,11 @@ class GalleryImageEdit extends Component {
this.props.onSelect();
}

if ( this.state.captionSelected ) {
this.setState( {
captionSelected: false,
} );
}
// if ( this.state.captionSelected ) {
// this.setState( {
// captionSelected: false,
// } );
// }
};

onImageKeyDown = event => {
Expand All @@ -59,14 +61,15 @@ class GalleryImageEdit extends Component {
}
};

static getDerivedStateFromProps( props, state ) {
// unselect the caption so when the user selects other image and comeback
// the caption is not immediately selected
if ( ! props.isSelected && state.captionSelected ) {
return { captionSelected: false };
}
return null;
}
/* @TODO Caption has been commented out */
// static getDerivedStateFromProps( props, state ) {
// // unselect the caption so when the user selects other image and comeback
// // the caption is not immediately selected
// if ( ! props.isSelected && state.captionSelected ) {
// return { captionSelected: false };
// }
// return null;
// }

componentDidUpdate() {
const { alt, height, image, link, url, width } = this.props;
Expand Down Expand Up @@ -100,15 +103,15 @@ class GalleryImageEdit extends Component {
const {
'aria-label': ariaLabel,
alt,
caption,
// caption,
height,
id,
isSelected,
link,
linkTo,
onRemove,
origUrl,
setAttributes,
// setAttributes,
url,
width,
} = this.props;
Expand Down Expand Up @@ -167,7 +170,7 @@ class GalleryImageEdit extends Component {
</div>
) }
{ href ? <a href={ href }>{ img }</a> : img }
{ ! RichText.isEmpty( caption ) || isSelected ? (
{ /* ( ! RichText.isEmpty( caption ) || isSelected ) && (
<RichText
tagName="figcaption"
placeholder={ __( 'Write caption…' ) }
Expand All @@ -177,7 +180,7 @@ class GalleryImageEdit extends Component {
unstableOnFocus={ this.onSelectCaption }
inlineToolbar
/>
) : null }
) */ }
</figure>
);
}
Expand Down
10 changes: 6 additions & 4 deletions client/gutenberg/extensions/tiled-gallery/gallery-image/save.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@
* External Dependencies
*/
import { isBlobURL } from '@wordpress/blob';
import { RichText } from '@wordpress/editor';

/* @TODO Caption has been commented out */
// import { RichText } from '@wordpress/editor';

export default function GalleryImageSave( props ) {
const {
'aria-label': ariaLabel,
alt,
caption,
// caption,
height,
id,
link,
Expand Down Expand Up @@ -49,9 +51,9 @@ export default function GalleryImageSave( props ) {
return (
<figure className="tiled-gallery__item">
{ href ? <a href={ href }>{ img }</a> : img }
{ ! RichText.isEmpty( caption ) && (
{ /* ! RichText.isEmpty( caption ) && (
<RichText.Content tagName="figcaption" value={ caption } />
) }
) */ }
</figure>
);
}
39 changes: 20 additions & 19 deletions client/gutenberg/extensions/tiled-gallery/view.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,23 +84,24 @@ $tiled-gallery-max-column-count: 20;
object-position: center;
}

figcaption {
position: absolute;
bottom: 0;
width: 100%;
max-height: 100%;
overflow: auto;
padding: 40px 10px 5px;
color: $white;
text-align: center;
font-size: $root-font-size;
// stylelint-disable function-parentheses-space-inside
background: linear-gradient(
0deg,
rgba( $color: $tiled-gallery-caption-background-color, $alpha: 0.7 ) 0,
rgba( $color: $tiled-gallery-caption-background-color, $alpha: 0.3 ) 60%,
transparent
);
// stylelint-enable function-parentheses-space-inside
}
/* @TODO Caption has been commented out */
// figcaption {
// position: absolute;
// bottom: 0;
// width: 100%;
// max-height: 100%;
// overflow: auto;
// padding: 40px 10px 5px;
// color: $white;
// text-align: center;
// font-size: $root-font-size;
// // stylelint-disable function-parentheses-space-inside
// background: linear-gradient(
// 0deg,
// rgba( $color: $tiled-gallery-caption-background-color, $alpha: 0.7 ) 0,
// rgba( $color: $tiled-gallery-caption-background-color, $alpha: 0.3 ) 60%,
// transparent
// );
// // stylelint-enable function-parentheses-space-inside
// }
}