Embeds: Add oEmbed provider support.
For the past 6 years, WordPress has operated as an oEmbed consumer, allowing users to easily embed content from other sites. By adding oEmbed provider support, this allows any oEmbed consumer to embed posts from WordPress sites.
In addition to creating an oEmbed provider, WordPress' oEmbed consumer code has been enhanced to work with any site that provides oEmbed data (as long as it matches some strict security rules), and provides a preview from within the post editor.
For security, embeds appear within a sandboxed iframe - the iframe content is a template that can be styled or replaced entirely by the theme on the provider site.
Props swissspidy, pento, melchoyce, netweb, pfefferle, johnbillion, extendwings, davidbinda, danielbachhuber, SergeyBiryukov, afercia
Fixes #32522.
Built from https://develop.svn.wordpress.org/trunk@34903
git-svn-id: http://core.svn.wordpress.org/trunk@34868 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-10-07 06:36:25 -04:00
|
|
|
html, body {
|
|
|
|
padding: 0;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
body {
|
|
|
|
font-family: sans-serif;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Text meant only for screen readers */
|
|
|
|
.screen-reader-text {
|
|
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
|
|
height: 1px;
|
|
|
|
overflow: hidden;
|
|
|
|
position: absolute !important;
|
|
|
|
width: 1px;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Dashicons */
|
|
|
|
.dashicons {
|
|
|
|
display: inline-block;
|
|
|
|
width: 20px;
|
|
|
|
height: 20px;
|
|
|
|
background-color: transparent;
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
-webkit-background-size: 20px 20px;
|
|
|
|
background-size: 20px;
|
|
|
|
background-position: center;
|
|
|
|
-webkit-transition: background .1s ease-in;
|
|
|
|
transition: background .1s ease-in;
|
|
|
|
position: relative;
|
|
|
|
top: 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.dashicons-no {
|
|
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M15.55%2013.7l-2.19%202.06-3.42-3.65-3.64%203.43-2.06-2.18%203.64-3.43-3.42-3.64%202.18-2.06%203.43%203.64%203.64-3.42%202.05%202.18-3.64%203.43z%27%20fill%3D%27%23fff%27%2F%3E%3C%2Fsvg%3E");
|
|
|
|
}
|
|
|
|
|
|
|
|
.dashicons-admin-comments {
|
|
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M5%202h9q.82%200%201.41.59T16%204v7q0%20.82-.59%201.41T14%2013h-2l-5%205v-5H5q-.82%200-1.41-.59T3%2011V4q0-.82.59-1.41T5%202z%27%20fill%3D%27%2382878c%27%2F%3E%3C%2Fsvg%3E");
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-comments a:hover .dashicons-admin-comments {
|
|
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M5%202h9q.82%200%201.41.59T16%204v7q0%20.82-.59%201.41T14%2013h-2l-5%205v-5H5q-.82%200-1.41-.59T3%2011V4q0-.82.59-1.41T5%202z%27%20fill%3D%27%230073aa%27%2F%3E%3C%2Fsvg%3E");
|
|
|
|
}
|
|
|
|
|
|
|
|
.dashicons-share {
|
|
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.5%2012q1.24%200%202.12.88T17.5%2015t-.88%202.12-2.12.88-2.12-.88T11.5%2015q0-.34.09-.69l-4.38-2.3Q6.32%2013%205%2013q-1.24%200-2.12-.88T2%2010t.88-2.12T5%207q1.3%200%202.21.99l4.38-2.3q-.09-.35-.09-.69%200-1.24.88-2.12T14.5%202t2.12.88T17.5%205t-.88%202.12T14.5%208q-1.3%200-2.21-.99l-4.38%202.3Q8%209.66%208%2010t-.09.69l4.38%202.3q.89-.99%202.21-.99z%27%20fill%3D%27%2382878c%27%2F%3E%3C%2Fsvg%3E");
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-share-dialog-open:hover .dashicons-share {
|
|
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.5%2012q1.24%200%202.12.88T17.5%2015t-.88%202.12-2.12.88-2.12-.88T11.5%2015q0-.34.09-.69l-4.38-2.3Q6.32%2013%205%2013q-1.24%200-2.12-.88T2%2010t.88-2.12T5%207q1.3%200%202.21.99l4.38-2.3q-.09-.35-.09-.69%200-1.24.88-2.12T14.5%202t2.12.88T17.5%205t-.88%202.12T14.5%208q-1.3%200-2.21-.99l-4.38%202.3Q8%209.66%208%2010t-.09.69l4.38%202.3q.89-.99%202.21-.99z%27%20fill%3D%27%230073aa%27%2F%3E%3C%2Fsvg%3E");
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed {
|
|
|
|
width: 100%;
|
|
|
|
padding: 25px;
|
|
|
|
font: 400 14px/1.5 'Open Sans', sans-serif;
|
|
|
|
color: #82878c;
|
|
|
|
background: white;
|
|
|
|
border: 1px solid #e5e5e5;
|
|
|
|
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
|
|
|
|
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
|
|
|
|
-webkit-box-sizing: border-box;
|
|
|
|
-moz-box-sizing: border-box;
|
|
|
|
box-sizing: border-box;
|
|
|
|
/* Clearfix */
|
|
|
|
overflow: auto;
|
|
|
|
zoom: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed a {
|
|
|
|
color: #82878c;
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed a:hover {
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-featured-image {
|
|
|
|
margin-bottom: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-featured-image img {
|
|
|
|
width: 100%;
|
|
|
|
height: auto;
|
|
|
|
border: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-featured-image.square {
|
|
|
|
float: left;
|
|
|
|
max-width: 160px;
|
|
|
|
margin-right: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed p {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
p.wp-embed-heading {
|
|
|
|
margin: 0 0 15px;
|
|
|
|
font-weight: bold;
|
|
|
|
font-size: 22px;
|
|
|
|
line-height: 1.3;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-heading a {
|
|
|
|
color: #32373c;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed .wp-embed-more {
|
|
|
|
color: #b4b9be;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-footer {
|
|
|
|
display: table;
|
|
|
|
width: 100%;
|
|
|
|
margin-top: 30px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-site-icon {
|
|
|
|
position: absolute;
|
|
|
|
top: 50%;
|
|
|
|
left: 0;
|
|
|
|
-webkit-transform: translateY(-50%);
|
|
|
|
-ms-transform: translateY(-50%);
|
|
|
|
transform: translateY(-50%);
|
|
|
|
height: 25px;
|
|
|
|
width: 25px;
|
|
|
|
border: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-site-title {
|
|
|
|
font-weight: bold;
|
|
|
|
line-height: 25px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-site-title a {
|
|
|
|
position: relative;
|
|
|
|
display: inline-block;
|
|
|
|
padding-left: 35px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-site-title,
|
|
|
|
.wp-embed-meta {
|
|
|
|
display: table-cell;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-meta {
|
|
|
|
text-align: right;
|
|
|
|
white-space: nowrap;
|
|
|
|
vertical-align: middle;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-comments,
|
|
|
|
.wp-embed-share {
|
|
|
|
display: inline;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-meta a:hover {
|
|
|
|
text-decoration: none;
|
|
|
|
color: #0073aa;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-comments a {
|
|
|
|
line-height: 25px;
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-comments + .wp-embed-share {
|
|
|
|
margin-left: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-share-dialog {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
bottom: 0;
|
|
|
|
background-color: rgba(10, 10, 10, 0.9);
|
|
|
|
color: #fff;
|
|
|
|
opacity: 1;
|
|
|
|
-webkit-transition: opacity .25s ease-in-out;
|
2015-10-07 10:07:25 -04:00
|
|
|
transition: opacity .25s ease-in-out;
|
Embeds: Add oEmbed provider support.
For the past 6 years, WordPress has operated as an oEmbed consumer, allowing users to easily embed content from other sites. By adding oEmbed provider support, this allows any oEmbed consumer to embed posts from WordPress sites.
In addition to creating an oEmbed provider, WordPress' oEmbed consumer code has been enhanced to work with any site that provides oEmbed data (as long as it matches some strict security rules), and provides a preview from within the post editor.
For security, embeds appear within a sandboxed iframe - the iframe content is a template that can be styled or replaced entirely by the theme on the provider site.
Props swissspidy, pento, melchoyce, netweb, pfefferle, johnbillion, extendwings, davidbinda, danielbachhuber, SergeyBiryukov, afercia
Fixes #32522.
Built from https://develop.svn.wordpress.org/trunk@34903
git-svn-id: http://core.svn.wordpress.org/trunk@34868 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-10-07 06:36:25 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-share-dialog.hidden {
|
|
|
|
opacity: 0;
|
|
|
|
visibility: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-share-dialog-open,
|
|
|
|
.wp-embed-share-dialog-close {
|
|
|
|
margin: -8px 0 0;
|
|
|
|
padding: 0;
|
|
|
|
background: transparent;
|
|
|
|
border: none;
|
|
|
|
cursor: pointer;
|
|
|
|
outline: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-share-dialog-open .dashicons,
|
|
|
|
.wp-embed-share-dialog-close .dashicons {
|
|
|
|
padding: 4px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-share-dialog-open .dashicons {
|
|
|
|
top: 8px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-share-dialog-open:focus .dashicons,
|
|
|
|
.wp-embed-share-dialog-close:focus .dashicons {
|
|
|
|
-webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
|
|
|
|
box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
|
|
|
|
-webkit-border-radius: 100%;
|
|
|
|
border-radius: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-share-dialog-close {
|
|
|
|
position: absolute;
|
|
|
|
top: 20px;
|
|
|
|
right: 20px;
|
|
|
|
font-size: 22px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-share-dialog-close:hover {
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-share-dialog-close .dashicons {
|
|
|
|
height: 24px;
|
|
|
|
width: 24px;
|
|
|
|
-webkit-background-size: 24px 24px;
|
|
|
|
background-size: 24px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-share-dialog-content {
|
|
|
|
height: 100%;
|
|
|
|
-webkit-transform-style: preserve-3d;
|
|
|
|
transform-style: preserve-3d;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-share-dialog-text {
|
|
|
|
margin-top: 25px;
|
|
|
|
padding: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-share-tabs {
|
|
|
|
margin: 0 0 20px;
|
|
|
|
padding: 0;
|
|
|
|
list-style: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-share-tab-button {
|
|
|
|
display: inline;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-share-tab-button button {
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
border: none;
|
|
|
|
background: transparent;
|
|
|
|
font-size: 16px;
|
|
|
|
line-height: 1.3;
|
|
|
|
color: #aaa;
|
|
|
|
cursor: pointer;
|
|
|
|
-webkit-transition: color .1s ease-in;
|
|
|
|
transition: color .1s ease-in;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-share-tab-button [aria-selected="true"] {
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-share-tab-button button:hover {
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-share-tab-button + .wp-embed-share-tab-button {
|
|
|
|
margin: 0 0 0 10px;
|
|
|
|
padding: 0 0 0 11px;
|
|
|
|
border-left: 1px solid #aaa;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-share-tab[aria-hidden="true"] {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
p.wp-embed-share-description {
|
|
|
|
margin: 0;
|
|
|
|
font-size: 14px;
|
|
|
|
line-height: 1;
|
|
|
|
font-style: italic;
|
|
|
|
color: #aaa;
|
|
|
|
}
|
|
|
|
|
|
|
|
.wp-embed-share-input {
|
|
|
|
-webkit-box-sizing: border-box;
|
|
|
|
-moz-box-sizing: border-box;
|
|
|
|
box-sizing: border-box;
|
|
|
|
width: 100%;
|
|
|
|
border: none;
|
|
|
|
height: 28px;
|
|
|
|
margin: 0 0 10px 0;
|
|
|
|
padding: 0 5px;
|
|
|
|
font: 400 14px/1.5 'Open Sans', sans-serif;
|
|
|
|
resize: none;
|
|
|
|
cursor: text;
|
|
|
|
}
|
|
|
|
|
|
|
|
textarea.wp-embed-share-input {
|
|
|
|
height: 72px;
|
|
|
|
}
|
|
|
|
|
|
|
|
html[dir="rtl"] .wp-embed-featured-image.square {
|
|
|
|
float: right;
|
|
|
|
margin-right: 0;
|
|
|
|
|
|
|
|
margin-left: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
html[dir="rtl"] .wp-embed-site-title a {
|
|
|
|
padding-left: 0;
|
|
|
|
padding-right: 35px;
|
|
|
|
}
|
|
|
|
|
|
|
|
html[dir="rtl"] .wp-embed-site-icon {
|
|
|
|
margin-right: 0;
|
|
|
|
margin-left: 10px;
|
|
|
|
left: auto;
|
|
|
|
right: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
html[dir="rtl"] .wp-embed-meta {
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
|
|
|
|
html[dir="rtl"] .wp-embed-footer {
|
|
|
|
}
|
|
|
|
|
|
|
|
html[dir="rtl"] .wp-embed-share {
|
|
|
|
margin-left: 0;
|
|
|
|
margin-right: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
html[dir="rtl"] .wp-embed-share-dialog-close {
|
|
|
|
right: auto;
|
|
|
|
left: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
html[dir="rtl"] .wp-embed-share-tab-button + .wp-embed-share-tab-button {
|
|
|
|
margin: 0 10px 0 0;
|
|
|
|
padding: 0 11px 0 0;
|
|
|
|
border-left: none;
|
|
|
|
border-right: 1px solid #aaa;
|
|
|
|
}
|